[フロントエンド][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フレームワーク)
https://github.com/angular/angular.js

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

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

```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の構成要素..

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