Colonnade

Who hasn't rolled their own grid?

https://github.com/joelhans/Colonnade

Colonnade is an open-source SASS/Compass project I developed back when I was dissatisfied with all the existing grid solutions out in the web development world. None of them were as simple and small as I wanted, and they all used naming schemes that were confusing. Plus, they were restrictive in what sizes were available—960 pixels in width just isn’t enough for most applications these days.

My desired featureset was fairly simple:

The first was accomplished by using what I thought to be a pretty logical naming system: column- + 1 to 12. Some smart CSS [class*="column-"] allowed me to apply the necessary styles to all columns in a minimal amount of space.

Because SASS allows for variables, flexibility in the grid was trivial to implement:

$containerWidth : 960px;
$columnNumber   : 12;
$gutterWidth    : 20px;

I used industry-standard media query breakpoints (959px, 768px, 479px) to establish a smart responsive scheme.

@media only screen and (min-width: 768px) and (max-width: 959px) {
  $containerWidth: 768px;
  ...
}

I love big, bold content that isn’t afraid to breathe on large screens. For high-resolution devices like new iPads, or even large desktop monitors, many websites only utilize a fraction of the available space. Colonnade solved that with two simple steps:

$bigGrids : true;
@if $bigGrids == true { @media only screen and (min-width: 1400px) {
  $containerWidth: 1400px;
  ...
}

If I had written Colonnade in pure CSS, it would have needed to be significantly larger, because the styles for each type of column has to be declared independently. But SASS supports loops, which allowed me to establish all the widths and offsets with one simple function:

for $i from 1 through $columnNumber {
  .column-#{$i} {
    width: (($containerWidth / 12) * $i - 20);
  }
  .offset-#{$i} {
    margin-left: (($containerWidth / 12) * $i + 10);
  }
}

The end result? A svelte 3.717 kb. Just goes to show what can be accomplished by using the right tools.

Check out the source or see Colonnade in action.

Visit Colonnade