A study guide for understanding Grids with working examples implemented in CSS3, Less, Sass, Stylus, and Postcss.
Libraries:
- Bootstrap (less)
- Flexbox (css3+postcss)
- Frameless (less)
- Gridism (css3+postcss)
- Skel (sass)
- Lost (stylus)
- Susy (sass)
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.
The initial HTML templates and styles were ported from the examples of respective libraries. Redundant styles were removed to focus on grids.
I'm writing a brief book on Grids and will update this space soon.
- 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
Copyright (c) 2015 Priyatam Mudivarti, and original authors of libraries.
MIT.