Gridline

This project is designed to generate CSS on the fly that sets up a responsive grid system of any size for use with Twitter Bootstrap 3. By default Bootstrap only has 12 columns in its grid, but now you can add any number that you may need on a row by row basis.

View GitHub Repository
Created by: Tom Maiaroto, Shift8Creative


Twitter Bootstrap 3 Default

Gridline Adjusted

To Use: Just add data attributes to your row elements, like so: <div class="row" data-columns="16">

You can also change the gutter width with data-gutter-width="15" (Twitter Bootstrap's default is 30px).

.col-md-12

data-columns="16"

Easily add as many columns as you need.

.col-md-3
.col-md-8
.col-md-1
.col-md-4

data-columns="64"

.col-md-8
.col-md-8
.col-md-8
.col-md-8
.col-md-8
.col-md-8
.col-md-8
.col-md-8

The padding had to be removed to make these fit...But it can be done...

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1

So why bother? Well, you may need a more finite grid for your design. While no one expects to have 64 columns full of content, having the ability to divide to this degree comes in handy. Not all designs can be fit into a 12 column grid.

.col-md-8
.col-md-4
.col-md-11
.col-md-1
.col-md-60
.col-md-4
.col-md-52 .col-xs-32
.col-md-12 .col-xs-32

data-columns="16" data-gutter-width="10"

Gutter width can also be adjusted to change Twitter Bootstrap's default of 30px. Remember this is divided by two so that each column has an equal amount of padding and the space between each is equal to the desired width. However, the first column has a left padding of half and the last column has a right padding of half the set value.

If you want this to be a true gutter, leaving no padding to the left of the first column and no padding to the right of the last (so that type sits flush), you can set the data-flush-row="true" data attribute to true.

.col-xs-8 .col-md-4
.col-xs-8 .col-md-4
.col-xs-8 .col-md-4
.col-xs-8 .col-md-4
.col-xs-8 .col-md-4
.col-xs-8 .col-md-4
.col-xs-8 .col-md-4
.col-xs-8 .col-md-4

data-gutter-scaling="false"

Keep gutter widths consistent regardless of device resolution. By default, the padding is going to be scaled for devices with lower resolutions (reduced by half). The idea is to attempt to look the same visually. Plus, there isn't much need to keep such a large amount of padding on smaller devices which are already limited in size. However, you can of course keep the padding consistent if you like (note that the following example should be viewed on a smaller device to see the difference in the gutter).

.col-xs-8 .col-md-4
.col-xs-8 .col-md-4
.col-xs-8 .col-md-4
.col-xs-8 .col-md-4


.col-xs-3
.col-xs-3
.col-xs-3
.col-xs-3


Push & Pull

These classes work just the same as before.

.col-md-2
.col-md-2


.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9