If you're using SASS, you shouldn't need to keep running a fluid grid calculator through your designs. Instead have this mixin ready and waiting to do the calculations for you.

The output is based on Harry Roberts CSS Wizardry Fluid Grid Generator (which is currently down, but will be back online soon) — I think it's the nicest example of how to code up a grid, so I replicated that style.

All you need to do is add this into a file and compile it in with the rest of your SASS, then simply fill out the Grid Variables: $totalColumns, $columnWidth, $gutterWidth and $gridWidth.

It's on GitHub here: github.com/dpvitt/…

Let me know what you think, or if you have any suggestions to improve it.

/* $Grids
================================================== */

// Bureau Responsive Grid
// Based on CSS Wizardry / Harry Roberts Grid System
// Author	: Daniel Pavitt - @dpvitt
// URL		: http://danielpavitt.com / http://bureau-va.com
//
// ==================================================================

// Grid default variable
$totalColumns  	: 12;
$columnWidth 	: 60px;
$gutterWidth  	: 20px;
$gridWidth      : 960px;


// Grid Calculation for Percentages
@function col($n) {
	@return percentage( (( $n * ($columnWidth + $gutterWidth) - $gutterWidth) ) / $gridWidth );
}

// Each column
@mixin column($n) {
	width: col($n);
	margin-left: percentage( $gutterWidth / $gridWidth );
}

// Grid container
.grids {
	width: auto;
	max-width: $gridWidth;
	margin-left: -(percentage( $gutterWidth / $gridWidth ));
	clear: both;
	list-style: none;
	overflow: hidden;
}

// Generates styles
@for $i from 1 to $totalColumns {
	.grid-#{$i}{
		@include column($i);
	}
}

// Controls the column float
[class^="grid-"] {
	float: left;
}

/*
 *	This iterates through each column and produces output like this:
 * 
 *	.grid-1 {
 *		width: 6.25%;
 *		margin-left: 2.08333%;
 *	}
 *
 *
 *	Simply add .grid-n as a class to your element
 *	<div class="grid-12">
 *
 */

View Raw Code →