YAGS - Yet Another Grid System

Catchy title, huh?

I've dabbled in using grid systems for years and usually just opt to write my own that is custom to the project I'm working on. This approach has suited me fairly well while I've been building lots of fixed width sites (it's long story), but as soon as I had a regular need to use fluid layouts I knew I had to make the switch to something a bit smarter as calculating all the percentage width's was too much like hard work and it was just crying out for a little SASS.

Do we really need another grid system

Absolutely not, the likes of semantic.gs is a very good grid system and will work fine for the vast majority of applications, so if all you are looking for is something to get your project up and running, head on over there and give it a download, it's better documented than mine, supports more CSS compilers and will work just fine and dandy for 98% of applications. Alternatively, if you want a grid system that is a bit more powerful / flexible but at the expense of being slightly more complicated, check out Susy.

So what's different about my grid system

It's simple and lightweight, not to mention free to use and customise as you see fit.

No .alpha and .omega classes because they require you to use the :nth-child() selector turn them on and off as the grid fluidly re-organises itself, which makes for extra work and messier code.

Easily nestable columns. Go as deep as you like, it's really quite simple.

You still have the ability to push, pull, prefix and suffix your columns. I've always liked the 960.gs approach, so I based my grid system on the same principles.

Calculates your max-width. You don't have to use it, but if you need you need your fluid site to to have an upper limit, it it's there for you to use.

Set up the width in pixels, and it calculates all the percentages for you. Oh happy days, just take the measurements from your designers Photoshop layout, plug them into the SASS and your good to go.

You can choose what type of clearfix you want applying to the row containers.. Drop down menus can get cut-off if your grid system uses the wrong type of clearfix, well now you have a choice.

How about some code ...

@import "compass";

/* ------------------------------------
 * ------------------------------------ */
$g-col-px: 60px;
$g-gutter-px: 15px;
$g-columns: 12;

$g-max-width: ($g-col-px + ($g-gutter-px * 2)) * $g-columns;

// calculates a percentage
@function cp($target, $container) {
    @return ($target / $container) * 100%; 

// width of a column without its margins
@function inner-width($columns) {
    @return (($columns * $g-col-px) + (($columns - 1) * ($g-gutter-px * 2)));

// width of a column including its margins
@function outer-width($columns) {
    @return (($columns * $g-col-px) + ($columns * ($g-gutter-px * 2)));

// applies a width and a clearfix to the columns container
@mixin grid-row($columns: $g-columns, $clear-style: "default") {

    // sub rows will need negative margin
    @if $columns < $g-columns {
        $parent-width: inner-width($columns);
        margin-left: -( cp(($g-gutter-px), $parent-width ) );
        margin-right: -( cp(($g-gutter-px), $parent-width ) );

    // navigations will need a different (more complicated) style of clearfix applying to them
	// so that the positioned content can hang outside of the bounds
	// the default clearfix uses overflow: hidden;
	@if $clear-style == "pie" {
		overflow: inherit;
		@include pie-clearfix;
	} @else if $clear-style == "legacy-pie" {
		overflow: inherit;
		@include legacy-pie-clearfix;
	} @else {
		@include clearfix;

// sub grid columsn will need the parent column count passing in as the second parameter
@mixin grid-col($columns, $parent-columns: $g-columns) {
    $child-width: inner-width($columns);
    $parent-width: outer-width($parent-columns);
    float: left;
    margin-left: cp(($g-gutter-px), $parent-width );
    margin-right: cp(($g-gutter-px), $parent-width );
	width: cp(($child-width), $parent-width );
	word-wrap: break-word; // prevent long words or urls from sticking outside of their containers

// adds x columns worth of space before the column
@mixin grid-prefix($columns, $parent-columns: $g-columns) { 
	padding-left: cp( outer-width($columns), outer-width($parent-columns) );

// adds x columns worth of space after the column
@mixin grid-suffix($columns, $parent-columns: $g-columns) { 
	padding-right: cp( outer-width($columns), outer-width($parent-columns) ); 

// shifts the column out of its normal position by x columns to the right
@mixin grid-push($columns, $parent-columns: $g-columns) { 
	position: relative; 
	left: cp( outer-width($columns), outer-width($parent-columns) ); 

// shifts the column out of its normal position by x columns to the left
@mixin grid-pull($columns, $parent-columns: $g-columns) { 
	position: relative; 
	left: -(cp( outer-width($columns), outer-width($parent-columns) ));

What about fixed width?

To be perfectly honest, I didn't see much need for them, just set the container width to an exact dimension using width: 960px; instead of using a max-width: 960px; and it will become static.

By Karl Payne


There are no comments, don't be shy, somebody has to be first.

Leave a comment