In Praise of Scaffolds

By Sam Bleckley on 09 06 2016

You're probably familiar with ThoughtBot's Bourbon css suite. We at Mutually Human like it a great deal.

Today I wanted to call out, specifically, they way they've done Bitters, their set of default styles, variable names, typographic rhythm, etc. It's all very nice, but what I love is the way it gets installed and used:

Install the Bitters library into the current directory by running the following command at the command-line. If you’re using Ruby on Rails, run the command in app/assets/stylesheets:

$ bitters install

A base directory will be generated which contains all of the Bitters files.

Bitters is a gem; but running 'bitters install' just copies all of bitters into the current directory. From there, you treat it like your own code, adding, manipulating, and removing as you see fit.

It must have been a temptation to make something that behaved more like a library, more like bootstrap. Something that used CSS specificity and ordering to allow the user to override the defaults.

But Bitters is perfect the way it is. If I don't like one of ThoughtBot's defaults, I can just delete it. It won't crop up later, somewhere else, because of a selector I didn't realize I needed to override — it's gone.

Similarly, if I want to add my own base styles, I have a great place to put them, and a clear example of how to write them. I don't have to do any architectural thinking, I can add the style and move on.

Building, isolating, and distributing a scaffold instead of a library is a great pattern to have in your toolbelt. It means you can reuse your code with less additional time spent attempting to think of every possibly variable you might like to tweak later.

There are definitely weaknesses to this approach — anything installed this way will never get updates, if a security or performance flaw is fixed in the original package. You should consider the choice of library vs. scaffold carefully before you leap in, but it's a powerful tool and one that's often under-utilized.

(image by Rasbak)