Neatとは？

CSSフレームワーク「Bourbon」プロジェクトの一つ、グリッドを作るためのパッケージです。Neatは軽量であること、初期導入コストはかかるがhtmlファットになりにくいことで最近注目を浴びています。
Bourbon、Neatの特徴や、インストール方法などはこのへんをご覧ください。

≫Bourbon（公式）
≫Neat（公式）
≫[SLab.]SassのMixinライブラリ『Bourbon』を使ってみよう！シンプルでコンパイルがめっちゃ早いよ！
≫Bourbon NEATで爆速レスポンシブデザイン　ついでにBitters

汎用グリッドとは？

Bootstrapにあるような汎用的に使えるグリッド用クラスです。「それhtmlファットになる原因じゃん！」というツッコミが聞こえてきそうですが、やっぱりあると便利です。

<div class="raw">
    <div class="col span-6">～</div>
    <div class="col span-6">～</div>
</div>

今回の作成目標

Neatのデフォルトはこんな感じになってます。

グリッドが12。
マージンがざっくり1em。
グリッドがグリッド数以上並んだ時、列の最後のマージンは0になる。（この場合は12の倍数個目）

これを下記のように変更したものが今回の目的です。

ブラウザ幅640px以下の時はグリッド数4。それ以上なら24。
マージンは0。

幅640以上ならこんな感じになります。

幅640以下ならこんな感じになります。

さっそく作ってみよう

html


<div class="row">
    <div class="col span-2">span2 A</div>
    <div class="col span-2">span2 B</div>
    <div class="col span-4">span4 C</div>
    <div class="col span-4">span4 D</div>
    <div class="col span-6">span6 E</div>
    <div class="col span-6">span6 F</div>
</div>

まずはBourbonとNeatをimportします。

scss

@charset "UTF-8";

@import "bourbon.4.1.1/bourbon";
@import "neat.1.7.1/neat";
@import "neat.1.7.1/neat-helpers";

マージン幅を0に設定します。
最初は$gutterを設定すればいいと思っていたのですが、さっぱり変更されず、Bourbonのドキュメントにあった$fg-gutterを設定したら反映されました。
Neatのドキュメントにはそんな事書いてないのに……。

scss

$gutter: golden-ratio(0em, 0); /* こっちは設定しなくてもいいみたい */
$fg-gutter: $gutter;

ブラウザ幅のブレークポイントと、グリッド数を設定します。

scss

/* これらの変数は任意の名前です */
$mediaMinWidth: 640px;
$media-large-24: new-breakpoint(min-width ($mediaMinWidth + 1) 24);
$media-mobile-4: new-breakpoint(max-width $mediaMinWidth 4);

行と、large用グリッドの設定をします。
offsetクラスはグリッドセルの前に余白を付けたい時に使います。

scss

.row{
    @include row;
    @include media( $media-large-24 ){
        .span-1{ @include span-columns(1); }
        .span-2{ @include span-columns(2); }
        ～略～
        .span-23{ @include span-columns(23); }
        .span-24{ @include fill-parent(); }

        .offset-1{ @include shift(1); }
        .offset-2{ @include shift(2); }
        ～略～
        .offset-22{ @include shift(22); }
        .offset-23{ @include shift(23); }
    }

続けてmobile用の設定を書いていきます。
4ブロック以上は全て幅一杯に指定しています。

なぜわざわざfloat:leftを記載しているかというと、fill-parent()したセルはfloat:leftが無効になるためです。このままだとグリッド数4の時に、.span-2、.span-4と並ぶと、.span-4のセルが下に潜ってしまうのです。

scss

    @include media( $media-mobile-4 ){
        .span-1{ @include span-columns(1); }
        .span-2{ @include span-columns(2); }
        .span-3{ @include span-columns(3); }
        .span-4,.span-5,.span-6,.span-7,.span-8,.span-9,
        .span-10,.span-12,.span-11,.span-13,.span-14,.span-15,
        .span-16,.span-17,.span-18,.span-19,.span-20,.span-21,
        .span-22,.span-23,.span-24{ 
            float: left; /* セルが下に潜るのを防ぐ */
            @include fill-parent(); 
        }

        .offset-1{ @include shift(1); }
        .offset-2{ @include shift(2); }
        .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, 
        .offset-8, .offset-9, .offset-10, .offset-11, 
        .offset-12, .offset-13, .offset-14, .offset-15, 
        .offset-16, .offset-17, .offset-18, .offset-19, 
        .offset-20, .offset-21, .offset-22, .offset-23{
            @include shift(3);
        }
    }

最後にセル共通の設定を入れます。
omega()で列の最後尾にあたるセル番号を指定します。
これを指定しないと、一番右のセルにもmargin-rightが指定されたままになります。

scss

    .col{
        @include media( $media-large-24 ){
            @include omega(24n);
        }
        @include media( $media-mobile-4 ){
            @include omega(4n);
        }
    }

scss全ソース

scss

@charset "UTF-8";

@import "bourbon.4.1.1/bourbon";
@import "neat.1.7.1/neat";
@import "neat.1.7.1/neat-helpers";

$mediaMinWidth: 640px;
$media-large-24: new-breakpoint(min-width ($mediaMinWidth + 1) 24);
$media-mobile-4: new-breakpoint(max-width $mediaMinWidth 4);

$gutter: golden-ratio(0em, 0); /* こっちは設定しなくてもいいみたい */
$fg-gutter: $gutter;

.row{
    @include row;
    @include media( $media-large-24 ){
        .span-1{ @include span-columns(1); }
        .span-2{ @include span-columns(2); }
        ～略～
        .span-23{ @include span-columns(23); }
        .span-24{ @include fill-parent(); }

        .offset-1{ @include shift(1); }
        .offset-2{ @include shift(2); }
        ～略～
        .offset-22{ @include shift(22); }
        .offset-23{ @include shift(23); }
    }
    @include media( $media-mobile-4 ){
        .span-1{ @include span-columns(1); }
        .span-2{ @include span-columns(2); }
        .span-3{ @include span-columns(3); }
        .span-4,.span-5,.span-6,.span-7,.span-8,.span-9,
        .span-10,.span-12,.span-11,.span-13,.span-14,.span-15,
        .span-16,.span-17,.span-18,.span-19,.span-20,.span-21,
        .span-22,.span-23,.span-24{ 
            float: left;
            @include fill-parent(); 
        }

        .offset-1{ @include shift(1); }
        .offset-2{ @include shift(2); }
        .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, 
        .offset-8, .offset-9, .offset-10, .offset-11, 
        .offset-12, .offset-13, .offset-14, .offset-15, 
        .offset-16, .offset-17, .offset-18, .offset-19, 
        .offset-20, .offset-21, .offset-22, .offset-23{
            @include shift(3);
        }
    }

    .col{
        @include media( $media-large-24 ){
            @include omega(24n);
        }
        @include media( $media-mobile-4 ){
            @include omega(4n);
        }
    }
}

おまけ

セルに余白を付けたい時はどうするんだ！　という時のために、.colクラスの拡張も用意しました。
paddingで指定しています。
mobileの時は無視されます。

scss

.col,
.col-pad,
.col-pad-left,
.col-pad-right{
    @include media( $media-large-24 ){
        @include omega(24n);
    }
    @include media( $media-mobile-4 ){
        @include omega(4n);
    }
}
.col-pad{
    @include media( $media-large-24 ){
        @include pad( 0 2em 0 2em );
    }
}
.col-pad-left{
    @include media( $media-large-24 ){
        @include pad( 0 0 0 2em );
    }
}
.col-pad-right{
    @include media( $media-large-24 ){
        @include pad( 0 2em 0 0 );
    }
}

Bourbon Neatで汎用グリッドの作成

Neatとは？

汎用グリッドとは？

今回の作成目標

さっそく作ってみよう

scss全ソース

おまけ