#Combining different widths
#Inverting the flow
GETTING TO KNOWN
- This grid is mobile first and perfectly useful for your RWD projects.
- All the columns must be place in a row. This element must have a "g" class because supplies a clearfix to manage the float columns inside itself.
- The elements inside the columns with the class "m" are not neccesary when building the grid.
- All the classes which start with "demo__" are totally unnecessary. I used them only for demonstration purposes. So the "_demo.scss" file is totally avoidable. It's up to you.
- All the <div class="c-*"> has full width (100%) until the first breakpoint ("480px" by default).
- The class "c-1-2--fixed" is an extra bonus. It is intended to split a row in 2 equal columns. Basing on my experience there is no scenario where you need to split a row in 4, 6 or more columns when the screen is lower than 480px.
- From 480px the "c-*" classes gets in action.
- Built with SASS (SCSS syntax) then some options are customizable:
- wrapper width
- grid and column paddings
- Download or fork the repository
- Run NPM in order to install the dependecies
- Run GULP
- Customize or change the SCSS files
- "w" class is for "wrapper"
- "g" class is for "grid"
- "m" class is for "module"
- "c" class is for "column"
- "g-pad" class adds a padding to the grid element
- This grid has been inspired in a lot of resources all along the wide web; CSS frameworks, tutorials and my own experience. Thanks to all, you are great folks!
- Feel free to download, modify, break, use or destroy this grid.