Neutronを使った爆速レイアウト

はじめに

この記事は株式会社アイスタイルアドベントカレンダーの9日目の記事です。

@kubotakの5日目の記事はこちら Riot.jsでSPAをつくる

またしてもフロントエンドネタです。
ちなみにこの記事のサブタイトルは～できそうな気がする～
ですので、爆速とか書いてますがあくまでも※個人の感想です。

Neutronについて

http://neutroncss.com/
NeutronはSassで記述するレイアウトフレームワークです。
Sassのmixinをまとめたもので、classを要求しないのが特徴です。
まだ出来たばかり（2015年10月頃）
ブラウザ対応状況は:nth-child, :nth-of-type, calc()が動作する環境とのこと

導入

bowerで配布しているようなのでbowerコマンドから

$ bower install neutroncss

Sassなのでコンパイルできるようにgulpを入れておきます

$ npm i gulp gulp-sass

gulpfile.jsを作成して以下のようにsassのコンパイルを指定

gulpfile.js

/**************************************************
 * modules laod
 *************************************************/
var gulp = require('gulp');
var sass = require('gulp-sass');


/**************************************************
 * tasks
 *************************************************/
gulp.task('sass', function() {
    return gulp.src('sass/*.s?ss')
            .pipe(sass({
                outputStyle : 'expanded'
            }))
            .on('error', function (err) {
                console.error('Error', err.message);
            })
            .pipe(gulp.dest("css"));
});

importする

bowerで落としてきたneutronを早速使ってみます。
適当なscssファイルを作成してimportしてみます。

sass/style.scss

@import "ROJECT_DIR/neutroncss/_neutron.scss";

これだけで一旦gulpタスクを実行すると以下の様なcssが出力されます。

css/style.css

/*---------------------------------
           NeutronCSS
---------------------------------*/
html {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html * {
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/*--------- End of NeutronCSS ---------*/

この出力を変更・削除する場合は直接_neutron.scssを変更してください。

TwitterBootstrapと比較

みなさんよく使われているTwitterBootstrapと比較してみます。
Webサイズ(768px以上)では2カラム
Tablet(768px以下)サイズから1カラムになるように書いてみます。

まずTwitterBootstrapから

bootstrap

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-6">
            <h1>Hello</h1>
        </div>
        <div class="col-xs-12 col-md-6">
            <h1>World</h1>
        </div>
    </div>
</div>

当たり前ですがクラス名がすごいことになりますね。
続いてNeutron

style.scss

@import "neutroncss/_neutron.scss";

section {
    @include columns(1);
    @include breakpoint(from-tablet) {
        @include columns(2);
    }
}

index.html

<section>
    <div>
        <h1>Hello</h1>
    </div>
    <div>
        <h1>World</h1>
    </div>
</section>

たったこれだけ。（某CM風）
クラス指定が不要です。
出力されたCSSは以下の様になっています。

style.css

section {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

section:after {
  content: "";
  display: table;
  clear: both;
}

section > *:nth-child(1n+1) {
  width: calc(100%);
  float: left;
  clear: left;
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 768px) {
  section {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  section:after {
    content: "";
    display: table;
    clear: both;
  }
  section > *:nth-child(2n+1) {
    width: calc(50%);
    float: left;
    clear: left;
    margin-left: 0;
  }
  section > *:nth-child(2n+2) {
    width: calc(50%);
    float: left;
    clear: none;
    margin-right: 0;
  }
}

要素だけで指定するとどこかで破綻しそうなのでIDで管理する場合は以下のようにすれば大丈夫

style.scss

#layout {
    @include columns(1);
    @include breakpoint(from-tablet) {
        @include columns(2);
    }
}

MediaQueryのBreakPointも以下が用意されてます

@include breakpoint(mobile)            // max width: 479px
@include breakpoint(phablet)           // min-width: 480px and max-width: 767px
@include breakpoint(from-phablet)      // min-width: 480px
@include breakpoint(tablet)            // min-width: 768px and max-width: 1023px
@include breakpoint(from-tablet)       // min-width: 768px
@include breakpoint(desktop-sml)       // min-width: 769px and max-width: 1199px
@include breakpoint(from-desktop-sml)  // min-width: 769px
@include breakpoint(desktop-mid)       // min-width: 1200px and max-width: 1799px
@include breakpoint(from-desktop-mid)  // min-width: 1200px
@include breakpoint(desktop-lrg)       // min-width: 1800px
@include breakpoint(from-desktop-lrg)  // min-width: 1800px
@include breakpoint(desktop)           // min-width: 769px
@include breakpoint(from-desktop)      // min-width: 769px

desktop-lrg & from-desktop-lrg,desktop & from-desktop これは同じ値なのですが将来的に変わるのでしょうか・・・(ﾟＡﾟ;)ｺﾞｸﾘ

その他公式に記載されていますが、カラムの順序入れ替えやcontainerのサイズ変更、
@include show(), @include hide()あたりも便利そうですね。

所感

TwitterBootstrapと違い、装飾のスタイルはありませんがレイアウト用として非常に使いやすい印象です。
現在(2015/12/6)ではバージョンが0.9.1とメジャーバージョンではないみたいなのでもう少し様子見が必要な感じがしますが、追ってみたいフレームワークだなと感じました。

明日は@ytakeさんです。