Baffin: a SASS-y little style

Just because a project is custom doesn’t mean that it can’t recycle code, and nothing screams “recycling!” quite like a basic stylesheet.

CSS templating systems have been around for a long time, varying in popularity from the widely-used Blueprint and 960gs to the personal styles that every web developer has crafted for their own (re-)use. For the application developer that would rather be coding than styling, a fully featured framework like Twitter’s Bootstrap is pretty hard to beat. For custom designs, though, there are many advantages to starting with something a little less complete. That’s where Baffin comes in.

Meet Baffin, a framework that does just enough

Like most of the myriad CSS frameworks floating around the market, Baffin sets out to provide a basis for the typography and layout of a site. Unlike most of them, Baffin stops there. If 95% of a stylesheet will be customized to a project, there’s no reason to bloat it with rules that will end up being overwritten. So Baffin doesn’t.

To get started building around the minimal styling that it does provide, start by downloading Baffin from Github. You’ll need a copy of SASS, too, if you aren’t already using it. Add the files either to your SASS path or using an @import directive, and include the following at the top of your project’s SASS source files:

@include baffin-typography();
@include baffin-grid(12,2%);

The typography defines basic cross-browser typography—nothing special there—but let’s take a look at the Inuit-inspired grid. The definition of the baffin-grid mixin takes two parameters, $cols and $gutter. These (respectively) are the number of columns and the size of the gutter between columns to create the layout around. For a 16-column layout with a 1% gutter, you might use:

@include baffin-grid(16,1%);

Once the grid is established, Baffin adds just three classes for creating grid-based layouts. They are:

  • .clearing — clears left-floating .grid-# elements
  • .grid-# — defines an element spanning # columns in the grid
  • .layout — defines a layout

To set up a basic three column layout on a 12-column grid, you would use the layout and grid classes as follows:

<h1>Greetings from the Northland!</h1>
<ul class="layout">
    <li class="grid-4">Baffin</li>
    <li class="grid-4">Helluland</li>
    <li class="grid-4">Qikiqtaaluk</li>

Compile with SASS (or set up a parser to include the files directly), and you’re good to go!