Responsive
SG is prepared for 4 distinct ranges of screen size: screens < 720px, screens > 720px, screens > than 985px, and screens > than 1235px. So people visiting your site will receive a layout that's tuned to the size of their browser window. Say goodbye to horizontal scrollbars.
Self-Aware
Most grid systems use one class for all units of a single size, leaving units oblivious to where they fit into the grid. That leaves you with .first and .last classes. With SG each slot knows whether it's first, middle, or last in its respective row; no extra classes needed.
Sensible
Creating the code for your grid should be the least of your problems when building a site. That's why SG keeps things simple and straightforward with as little markup and classes as possible. Even nesting grid slots doesn't require extra classes.
How to Use It
Start with the .grid wrapper. Inside the wrapper Create divs with a class of .row. Inside each row, create slots for content. Apply the associated .slot-# class, and voilà!
See It In Action
This very site is built on SG. But to give you a better idea of it's capabilities, I've created an example grid below. It demonstrates a variety of the combinations possible.
Who Made It?
Originally created by Conor Muirhead. The idea and foundation of SG was originally developed by the great team at Crowd Favorite. Currently hosted by web design agency Ramotion. See also cssgrid and fluidhtml
Basic 6-Column Grid Slots
Slots 0-5 represent the 6-column grid. These slots can be combined to create a 3-column grid too.
.slot-0
.slot-1
.slot-2
.slot-3
.slot-4
.slot-5
Basic 4-Column Grid Slots
Slots 6-9 represent the 4-column grid.
.slot-6
.slot-7
.slot-8
.slot-9
Combining Slots to Create Super Slots
Combining slots is as simple as connecting their slot numbers with dashes.
.slot-0
.slot-1-2
.slot-3-4-5
Using Both 4- & 6-Column Slots In a Row
In some situations, you might want to combine the 4- & 6-column grids in a single row. Just use the slot numbers that best represent each slots position in that row.
.slot-0
.slot-7
.slot-8
.slot-4-5
Nesting Slots & Rows
Just add .rows within .rows, and then assemble the slots in each row as per usual.
.slot-0
.slot-1-2-3
.slot-1
.slot-1
.slot-2-3
.slot-2
.slot-3
.slot-2-3
.slot-4-5
.slot-4
.slot-5
