mths : sdrbrg ;

# neat github pages with bourbon and bitters

Several times during this past year I’ve thought to myself that maybe I should write a little something about problems that I encounter and solve when fiddling with things, or tools that I find useful, but never really got to it.

During the Christmas downtime I decided to make an attempt to create a small blog using Github Pages, as it seemed rather straight forward to get something up ‘n running. I also wanted to try my luck (again) with the bourbon, neat, and bitters gems from thoughtbot.

Assuming you’ve got the github-pages gem installed and the basics already set up, the first step is to add the gems to your Gemfile, or just install them with gem if you’re not using Bundler.

gem 'bitters'
gem 'neat'
gem 'bourbon'

Since GitHub runs jekyll with the --safe flag we’ll need to install the stylesheets locally, which is done by running the following commands in the configured sass_dir (by default _sass):

$ bourbon install
$ neat install
$ bitters install

The last piece of the puzzle is to add some @import statements to our main SASS stylesheet, for example:

@import "bourbon/bourbon";
@import "base/base"; // bitters needs to be imported before neat
@import "neat/neat";

That’s about it, now you should have a jekyll blog set up with bourbon, neat and bitters, ready to be customized to your liking. I’d start with looking into base/variables.scss and base/grid-settings.scss.

Given the “design” of this blog, using a grid framework and whatnot might seem a bit unnecessary, but I like experimenting with new toys and the best way, in my opinion, is to actually get something done.

28 Dec 2014 / github bourbon neat bitters css