Grid Overview

Stylus Boilerplate ships with two types of grid systems:

  1. Traditional float-style grid on fixed columns
  2. Flexible, flex-box/table-based grid with unlimited columns

Traditional Float Grid

To use the traditional "float-style" grid, simply@extendthe col-{number} class, where number corresponds with the amount of columns to span. For example, to achieve half a row on a grid with 12 columns, use the class @extend $col-6

Flexible Grid

Because flexbox isn't yet supported in older browsers, and is less performant than table layouts, I adapted a grid based off of mdo's table grid.

To use the grid system, simply wrap your elements in a .row class, followed by any column elements within a .column class.

Column Sizes

You can set column sizes in normal English, as you might expect:

Grid width classes
ClassWidth
.column100%
.column .one-half50%
.column .one-fourth25%
.column .one-third33%
... etc.
.three-fourths

(Doesn't need a class. This will fold over.)

.one-third

(Doesn't need a class. This will fold over.)

(Doesn't need a class. This will fold over.)

.one-fourth

Auto-distributed column widths

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
1
2
3
4
1
2
1

Nested Grids

You can nest grids, using the same markup as a normal grid:

Single Column that's nested

Nested column 1

Nested column 2

Unnested column

Grids with Gutters

You can add spacing between the columns with the.row-padded class:

1
2
3
1
2

Vertically-Aligned Columns

Simply use the class.column-align-middle:

1
2
3
4
5
1
2

Distributed Row

You can "distribute" the contents of a row, such that content is aligned left and right with space between:

.column.one-third
.column.one-fifth
.column.one-half
.column.one-third