Working with CSS is always hard especially in big projects. We have many CSS frameworks nowadays which try to help with this. Everyone knows Bootstrap or Foundation. Basically we always need some kind of grid system to be the foundation of our layout. A majority of those frameworks are based on a standard Box Model. It’s a well established approach and it’s really very useful. But sometimes we encounter some edge cases with it like vertical aligning, ordering and complicated systems with overdose CSS styles. We need something better. Here comes Flexbox (Flexible Box Layout)
Read more at: julian.io
Also take a look at: medium.com and sitepoint.com
sGrid is a Flexbox grid system built with Stylus CSS preprocessor. It is prepared to use with helper classes, like Bootstrap or Foundation does it, but also in a more semantic way by using special Stylus functions. More about it later. It is also based on CSS native calc().
In the core of the grid lies the npm package which includes three main .styl files.
s-grid-settings.styl
s-grid-functions.styl
s-grid-classes.styl // this one is optional
You can find the npm package on the npm registry here: https://www.npmjs.com/package/s-grid and you can also preview files on GitHub here: https://github.com/juliancwirko/s-grid
The first file includes grid settings, the second one is the grid logic, functions, and mixins, and the last one is the main grid structure and CSS classes. You can preview all files on github repo.
sGrid is divided into three files because you should have the possibility to overwrite settings and even functions in your project.
Why sGrid?
When not to use sGrid?
For installation documentation choose how you want to use sGrid and read more in separate sections of this documentation.
I encourage you to contributions :) in all sections whether it is React boilerplate or Grunt or Meteor. Or even this website. I know that some things could be done better and they will, but with contributors we can achieve it faster :)
For more detailed grid documentation see here: Grid
If you want to try other grid system. I can recommend awesome grids. Take a look at: