Bourbon, Neat, Bitters, Refills をお手柔らかにお願いします

thoughtbot四兄弟をお手柔らかにお願いします

あらかじめ申しておきますと、何らかの解決策を求めてこのページをご覧になった方々には、何の解答も示す事ができない可能性が大いにあるため、非常に申し訳無く思います。

はじめに

return to toc

自分は Twitter Bootstrap にさほど疑問を感じない…例えば、(クソ)マークアップ問題やデザインが同じ様になる1 …その辺は後述…程度には、フロントエンド開発に疎い事だけは。
つまりは「お前は何を言ってんだ」だろうなぁこの投稿…中途半端な知識を振りかざしてる感満載じゃないかと。
まぁ、thoughtbot四兄弟を酒の肴に呑んでる…みたいな…

さて。

何で知ったか覚えてないけど、Refillsを試してみたいと。

しかし前提条件として、BourbonNeatが必要との事で、これらが意味する事は何となく分かるけど、これらを踏まえた上でどうやって使うのかがピンと来なかった。
日本語情報を漁っても、Bourbon、Neat、更にはBittersまでは情報として得る事ができても、フロントエンド開発に疎い自分には、Refills本家サイトにコピペ用コードがあるとはいえ、この環境に辿り着くまでに、具体的にどの様に手を動かしていけば良いのかがさっぱりで…自分はRefillsをちょっと試したいだけなのに…

話はずれるが、近頃(2015年2月)、ドットインストールと同じ感覚で、Youtubeのチュートリアル動画2 の「写経」がマイブームになっている。
当然これらは日本語ではなく、スペイン語やポルトガル語など3 …英語もあるけど、英語は中途半端にしか分からないので逆に気が散ると言うか。
なのでセンセの言ってる事はほぼ理解できないが、コードを打って実行するプロセスをきっちりと見せてくれれば後はこちらで何とかするから、あわよくはGitHubにコードを置いて頂ければサイコー4 というスタンスで。5

閑話休題。
これらthoughtbot「四兄弟」もYoutubeで何とかならないかと探して見付けたのでそれに関して6 、および、あくまで現場で使うには色々と必要かなぁという前提で、Gulpでゴチャゴチャやる場合のメモを。

…と言うか、これらプロダクトの日本語解説が見付からないのは、誰も知らない・興味無い、もっと素晴らしいプロダクトが存在するのか…
…例えば「60+ Best CSS Frameworks for Responsive Design」だそうで、セカイにはこんなにも沢山の CSS Framework が存在するのかと。
あるいは、イチイチこんな解説無くとも使えるのがフロントエンド開発なのか…前者は仕方無いにしても、後者だと、まぁホント、ドヤ顔で投稿する意味があるのかなぁと疑問だけど、関西フロントエンドUG主催の FRONTEND CONFERENCE 2016 でライブコーディングを行うとの事なので、ニーズなり、広めたい方がおられるのだろうとは思う、思いたい…

なお、改めてこれら四兄弟の概要は下記の通りで、全てMITライセンス

Bourbon
A simple and lightweight mixin library for Sass.
つまりはCompassみたいな位置付けのモノかと。
Neat
A lightweight semantic grid framework for Sass and Bourbon.
つまりはBourbonを前提にしたグリッドフレームワークかと…サンプルページ
Bitters
Scaffold styles, variables and structure for Bourbon projects.
つまりはBourbon(・Neat?)で使う変数はここに集約していますよ、更にはグリッド・タイポグラフィ・リスト・フォームも使えるよ、サンプルだよ、みたいな?
具体的には、この _variables.scss のお世話になるっぽい。
Refills
Components and patterns built with Bourbon and Neat.
つまりはBourbon・Neat(・Bitters)を前提にしたコンポーネント・パターン集かと。

Bourbon, Neat, Bitters, Refills の基本的な使い方

return to toc

英国Codecourseによる下記のチュートリアル動画が参考になるかと。

このチュートリアルは52分近く、最初の12分30秒程は何か会話しているので分かる人には分かると思うけどゴメンナサイちょっと飛ばして、OSXにてSassのsudoインストール・稼働確認、Bourbonも同様、以下、Neat、Bitters、そして最後にRefillsの実習という順を追ったステップ・バイ・ステップの流れになっている。

各プロダクトの注意点は下記。

  • GithubのBourbonプロジェクトによると、IE8はサポートされていない
  • Sassのインストールが必要
  • Bourbon、Neat、Bittersのインストールは gem install、Refillsは本家サイトのコードをコピペ

次にチュートリアルの注意点は下記。

  • 追加で Normalize.css をローカルにコピーして normalize.scss にリネーム、@import
  • BittersはあくまでScaffoldという位置付けで、bitters install されたScssファイルを直接修正…当初はベンダ提供のソースを直接修正するのに抵抗が…先達の感想としては、「彼らが !default を付けない理由 / Bourbon / Neat / Bitters | Workabroad.jp
  • このチュートリアル発表時点(2014年5月)と自分が写経した時点での相違点は下記
    • Bittersのディレクトリ展開?が bitters/bitters から base/base に変更されている7
    • Refills本家サイト構成が変わったので、タイポグラフィは別ページに移動
    • RefillsのNAVIGATIONはjQueryが必要になった
  • センセいきなり css/ 直下で bourbon install して、css/bourbon/css/0-plugins/ にフォルダ移動させてたけど、特に問題無いのな
  • 今更だけど拡張子sassscssは違うよ(to 自分)

以上を踏まえた上で、例えば、GitHubの elitwin/bourbon_demo がこのチュートリアルに近いカタチかと思う。
お急ぎの方は(これを有難く) git clone して、bourbon_demo/css ディレクトリで sass --watch app.sass:app.css を改めて行うなり、 css/app.sass を追いかけるなり。

で。

このチュートリアルによると、Refillsを使うための最終的なディレクトリ構造は下記。
これらは下記の説明を読むより、チュートリアルを見た方が分り易いと思う。

$PROJECT_HOME
├── css
│   ├── 0-plugins
│   │   ├── base
│   │   ├── bourbon
│   │   ├── neat
│   │   ├── normalize.scss
│   │   └── plugins-dir.sass
│   ├── 1-base
│   │   └── base-dir.sass
│   ├── 2-modules
│   │   ├── modules-dir.sass
│   │   ├── *.sass
│   │   └── *.scss
│   ├── 3-layouts
│   │   ├── home.sass
│   │   └── layouts-dir.sass
│   ├── app.css
│   └── app.sass
├── index.html
└── javascript
    ├── jquery-2.1.4.min.js
    └── refills.js
$PROJECT_HOME/css/0-plugins/
このディレクトリで bourbon installneat installbitters install する事で bourbon/neat/base/ ディレクトリに展開。
2週間後の自分が混乱しそうだけど、gem install bourbon とかではなく、gem install した後の話。
$PROJECT_HOME/css/1-base
同ディレクトリ base-dir.sass は空ファイルなので?になるが、おそらく、「SMACSSを参考にしたCSSコーディング規約 – Qiita」をベースに考えているのだろうかと。
$PROJECT_HOME/css/2-modules/
*.sass*.scss をRefillsのコンポーネント・パターン毎に作成。
modules-dir.sass はそれらを @import
および、チュートリアルでは使用されていないがJavaScriptは $PROJECT_HOME/javascript/refills.js に記述。
$PROJECT_HOME/css/app.sass
このディレクトリで sass --watch app.sass:app.css して、各種Scss/Sassファイルを $PROJECT_HOME/index.html で読むための $PROJECT_HOME/css/app.css にまとめる。

もう少し詳しく $PROJECT_HOME/css/app.sass を見る事にする。8

@import '0-plugins/plugins-dir'
@import '1-base/base-dir'
@import '2-modules/modules-dir'
@import '3-layouts/layouts-dir'

更に掘り進めていく…のもちょっとしんどいので追加で一つだけコメント。
上記で一番最初に @import されている $PROJECT_HOME/css/0-plugins/plugins-dir.sass は下記。

@import 'bourbon/bourbon'
@import 'neat/neat'
@import 'normalize'
@import 'base/base'

上記、normalize.scss は、neat/_neat.scssbase/_base.scss の間で読んでいる。
万事がこのカンジで、自分はここまで @import させて使わないので、まるでC言語の #include を思わず思い出してしまった。

と、これで一応、大体の概略が分かったのではあるが。

2016/02/14 初出
2016/06/30 タイトルを「なんちゃってフロントエンド開発者が、Bourbon, Neat, Bitters, Refills, Proteus – Gulp を触ってみた」より現在のタイトルに変更など
2016/09/01 投稿の大規模リファイン

Menu of this post

  1. 1. thoughtbot四兄弟をお手柔らかにお願いします
  2. 2. Gulpでお手柔らかにお願いします

Footnotes

  1. 1. うーん、みんなどういったデザインを目指してるのだろうか?

  2. 2. へぇ、こんなComposerのPackageがあるのか、とか、何よりも他人の開発環境が見れるのは単純に興味深いし。

  3. 3. 何となく、「A」が「あー」になったりの英語表記をセンセの母国語で読んでいるな、程度しか分からない。

  4. 4. でも、やはり動画内で完結して頂けると有り難いですね。コードがあると安心してチュートリアルを放棄する可能性があるので…

  5. 5. せめてものお礼、という意味で、役に立った動画には、評価ボタンを押したり、日本語→英語→センセの母国語に翻訳したコメントを寄せたりしてますが。

  6. 6. と言うか、Refills本家サイトComponentsページにこの動画のエンベッドがあるという…

  7. 7. 動画のコメントに、これに関してのやり取りがある。

  8. 8. うーん、拡張子を省略しても問題無いけど、どうにも自分はこのテのデフォルトの設定が怖いので(いつ変更されるかされないか…)、略さずに書く事にしている…のは異端なのかなぁ。