Faux-forking Bootstrap Grids

I love digging into open source frameworks and adopting bits and bobs that can make my life easier! One of my favourites of late has been the grid system out of Bootstrap. Out of the box it doesn’t do everything I want, so I made some changes. This is a work in progress, but it’s becoming the standard for the Thrillworks basic model for grids (check out advanced at the end of this post).

Everyone and their dog has their own grid system, this is mine. It’s not perfect; but it’s robust; and very easy to pick up. This is key since this kind of front end code is handled daily by back end developers, designers, and the content management / production team.

I like Bootstrap’s simplicity, and it seems to have the most documentation of the frameworks (which is ideal when non front end devs will be using this). Being in so many projects means it’s been QA’d a lot. That’s super valuable.

The first thing I did was change .row-fluid to just .row. Everything’s responsive these days, or it will work perfectly as-is in a fixed layout. I then needed a few more helper classes to extend my rows (these excerpts are from a Sass partial, $bp-medium is 767px (well, in ems)).

INVERTED
Inverting the row adds float right instead of float left. We need this occasionally when mobile displays the rows in the opposite order (like an image before text). This code block shows the two snippets that are outside of the media query.

// When the desktop order should be reverse of the mobile order
.row-inverted [class*="span"] {
	float:right;
	margin-left: 0;
	margin-right: 2.564102564102564%;

	@media (max-width: $bp-medium) {
		.inverted [class*="span"] {
			margin-right:0;
		}
	}

}

.inverted [class*="span"]:first-child {
	margin-right:0;
}

Tight!
This is probably the extension we use most. The default gutters can be a pain sometimes, so we use .row-tight in addition to .row. This involved some math as the new widths have to include what was used up in margins before.

.row.row-tight { // No space between columns
	margin-bottom:0;

	> [class*="span"] {
		margin:0;
		padding:0;
	}
}
.row-tight > .span11 {
	width: 91.66666666666667%;
}
.row-tight > .span10 {
	width: 83.33333333333333%;
}
.row-tight > .span9 {
	width: 75%;
}
.row-tight > .span8 {
	width: 66.66666666666666%;
}
.row-tight > .span7 {
	width: 58.33333333333333%;
}
.row-tight > .span6 {
	width: 50%;
}
.row-tight > .span5 {
	width: 41.66666666666666%;
}
.row-tight > .span4 {
	width: 33.33333333333333%;
}
.row-tight > .span3 {
	width: 25%;
}
.row-tight > .span2 {
	width: 16.66666666666666%;
}
.row-tight > .span1 {
	width: 8.333333333333333%;
}

Static!
Finally, static! This extension prevents a row from collapsing into a single column at 767px. We also extend rows with module specific class names, and would then create new breakpoints using this class if needed. These styles are used instead of the existing Bootstrap styles. The :not pseudo class won’t work in anything older than IE9; but then again, neither will media queries period! 😀

@media (max-width: $bp-medium) {

	// Unless the parent .row is .row.row-static the span# inside will go to one column.
	// Static will probably need to wrap eventually, to be dealt with on a case-by-case basis
	// Also needs to not just be [class*="span"] for specificity since the .row-tight declarations above have a parent class
	:not(.static) > [class*="span"],
	{
		width:100%;
		margin-left:0;
		float:none;
	}
}

Here’s a demo of some of the documentation we used to get on the same page: http://codepen.io/ArleyM/pen/oAhjf

Something I’ll likely need to add soon is a few new .span# classes for fifths (20%, 40%, 60%, 80%), but I’ll wait until the need arises.

These are a great start and solve most basic layout needs. For more advanced grids Ryan Bruce has been working on a more advanced Sass mixin. It’s not live yet, but I’ll update this post when he’s ready to show it off.

Categorized in: CSS

This post was written by ArleyM