LoginSignup
20
20

More than 5 years have passed since last update.

@nekoneko-wanwanin株式会社ペライチ

新星Sass/CSSフレームワークNeutronのご紹介

Last updated at Posted at 2015-10-22

はじめに

NeutronというSass/CSSフレームワークを知りました。公式Twitterを見るとできたばかりのようです（2015/10/4が初ツイート）。この先どうなっていくかは分かりませんが、結構面白いフレームワークだと思い機能や使い方などメモしました。せっかくなのでシェアしたいと思います。何かの参考になれば幸いです。

  • 本記事はVersion0.9.1での情報となります（2015/10/22時点での最新バージョン）
  • 頻繁な仕様変更や急な開発中止も考えられますので、ご利用の際はご注意ください。
  • 最新情報および詳細は公式サイトをご覧ください

http://neutroncss.com/
http://neutroncss.com/docs/

※なおフレームワーク自体はSass3.4.18を使用して動作確認しているとのことです

目次

  • Neutron（ニュートロン）とは
  • 機能の概要
    • どういった時に使えそうか
    • どういった時に使え無さそうか
  • 導入の手順
  • 各機能の紹介
  • Columns
  • Media Queries
  • Utilities
  • 終わりに

Neutron（ニュートロン）とは

  • カラムを使ったレイアウト生成に特化したSass用フレームワーク
  • Sass用のmixinをまとめたもので、htmlに依存しない（特定のclassを要求しない）
  • 軽量でメンテナンス性に優れている（らしい）
  • モダンブラウザおよびIE9+に対応 *1
  • 似たようなものではBourbonのNeatが近いかと *2

*1) 正確には:nth-child, :nth-of-type, calc()が動作する環境が必要とのことです
*2) Neatとは違い、特定のフレームワークに依存せずに単独で動作します

機能の概要

大きく分けて3つの機能があります。

  • カラムに関するもの（Columns）
  • メディアクエリに関するもの（Media Queries）
  • その他汎用的なもの（Utilities）

どういった時に使えそうか

すばやく柔軟なカラムの生成がウリなので、それが強く要求される場合に効果的かと思います。

  • とりあえずレイアウトをざっと作成したいとき
  • レイアウトがころころ変わる（変わりそうな）時
    • 仕様が頻繁に変更される
    • メディアクエリでのスタイル変更点がたくさんある

どういった時に使え無さそうか

出力されるcssに少しクセがあるので、もし出力後cssを直接触る必要がある場合は微妙かもしれません。
また「はじめに」でも書きましたが、生まれたてのフレームワークなので、いつ何がどうなるか分かりません（といってもcssなので何とでもなる気はしますが）。

導入の手順

  • 公式サイト（http://neutroncss.com/）よりファイルをダウンロードします
  • 解凍してできた_neutron.scssとmodules/をプロジェクトの適当なフォルダへ格納します
  • 使いたいSassファイル内でフレームワークを読み込みます
style.scss
@import "PROJECT_DIR/neutron";

Bowerにもあるようなので、そこからインストールしても良いかと思います
$ bower install neutroncss
https://libraries.io/bower/neutroncss

注意事項

読み込んだ時点で、以下のようなスタイルが自動的に生成されます。
現時点でこの出力を変更・削除する場合は、_neutron.scssを直接修正する必要があります。

compile.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 ---------*/

特にbodyは上書きすることが多いかもしれません

各機能の紹介

Columns

基本的な使い方

  • カラムの親要素に対して、@include columns(args); と指定します。
  • columnsという名前にはエイリアスが用意されているため、以下名前での呼び出しも可能です。

エイリアスにより他mixinと名前が衝突した場合でも使うことができます。ただしメインの名前であるcolumnsが重複するとダメですが・・・（エイリアス名は重複しても大丈夫という意味）

色々なmixinの呼び出し名.scss
.hoge {
  @include columns(args);
  /* alias */
  @include column(args);
  @include col(args);
  @include float-columns(args);
  @include float-column(args);
  @include float-col(args);
}
  • mixinの引数によって、子要素になるカラムのサイズなどのスタイルが設定されます。
  • 引数を指定しない場合は、デフォルト値が割り振られます。
  • デフォルト値は_neutron.scssの上部で以下のように定義されています。
(デフォルト値の定義)_neutron.scss
$_neutron: (
  layout: (
    column-padding: 4px 8px,
    container-max-width: 960px,
    flush-margin: true,
    flush-padding: false
  ),
  query: (
    mobile-max:   479px,
    phablet-max:  767px,
    tablet-max:   1023px,
    desktop-sml-max:  1199px,
    desktop-mid-max:  1799px
  )
);
  • mixinにつなぐ形で別スタイルを指定することもできます。
  • 引数と同じく、子要素のカラムに適用されます。
mixinに普通のスタイルを組み合わせる.scss
.hoge {
  @include columns(1) {
    display: block;
    // さらにネストさせることも
    .fuga {
      display: none;
    }
  }
}

例えば上記だと以下のように出力されます

コンパイル.css
.hoge {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.hoge:after {
  content: "";
  display: table;
  clear: both;
}
.hoge > *:nth-child(1n+1) {
  width: calc(100%);
  float: left;
  display: block;  /* <- mixin外で設定したもの */
  clear: left;
  margin-left: 0;
  margin-right: 0;
}
.hoge > *:nth-child(1n+1) .fuga {
  display: none;
}

引数の説明

渡せる引数をコードベースで簡単に説明します。
また補足としてソースコードの下に画像イメージを載せています。

サンプル.html
<div class="grid">
  <div class="grid__inner">1. あいうえお</div>
  <div class="grid__inner">2. あいうえお<br >かきくけこ</div>
  <div class="grid__inner">3. あいうえお<br >かきくけこ</div>
  <div class="grid__inner">4. あいうえお<br >かきくけこ</div>
  <div class="grid__inner">5. あいうえお</div>
  <div class="grid__inner">6. あいうえお</div>
</div>
引数の説明.scss
.grid-01 {
  @include columns(
    $columns: (1, 3, 1),
    $container-width: 500px,
    $container-align: left,
    $margin: 10px,
    $flush-margin: false,
    $flush-padding: true,
    $target: ".hoge__block",
    $order: (3, 2, 1)
  );
}

.grid-02 {
  @include columns(
    /**
     * $columns: N or (N, N, N)
     * 1行あたりのカラム数を指定
     * 
     * - 単体もしくは複数の値を指定
     * - 単体指定で、N個のカラムが等間隔となる
     * - 複数指定は、各カラムの横幅の比率が変わる
     * - (1, 3, 1)の場合は、1行に3カラム、中央は左右の3倍の横幅になる
     * - なお$columnsという名前(key)は省略可能
     */
    // $columns: 3,      // イメージ1
    $columns: (1, 3, 1), // イメージ2

    /**
     * $container-width: Npx or N% ...etc
     * カラムを包括する親要素のmax-widthを指定
     */
    $container-width: 600px,

    /**
     * $container-align: left or right, center
     * カラムを包括する親要素の縦の位置を指定
     * 
     * - $container-widthが100%の場合は効果なし
     */
    $container-align: left,

    /**
     * $margin: Npx or N% ...etc
     * カラム周辺のmarginを指定
     * 
     * - 10px, 0, 10px, 0 のようにショートハンドも可能
     * - カラム間の余白は上下・左右の合計値になることに注意
     */
    $margin: 10px,  // カラム間の余白は20px

    /**
     * $flush-margin: true or false
     * 左右の端カラムの端側のmarginを消すかどうか
     * 
     * - デフォルトtrue
     * - falseで左右にも余白ができる
     */
    $flush-margin: false,  // イメージ3

    /**
     * $flush-padding: true or false
     * 左右の端カラムの端側のpaddingを消すかどうか
     * 
     * - デフォルトfalse
     * - falseで左端カラムのpadding-left:0, 右端カラムのpadding-right:0
     */
    $flush-padding: true,  // イメージ4

    /**
     * $target: 'selector' or '.class' or '#id' ...etc
     * カラムと見なす要素を指定
     * 
     * - class, * などを指定する場合は '' が必須
     * - デフォルトは '*' となる
     */
    $target: ".hoge__block",

    /**
     * $order: (N, N, N)
     * カラムの並び順を変更
     * 
     * - $flush-で設定したものは考慮されないことに注意
     */
    $order: (3, 2, 1)  // 右から並ぶ *)イメージ5
  );
}

[イメージ1: $columns: 3]
image1.png

[イメージ2: $columns: (1, 3, 1)]
余白の設定で多少比率が正確でなくなることもあります。
image2.png

[イメージ3: $flush-margin: false]
image3.png

[イメージ4: $flush-padding: true]
分かりやすいよう内側に色付きdivを追加し、幅の比率を変更しています。
image4.png

[イメージ5: 並び順変更]
分かりやすいようカラム毎に色を変えています。

[order()適用前 = order(1, 2, 3)]
image5a.png

[order(3,2,1)後]
image5b.png

引数の単体利用

  • 引数のいくつかは単体で（それ自身をmixinとして）呼び出すことができます。
  • メディアクエリ内など、局所的に使用する場合に便利でしょうか。
columns()とは別に使用する.scss
.hoge {
  @media (query) {
    @include container-width(1000px);
    @include container-align(left);
    @include order($order: (3,2,1));
  }
}

order()に関しては他にも引数を渡すことができます
詳しくはドキュメントを参照ください

Media Queries

  • ブレイクポイントとして、複数メディアの基準値が定義されています。
  • mixinを使うことでメディアクエリでのスタイル変更が簡単にできます。
  • 引数には、mobile, tablet, desktop, などが指定可能です。

詳しくは公式ドキュメントを参照ください
なお値はColumnsのデフォルト値と同様に、_neutron.scssの上部で定義されています

メディアクエリによってスタイルを変更.scss
.hoge {
  @include breakpoint(mobile) {
    display: block;
  }
}

Utilities

  • 現時点では、おまけ程度に以下3つが用意されています。
  • 動作は名前から想像できるかと思います。
便利なmixin.scss
@include hide(mobile);
@include show(desktop);
@include clearfix;

終わりに

レイアウトをがちゃがちゃ変更したい場合には便利に使えそうです。覚えることも少なく、気軽に試してみてもよいかもしれません。

[関連記事]
CSSフレームワークBourbon超速入門
http://qiita.com/nekoneko-wanwan/items/99d4650768c46ae41897

20
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
20
20