gReëed. A simple and customizable responsive #CSS grid. No pretentions, just for fun
Getting to know
• 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.