Blog Tech, Part 5 - Revisiting Layout Tech. Or, Thoughts from a Thoughtbot Fanboy

Bourbon, Neat, with a dash of Bitters.

Technology 10: Bourbon

When I was looking to solve some font issues, I stumbled across a reference to Bourbon. Then I remembered that a old coworker, Chris, introduced me to Bourbon at OurStage. (Bourbon the mixin library, not Bourbon, America's Official Native Spirit - it was another Chris that introduced me to that.) I realized that I should add that in, since in addition to great font family support, it provides some great macros for handling vendor prefixes.

Technology 11: Neat

A few hours later, I remembered a conversation that I had with Chris at the Beantown Pub after a meeting around the corner at the Boston Thoughbot offices. He recommended that I look into a new layout library called Neat. Turns out that it's from the fine folks at Thoughtbot, as a companion to Bourbon!

Chris had been praising the semantics of Neat, but I didn't get it until I saw this example on the site.

Where in Bootstrap you'd write HTML to size your columns::

<div class="row">
  <div class="col-md-3">.col-md-1</div>
  <div class="col-md-9">.col-md-1</div>
</div>

In Neat, you write CSS or some variant (here, SCSS):

section {
  @include outer-container;
  aside { @include span-columns(3); }
  article { @include span-columns(9); }
}

and then associate those classes with the HTML code.

So, wait, what? I edit CSS to control then onscreen appearance, rather than hard-code it into the HTML? Oh My God, I get it! That tears it, I'm playing with this!

So, out with the Bootstrap, in with the Bourbon and Neat!

Technology 12: Bitters

Yeah, Bourbon, Neat, Bitters. I get it.

Ripping out Bootstrap left me with a stylesheet-less page. Ugly as sin.

Fortunately, the Thoughtbot folks fixed that, too, with Bitters. It's a minimal Sass library for use with Bourbon and Neat. Not a lot, just enough to get by.

That, with a few CSS styles of my own, got me back to a decent-looking page. It's not done, but it's serviceable for now.