MiddlemanでつくったブログにBourbon系cssライブラリを導入する

Middlemanを使ったプロダクトにBourbonファミリーのcssフレームワークを使いたかったので、これを見て導入した。

robots.thoughtbot.com

Middlemanだと Install for a Non-Rails App に書いてあるように、 Gemfileに必要なgemを追加してbundle installして適当にimportすればよい。今回は初めてBittersを使うんだけど、どうやらNeatの前にimportしなければいけないっぽい。bitters installはじめてやった。

bitters installをするとbaseディレクトリと以下のようなファイルが生成されます。

/base
  - _base.scss
  - _buttons.scss
  - _forms.scss
  - _grid-settings.scss
  - _lists.scss
  - _tables.scss
  - _typography.scss
  - _variables.scss

FLOCSSで管理したかったので、こいつらはsource/stylesheets/foundation/baseというパスにしておいた。