Set an comfortable line length for reading and LESS the rest.
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.
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.
Nothing special about the elements you choose for the grid or it's items. Just add the classes and the grid will appear.
"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."
–MeThe 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.
Below IE 9, the nth-child selectors and media queries will not work. The old explorers will find natural flows instead of floating columns.
That tool doesn't fit this socket.
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.
.grid
on the parent layout element that equals the viewport width..grid-flow
to contain any number of columns..grid-flow-col
to present a column.Not ready to commit yet.
Go ahead.