Rabid Logo

Rabid is now Ackama

In September 2018, on the company’s 8th birthday, Rabid became Ackama - this was to reflect that fact that we work on large digital ecosystems, and given that nature is the largest ecosystem in the world we wanted a name that came from nature. Ackama, or Makamaka, is a small bushy tree with white flowers and red seeds. It’s found on the coast from Whangarei north.

Go to the Ackama blog

Moving from Bootstrap to Bourbon

Putting my money where my mouth is

At the Wellington CSS Meetup back in June, I gave a talk on Bourbon and its associated projects. Bourbon is a SASS based web styling framework that can be used as a replacement for frameworks like Twitter Bootstrap. Recently I converted a Bootstrap based site to Bourbon and this post details what I found.

The Bourbon family is made up of several projects, each building on top of others to allow you to pick and choose what you need in a styling framework. Bourbon itself is a library of SASS mixins that removes the need for vendor prefixing of CSS rules and a few extra helper functions on top of the ones SASS provides. Neat provides all you need for a grided layout, Bitters provides some base scaffolding to modify and build your site off of and Refills provides standard components for you to select from for your site.

Unlike Bootstrap’s rigidity with DOM structure, the Bourbon family is all about flexibility and only including exactly what you need. The tradeoff for this is potentially a lot more boilerplate but you gain explicitness and arguably better semantics.

For example, a basic site layout in Bootstrap 3 might look like this:

<div class="container-fluid">
  <div class="row">
    <div class="sidebar col-xs-4">
      Side bar content
    </div>
    <div class="content col-xs-8">
      Main content
    </div>
  </div>
  <div class="row">
    <div class="footer col-xs-12">
      Footer content
    </div>
  </div>
</div>

While in Bourbon with Neat it might look like this:

<div class="container">
  <div class="sidebar">
    Side bar content
  </div>
  <div class="content">
    Main content
  </div>
  <div class="footer">
    Footer content
  </div>
</div>
.container {
  @include outer-container;

  .sidebar {
    @include span-columns(4);
  }

  .content {
    @include span-columns(8);
    @include omega();
  }

  .footer {
    @include span-columns(12);
  }
}

This might not seem like a huge win until you start wanting to tweak things. What if you were to want to change the padding of a layout element in Bootstrap? Well, you’d need to make sure you had a separate class on it and then add the padding to the class. When using a Neat based grid, you’ve already probably created that class. But then you wanted to tweak the number of columns the element takes up. In Bootstrap you have to go back to the markup and change the column class, in Bourbon/Neat it’s right there in the stylesheet with everything else.

Bootstrap ultimately falls into the same issues that inline style attributes do. It mixes styling into your markup making long term maintenance harder and reducing DRY-ness.

Neat also has a lot of flexibility with the number of columns in the grid and the breakpoints for responsive layouts. In my site I’ve defined a $mobile breakpoint and a $tablet breakpoint like so:

$mobile: new-breakpoint(max-width 640px);
$tablet: new-breakpoint(max-width 965px);

I can use them in the above example layout like so:

.container {
  @include outer-container;

  .sidebar {
    @include span-columns(4);

    @include media($tablet) {
      @include span-columns(12);
      @include omega();
    }

    @include media($mobile) {
      display: none;
    }
  }

  .content {
    @include span-columns(8);
    @include omega();

    @include media($tablet) {
      @include span-columns(12);
    }
  }

  .footer {
    @include span-columns(12);
  }
}

Again, not as concise as the Bootstrap version where one would chain column classes on the layout element but ultimately more flexible and explicit.

Bootstrap has its place for putting together a modern web application quickly but its rigidity often leads to frustration for designers and frontend developers over the long term. For larger projects and ones with a strong design element, the Bourbon family definitely is the better choice. There are a few gotchas which I’ll cover in another post but so long as you keep a strong structure to your classes, you’ll be thankful over the long term.

Megan Bowra-Dean