Responsive

Illustration of Responsive

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

Illustration of 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 each slot knows whether it's first, middle, or last in its respective row; no extra classes needed.

Sensible

Illustration of Sensible

Creating the code for your grid should be the least of your problems when building a site. That's why 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 . 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?

Hi, I'm Conor Muirhead. The idea and foundation of was originally developed by the great team at Crowd Favorite. Since then, I've continued to work on a fork of the project.

Download

Usage permitted under the MIT License.

Download


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