Grid Responsive

12-column Grid

Beard ships with a standard 12-column grid and provides responsive helper classes to change the layout when the viewport reaches a certain breakpoint. It also supports nested grids and non-responsive grids for increased flexibility.

Hint: To get the grid to maintain its ratios on the small breakpoint, use the .frame--stay modifier on your .frame wrapper.

Examples

.blk
.blk.md-blk6
.blk
.blk.md-blk6
.blk
.blk.md-blk--offset3
.blk3
.blk3.md-blk--push9
.blk9
blk9.md-blk--pull3

The Auto Grid

The AutoGrid is the easiest way to get started. Simply use a div with a .frame class and place any number of .blk elements as direct descendants. The AutoGrid will automatically figure out the width for each column and will give it a generous 30px of padding between each of them. This will create 60px wide gutter between columns.

.blk
.blk
.blk
.blk
.blk
.blk
.blk
.blk
.blk

Grids with no padding .frame--xpad

Uno
Dos
Tres
Quatro
1
2
3
1
2

Nested Grids with .frame--stay

Nested
Nested
1
2
3
4