【CSS設計】レスポンシブに最適！SassのMixin集 Bourbon / NEAT がいい感じ。

f:id:sitk:20150522015529g:plain

id:sitkです。

久々にビビビッときましたので、ご紹介。
CSS設計、作業の効率化、共同作業など。
多くのメリットが生み出されそうな、そんな気がしています。

SassのMixin集

Sassをもっと使いこなしたい人に。
まずは、Bourbonのご紹介。
<a href="http://bourbon.io/">Bourbon - A Sass Mixin Library</a>bourbon.io

Sassに慣れてないとちょっとハードルが高いかも。
便利そうだったので、一度見てみてください。

ドキュメントがあります。
詳しく知りたい方は、こちらをどうぞ。
<a href="http://bourbon.io/docs/">Bourbon - Documentation</a>bourbon.io

レイアウト用Mixin集

続いて、NEATのご紹介。
Bourbon Neat

こちらも、Bourbonと同じくMixin集です。
レスポンシブ案件が増えてきたので、フレームワークを利用するのが効率が良いです。

ドキュメントはこちら。
<a href="http://thoughtbot.github.io/neat-docs/latest/">Bourbon Neat Docs</a>thoughtbot.github.io

サンプルもあります。
Bourbon Neat Examples

CSS設計のお供に

フレームワークには、それぞれ長所も短所もあるでしょう。
Bootstrap等のフレームワークと違うのは、HTMLファーストということ。
この考えには、ビビビッと来ましたわ。

つまり、CSS（class指定）ありきの考え方ではないので、余計なclassが増えない。
Sassで管理されてるので、応用が効くし、チーム内でも共通化できる。

詳しくは、こちらの記事を参考に。
<a href="http://qiita.com/zerobase/items/e763dc96b7b398bf8005">CSSフレームワークBourbon/Neat/Bitters/Refillsは美しい - Qiita</a>qiita.com

さいごに

Mac環境だったので、導入がすごーく楽ちんでした。
Macのアプリ、Codekitなら、簡単に導入できます。
<a href="https://incident57.com/codekit/">CodeKit: THE Mac App For Web Developers.</a>incident57.com
<a href="https://incident57.com/codekit/help.html#bourbon">CodeKit: THE Mac App For Web Developers.</a>incident57.com

CSS設計のお供に。

お試しあれー。