Reading grid

Comfort zone

Set an comfortable line length for reading and LESS the rest.

Responsive and Readable

This is a responsive grid but it's necessarily not fluid. Other grids can fill all the available space on a page, but that's not always going to produce a readable result.

Narrative or navigation

This grid is similar to using the CSS-3 columns module. It differs in it's brutal strictness to the grid. This is intended to improve scanning for narrative/navigation hybrids.

Schmelements

Nothing special about the elements you choose for the grid or it's items. Just add the classes and the grid will appear.

For example

"Nothing special about the elements you choose for the grid or it's items. Just add the classes and the grid will appear. Wait, I just said that."

–Me

Couplets and Triplets

The grid includes 2 classes for describing how columns are grouped. If you have a total of 2, 4, 8, or 16 columns, use grid--n2. If you have 3, 6, 9, or 18 columns, use grid--n3. You can use both also.

Old explorers

Below IE 9, the nth-child selectors and media queries will not work. The old explorers will find natural flows instead of floating columns.

Spanners

That tool doesn't fit this socket.

Nor devices

Making arbitrary choices based on device usage can be effective, but the goal here is to create a dynamic system the uses the line width constant to derive it's breakpoints.

Semantic

  1. .grid on the parent layout element that equals the viewport width.
  2. .grid-flow to contain any number of columns.
  3. .grid-flow-col to present a column.

Git it

Not ready to commit yet.

Use it

Go ahead.