Thinking Grids

A study guide for understanding Grids with working examples implemented in CSS3, Less, Sass, Stylus, Postcss, and CSS Grid.

Libraries:

• Bootstrap (less)
• Flexbox (css3+postcss)
• Frameless (less)
• Gridism (css3+postcss)
• Skel (sass)
• Susy (sass)
• Lost (postcss)
• CSS Grid

Workflow

The workflow is optimized for rapid prototyping.

Templates are written in plain HTML5. Styles are written in either CSS3 with Postcss, Less, or Sass, based on the libraries. Npm itself is used as a build tool (no build tools please) and Bower is used to manage dependencies.

To start a live reloading server that compiles all the projects with included preprocessors and postprocesors, run:

npm start

Preview the page at http://127.0.0.1:8000 and start designing.

You can also start individual projects with npm run build:susy or projects for a particular pre/post processor with npm run start:sass.

Credits

The initial HTML templates and styles were ported from the examples of respective libraries. Redundant styles were removed to focus on grids.

Articles

• Baseline Grids
• CSS Grid Module Level 1 Spec
• Don't overthink it Grids
• Fluid Grids
• Golden Grid System
• OOCS
• The magic behind Bootstrap Grids
• Understanding Susy's Grids
• Learn CSS Grids in 5 mins

Other Libraries

• Bobcss

License

Copyright (c) 2015 - 2018. Priyatam Mudivarti and original authors of libraries.

MIT.