A grid system in SASS/Compass

Update! Check out this post for more refined ideas + some practical considerations when working with ‘certain’ CMSs.

Driving home this evening I was inspired to write my own CSS grid system. I HATE the idea of bloated CSS frameworks. I’ve never been able to bring myself to use one, despite the obvious advantages. I do, however love SASS and particularly Compass (wait, isn’t that a framework already..?!).

The solution is simple: write my own. I haven’t really started yet, but the basic setup took around 10 seconds using SASS and I just had to share it!

.row-container {
  width: 100%;
  > div {
    float: left;
  }
}

$columns: 12;

@while $columns > 0 {
  .span-#{$columns} {
    width: percentage((1 / 12) * $columns);
  }
  $columns: $columns - 1;
}

which magically becomes:

.row-container {
  width: 100%;
}

.row-container > div {
  float: left
}

.span-12 {
  width: 100%;
}

.span-11 {
  width: 91.667%;
}

.span-10 {
  width: 83.333%;
}

.span-9 {
  width: 75%;
}

.span-8 {
  width: 66.667%;
}

.span-7 {
  width: 58.333%;
}

.span-6 {
  width: 50%;
}

.span-5 {
  width: 41.667%;
}

.span-4 {
  width: 33.333%;
}

.span-3 {
  width: 25%;
}

.span-2 {
  width: 16.667%;
}

.span-1 {
  width: 8.333%;
}

With an HTML structure like:

<div class="row-container">
  <div class="span-4">
    <p>Stuff</p>
  </div>
  ...
</div>

Not bad for 10 seconds work! Let’s see how long it takes to build something (responsive) that can actually be used for production stuff. Fun, fun, fun :)