Keroseen Grid Demo

By default, the grid system builds with 9, 12, 16, 20, and 24 column grids. This can be changed by updating the value in /src/sass/_settings.sass to include more or fewer grids and running the Gulp task.

Each grid system comes in five sizes: x-small, small, med, large, and x-large. By default, the latter four also have corresponding breakpoints for when the screen is in portrait orientation. This option can be turned off in the /src/sass/_settings.sass file and running the Gulp task.

The columns had been offset in one of three ways:

Grid 9

.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-2
.small-3
.small-4
.small-4.centered
.small-2.push-1
.small-6
.small-3
.small-2.pull-1

Grid 12

.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-2
.small-4
.small-6
.small-5.centered
.small-2.push-3
.small-7
.small-3
.small-3.pull-1

Grid 16

.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-1
.small-5
.small-4
.small-7
.small-9.centered
.small-4.push-4
.small-4
.small-4
.small-5
.small-5.pull-3

Grid 20

.small-2
.small-2
.small-2
.small-2
.small-2
.small-2
.small-2
.small-2
.small-2
.small-2
.small-5
.small-8
.small-7
.small-11.centered
.small-5.push-5
.small-5
.small-5
.small-6
.small-6.pull-3

Grid 24

.small-2
.small-2
.small-2
.small-2
.small-2
.small-2
.small-2
.small-2
.small-2
.small-2
.small-2
.small-2
.small-9
.small-8
.small-7
.small-15.centered
.small-6.push-6
.small-6
.small-6
.small-7
.small-7.pull-5