Demonstration content of website. See
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
holy-grail-layout First Demos Commit Jan 21, 2019
same-height-columns First Demos Commit Jan 21, 2019
website-header Image demo update Feb 3, 2019 Twitter account update Feb 18, 2019
demos.json First Demos Commit Jan 21, 2019 Screenshot is a website made and hosted by Geoffrey Crofte to help you better understand CSS Flexbox Layout Module.

How to contribute

The fact that those demonstration folders are available on Github is because you are very welcome to contribute to show how you use Flexbox to solve CSS issue, advanced layout or even little CSS tricks.

Pick one of the folder as example. All I need to run your demo is:

  • 1 index.html file containing the explanation of your code.
  • 1 demo.html file containing the entire independant demonstration of your code. Feel free to do whatever you want in that file.
  • 3 images named [nice-name]-big.png (1086×648), [nice-name].png (362×226) and [nice-name].svg (362×226). If you don't know how to “iconified” your demo, leave those empty, I'll work on it for you.

Drop your name and your URL on your demo, I'll arrange the footer for you, because mentions are due.


Some ideas are already on my to-do list. Among those:

  • Align Icons
  • Vertical-Align Content
  • Flexible Sidebar
  • Stepper Input
  • Card Group
  • Flexible Gallery (Masonry)
  • Grid Gallery
  • Pricing Table

If you've got any idea or need, contact me on Twitter.

Website Next Steps

The next step for the website is to become a PWA so you can use this resource online and offline from your smartphone and compatible devices.