[CSS][マークアップ] bourbon x neatのグリッドクラスの利用例(テンプレート)

この記事の対象

• 部分的にグリッドシステムを使用して、プロトタイピングのスピードを上げたい
• デバイスサイズが確定しないモバイルなど、ピクセル単位の調整が不必要である条件にて、アイテムを並べたい。

前提

下記CSSフレームワークを利用する

bourbon (sass framework)

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

neat (grid framework)

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

本題：neatのテンプレート

前述のようにneatはインクルードして使用するので、
自分の付けたい名前で設定することが可能。
イニシャルやプロトタイプでWEBサイトを作る場合、
下記のような設定ファイルをテンプレとしてグリッドシステムを取り入れている。

layout/grid.sass

// 開発環境に応じてインストール後、
// import。インストール方法は割愛。
@import bourbon                                                                                                                                                                                                                               
@import neat                                                                                                                                                                                                                                  

// neatに用意されたmixinを利用し、mixinセットを作成
=grid-base($column-num)
  +outer-container
  &>*
    +span-columns(12/$column-num) //母数は「12」
    +omega($column-num+n)

// 上記mixinを利用して、gridのオートメーション化を実現。
.grid-auto--10column
  +grid-base(10)

.grid-auto--7column
  +grid-base(7)

.grid-auto--5column
  +grid-base(5)

.grid-auto--4column
  +grid-base(4)

.grid-auto--3column
  +grid-base(3)

.grid-auto--2column
  +grid-base(2)

htmlでの使用例

下記のようにつかうと

sample.haml

%ul.grid-auto--3column
  %li
    うんこ
  %li
    うんこ
  %li
    うんこ

うんこが３つ綺麗にならぶ。便利です。

partialも便利。

railsでpartialで使う場合、使用箇所でgrid数を変えたい場合こうするとまた便利。

= render 'shared/grid_partial', col: 4

shared/grid_partial.haml

:ruby
  col = 3 unless defined?(col) #colが空の時のデフォ値を設定しておく。

%ul{ class: "grid-auto--#{col}column" }
  %li
    うんこ
  #(以下略)

任意のうんこを一つのpartialで並べることができる。

なお、この場合、neatの仕様で
grid-auto--#{x}columnのmax-widthが68emとなっている場合があるので、
外したい場合は、max-widthを上書いてやればいい。

追記

なお、neatはグリッドごとのマージンを宜しく計算してくれて便利だが、
マージンを任意のpxなどで固定させようとすると苦心するので、
グリッドのマージンを固定させた厳密なデザインを施す場合の設定は下記参照

neatを使わないマージン固定のグリッドデザイン
http://qiita.com/hanzochang/items/82a2b944c2a6ee6e0d11