Rails と bourbon と neat と bitters

Rails に bourbon,neat,bitters のインストール手順を書きます。

bootstrap などを使うとあまりにもブートストラップになってしまうことに困ることもあるとおもいます。
参考: http://megane84.com/blog/2013/12/25/post-2682/

<div class="col-xs-12 col-sm-6 col-md-4"> こういうタグを書くのがつらいときがあります。
bourbon,neat,bitters のデフォルトは控え目で、自分で css を育てていく感じなので良いと思います。

http://bourbon.io Bourbon scss の mixin 集
http://neat.bourbon.io Neat Grid システム
http://bitters.bourbon.io Bitters Bourbon,Neat を利用したサンプルのようなもの

Rails に導入する場合

1. Gemfile に追加して bundle install する

gem 'bourbon'
gem 'neat'

2. bitters をインストールする

bitters は scss のサンプル的なファイルがいくつかインストールされるだけなので、Gemfile には書かない。

gem install neat
cd app/assets/stylesheets
bitters install

2. application.css をいれかえ

/app/assets/stylesheets/application.css を削除して、
以下の内容で application.scss を追加

@import "bourbon";
@import "neat";
@import "base/base";

以下のようになります

/app/assets/stylesheets (master)$ tree
.
├── application.scss
├── base
│   ├── _base.scss
│   ├── _buttons.scss
│   ├── _forms.scss
│   ├── _layout.scss
│   ├── _lists.scss
│   ├── _media.scss
│   ├── _tables.scss
│   ├── _typography.scss
│   └── _variables.scss
└── scaffolds.scss

以上です。
bitters のインストール方法をいつも忘れるので書いておきました。

バグ

2016/04/18 09:41:28 の時点では、Undefined variable: "$font-stack-system".
というエラーになったので、とりあえず

/* $base-font-family: $font-stack-system; */
$base-font-family: $lucida-grande;

のようにして回避した。