[フロントエンド][Rails] flocss, bourbon, neat, refills, sass, hamlを使ってviewを作成するときの覚書 (随時メモ追加)

RailsなりLotusなりで,sass/hamlでviewを作りこんでいく際のラクチン、テッパンな方法をたんたんと追求していく覚書。viewやマークアップはルールが明確じゃないので、毎回判断基準が悩ましいし、記憶力悪いんで都度都度思い出せん。初期セットアップめんどいし。
あとで楽するための覚書。

(とかく、flocss x bourbon x neat x sassの組み合わせがすごいわかりやすくめちゃんこ快適なので、より纒めて覚書兼テンプレにした)

仕様フレームワーク／構成案

メイン

SASS

http://sass-lang.com/
タイプ数少ないので好き

HAML

http://haml.info/
htmlをらくらくかこう

FLOCSS (CSS設計案)

https://github.com/hiloki/flocss
smacss/bem/mcssなどのcss設計の考え方、ソフトウェアではない）

bourbon (sass framework)

http://bourbon.io/
同じレイヤーにあるのはcompass。
下記の２つのCSSフレームワークの依存関係があるため使用。
若干使い勝手が違う程度で基本はcompassと同じ。
(compassとbourbonを同時に入れると幾つかのmixinが確かコンフリクトする 記憶曖昧)

neat (grid framework)

http://neat.bourbon.io/
グリッドフレームワーク。mixinをincludeして使用する。
includeして使用するため、自分の命名規則／CSS設計に則った使い方が可能。
twitter bootstrapを導入したりすると、フレームワークの命名規則に縛られるので
例外のマークアップが発生してしまい非常にストレスフル。
その点、neatは命名規則を汚さない点が非常に優秀

refills (css pattern framework)

http://refills.bourbon.io/
twitter bootstrapのように提供されているモジュールのパターンのテンプレート集。
neat同様、フレームワーク独自の命名規則を強要しないので例外命名規則を作らない。
ちなみにrailsではrails g refills:listと言った感じで打つとテンプレートの
sass, js, hamlが生成される。それをうまく自分のcssに組み込んで使用する。

サブ

angularjs (javascriptフレームワーク)

angularjsのアクションにフックしてアニメを走らせるng-animateといったモジュールあり。
その時にcssが関わってくるのでこいつに関するトピックもメモする
(reactの際のパターンも書いて行きたい...)

CSSディレクトリわけ

基本はFLOCSSをベースにしながら、いくつかのアレンジを加えている

assets/
  stylesheets/
    foundation/
    layout/
    object/
      component/
      project/
      utility/
    mixin/  *追加している
      component/
      project/
      utility/
      _global.sass
    vendor/ *追加している
    _palette.sass
    _valiables.sass
    application.sass

foundation. layout, objectの概念はflocssの公式を参考に。
https://github.com/hiloki/flocss

独自に追加しているものとしてmixin/,vendor/,
あとpalette.sass, valiable.sassがある。

mininフォルダについて

mixinはフォルダで別途まとめている。

mixin各ファイルごとに上部を書くと、１ファイル内で完結してわかりやすいのだが、
mixinが肥大化すると、上部がmixinだらけになってファイルが非常に読みにくくなるため、concern的な扱いで回避。
objectと同じディレクトリ構造、同じファイル名で、対応を明確にしている。
foundationやlayoutはそこまでmixinが肥大化しないことが多いので、ひとまずはobjectのみをmixinに入れるような使い方を想定している

vendorフォルダについて

外部プラグインなどのcssを保管する場所。
rails直下のvender/stylesheetとは使い方を明確に分けていて、
適宜改造が必要なものを、こちらに格納して使っている。
ex. 各種angular用sass,css

palette.sass

各種色定義変数を格納

valiables.sass

画面幅、mediaqueryによる変化幅など、定数的役割を持つものを格納

application.sass

読み出し順番は以下に設定している

@import bourbon                                                                                                                                                                                                                               
@import neat                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                              
@import foundation/reset                                                                                                                                                                                                                      
                                                                                                                                                                                                                                              
@import palette                                                                                                                                                                                                                               
@import valiables                                                                                                                                                                                                                             
@import mixin/**/*                                                                                                                                                                                                                            
                                                                                                                                                                                                                                              
@import foundation/base                                                                                                                                                                                                                       
@import vendor/**/*                                                                                                                                                                                                                  
@import layout/**/*                                                                                                                                                                                                                           
@import object/**/* 

特に
palette > valiables > mixin
の順番で読み出すことで、変数参照できないのを回避する

foundationの構成要素..

以降の細かいところは随時メモっていきます