Blog Tech, Part 3 - Sass, Assets and Common Libraries

October 31, 2013

Sass, Asset Pipelines, jQuery, and Bootstrap 3

Technology Four: Sass

At this point the basic site was up, and I'd written a tiny bit of CSS to make things less hideous. Now it's time to start some serious styling (well, not really - more on that later). But that does not mean vanilla CSS. It means Sass, or LESS.

There are other preprocessors out there, but these are the ones I run into all the time at work and at play, so, well, I'll use one of those for now. I'm most familiar with Sass, and I didn't want to devote too much effort to learning a new preprocessor, so I stuck with it.

Technology Five: An Asset Pipeline

But, wait, this is a Ruby project, not a Rails project. That means no Rails Asset Pipeline! Ugh, do I have to precompile my Sass to CSS by hand before every commit? Add some kind of git hook to automate it? Or install another Heroku Buildpack? Oh, wait, just because it's not Rails doesn't mean I can't have an Asset Pipeline. Enter the jekyll-assets gem, which introduces a (just like in Rails) Sprockets-based asset pipeline.

Since it's made with Jekyll in mind, it also has Liquid tags and filters for use in my HTML templates. Score! Installing it was pretty easy. Had to make a few tweaks, that I'll get to in awhile.. But for now, just know that it was really easy to install the gem and start getting my Sass compiled on the fly!

Technology Six: jQuery

This was pretty much a no-brainer. I added the last stable release of jQuery to the application.

I'm serving the files myself, because I want some experience with easily debugging though the un-obfuscated source, the source code. (Hooray Asset Pipeline!) But eventually I'll pull from the jQuery CDN for client-side cacheing purposes.

Technology Seven: Bootstrap 3

I have a lot of experience with Bootstrap - at OurStage we built the customer-specific "mini-"sites using the slightly older Twitter Bootstrap 2. On the other hand I've been hearing good things about a recent competitor, Zurb Foundation, and was tempted to go with that, just for a change of pace.

But then, when I investigated a bit more, I found that a lot of folks (including the Bootstrap team itself) have been talking about the big differences between Bootstraps 2 and 3, and the big learning / migration curve. So, I decided that using Bootstrap 3 would be a learning experience in itself, and decided to go for it.

By the way, this was one of the toughest technology decisions that I made, since I'm also really interested in Foundation. I strongly suspect that I'll start using Foundation on some separate part of my site, just for the experience.

(Finally) deciding to use Bootstrap motivated two other changes:

I threw out most of my Sass code - I decided instead to take (mostly) the Bootstrap defaults for now, and worry about the details later. Otherwise, I'll spend the rest of my life playing with layout and never write any content.
Using Bootstrap motivated me to use the Bootstrap icons, which are encoded in fonts. But, the jekyll-asset pipeline doesn't support fonts out-of-the-box. I had to, and did, fix that in my local build. Someday I'll see what it would take to build even more explicit font support into jekyll-asset.

OK, enough for tonight. More in a few days!