My Intro to Middleman, Bourbon Neat and SMACSS
I recently launched Bookshelf Bar, a site to highlight cocktail culture in Calgary and beyond, and also to journal some of my own experiments behind the bar.
Though actually, the motivation for the site was mostly so I could test out a few frameworks and tools that I had been looking at:
- Middleman: a lightweight Rails alternative for building static sites with with ruby.
- Bourbon: a mixin library for Sass.
- Bourbon Neat: a grid framework for responsive sites.
- SMACSS: Stands for Scalable and Modular Architecture for CSS.
The beautiful thing about Middleman is it allows you to use all the tools you’ve been accustomed to using in frameworks like Rails, but in a package stripped down for static sites. You can still use pre-processors for your styling and layouts (I used Haml and Sass), generate new pages at the command line, etc. And of course, you have the rich Ruby gem ecosystem available to you. Score.
The project was initiatlized with middleman-template which includes Haml, Sass, Bourbon, Neat, and Live Reload. For deployment I tried to use middleman-sync first but there were gem dependency issues that I couldn’t resolve. Instead, I’m using middleman-s3_sync to deploy now. Once configured, deployment is as simple as
middleman build and then
Bourbon & Neat
My primary interest was in Bourbon was just so that I could use Neat, but that being said. I ended up really appreciating Bourbon’s powerful mixins.
The documentation for both libraries is great. For Neat, this intro was a valuable resource for getting my feet wet.
I don’t know that I’ll be using SMACSS again. I was interested in learning a durable way of writing CSS, which SMACSS seemed to promise, but now having tried it I’m still not certain of how it works for responsive web development. The documentation suggests responsive styling be handled as states, which seems to make sense, but the documentation doesn’t provide any examples of how to execute this approach and I couldn’t find any other resources on the web explaining this.
And voila! Here’s the site. There are only a couple of posts on there right now but I expect that will grow in the coming weeks and months. If you’re into cocktails I hope you enjoy!