1/1

1/2

1/2

1/3

1/3

1/3

1/4

1/4

1/4

1/4

1/5

1/5

1/5

1/5

1/5

1/6

1/6

1/6

1/6

1/6

1/6

1/6

5/6

1/5

4/5

1/4

3/4

1/3

2/3

1/4

1/4

1/3

1/6

1/6

1/6

1/6

1/6

1/3

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
  • breakpoints
  • colors
  • fonts

GETTING STARTED

• Download or fork the repository
• Run NPM in order to install the dependecies
• Run GULP
• Customize or change the SCSS files

CLASSES

• "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

CREDITS

• 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.