Skip to content
gReëed. A simple and customizable responsive #CSS grid. No pretentions, just for fun
HTML CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist/css
src
README.md
gulpfile.js
index.html
package.json

README.md

greeed

gReëed. A simple and customizable responsive #CSS grid. No pretentions, just for fun

Demo

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

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

You can’t perform that action at this time.