Grid

Our grid is split into 12 columns and three sizes; xs, sm and lg. xs represents feature phones, sm represents all smart/touch devices, lg represents desktop devices. Our grid is based on the grid from twitter bootstrap, but we've made the gutters optional and more flexible.

Real world use case

This example uses gutters and varying column widths depending on device size.

Toggle source (Jade)
.container.grid-demo
	.row.xs-g.lg-g
		.col-4
			.sub .col-4
		.col-8
			.sub .col-8
			.row.sm-g.lg-g
				.col-12.sm-4
					.sub .col-12.sm-4
				.col-12.sm-8
					.sub .col-12.sm-8

Responsive

Toggle source (Jade)
.container.grid-demo
	.row
		.col-12.sm-6.lg-2
			.sub .col-12.sm-6.lg-2
		.col-12.sm-6.lg-2
			.sub .col-12.sm-6.lg-2
		.col-12.sm-6.lg-2
			.sub .col-12.sm-6.lg-2
		.col-12.sm-6.lg-2
			.sub .col-12.sm-6.lg-2
		.col-12.sm-6.lg-2
			.sub .col-12.sm-6.lg-2
		.col-12.sm-6.lg-2
			.sub .col-12.sm-6.lg-2

Nestable

Toggle source (Jade)
.container.grid-demo
	.row
		.col-4
			.sub .col-4
		.col-8
			.sub .col-8
			.row
				.col-12.sm-6.lg-4
					.sub .col-12.sm-4.lg-4
				.col-12.sm-6.lg-8
					.sub .col-12.sm-8.lg-8

Content with gutters

The gutter is enabled on a row-level and is explicitly enabled for xs, sm, and lg. If a row has a gutter enabled for a size, the contents of that row may not exceed 12 columns, and the contents should not span multiple lines.

For the gutters to work, your columns MUST have the base 'col-X' class.

Toggle source (Jade)
.container.grid-demo
	.row.xs-g.sm-g.lg-g
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1
		.col-2
			.sub .col-2
		.col-2
			.sub .col-2

	.row.xs-g.sm-g.lg-g
		.col-4
			.sub .col-4
		.col-4
			.sub .col-4
		.col-4
			.sub .col-4

Offset

Toggle source (Jade)
.container.grid-demo
	.row
		.col-4
			.sub .col-4
		.col-3.col-offset-2
			.sub .col-2.col-offset-3
		.col-2.col-offset-1
			.sub .col-1.col-offset-2

Pull / Push

Toggle source (Jade)
.container.grid-demo
	.row
		.col-8.col-push-4.lg-push-0
			.sub .col-8.col-push-4.lg-push-0
		.col-4.col-pull-8.lg-pull-0
			.sub .col-4.col-pull-8.lg-pull-0

Mixed

Toggle source (Jade)
.container.grid-demo
	.row
		.col-3
			.sub .col-3
		.col-2
			.sub .col-2
		.col-6
			.sub .col-6
		.col-1
			.sub .col-1

Uniform: 1 column

Toggle source (Jade)
.container.grid-demo
	.row
		.col-12
			.sub .col-12

Uniform: 2 columns

Toggle source (Jade)
.container.grid-demo
	.row
		.col-6
			.sub .col-6
		.col-6
			.sub .col-6

Uniform: 4 columns

Toggle source (Jade)
.container.grid-demo
	.row
		.col-3
			.sub .col-3
		.col-3
			.sub .col-3
		.col-3
			.sub .col-3
		.col-3
			.sub .col-3

Uniform: 12 columns

Toggle source (Jade)
.container.grid-demo
	.row
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1
		.col-1
			.sub .col-1