軽量CSSフレームワークPure.cssで異なる単位のグリッドを作成する

2015年11月18日 21:54

Category: devel

概要

最近、Webサイトを構築するときに Pure.css というCSSフレームワークを使用している。 Pure.cssはとても軽いCSSフレームワークで、提供されている機能は少ないが使い勝手がとてもいいので重宝している。

CSSフレームワークを使ったレイアウトの基本はグリッドシステムを使うことだと思うのだが、提供されているグリッドではどうにもならない事態が発生した。 Pure.cssでは任意の単位のグリッドを生成できるプログラム rework-pure-grids を提供してくれているので、これを使って自分の好きなグリッドを生成することにした。

ことの発端

4:3の画像が3枚あるとする。 1つは横長、2つが縦長である。これを、高さを揃えて横に3枚並べたい。

Pure.cssはブラウザの横幅を1として1/5ベースと1/24ベースのグリッドを提供してくれるのだが、上記の要求はこのグリッドでは満たせない。横長の画像の幅をA、縦長の画像の幅をBとすると B = (9A)/16 となるため、1/9ベースのグリッドが欲しくなった。

手順

rework-pure-grids はNode.jsを使用するため、Node.jsを導入する。 Macの場合はHomebrewでnodebrewを導入し、最新安定版を導入すれば良い。

% brew install nodebrew

Homebrewで入れてもPATHが通らないので、 ~/.bashrc などにPATHの設定を追加する。

...
export PATH=$HOME/.nodebrew/current/bin:$PATH
...

つづいてNode.js本体をインストールする。インストール可能なバージョンを確認。

% nodebrew ls-remote

ここで io@ というのが付いていないやつが安定版。だと思う。この記事を書いている現時点での最新版は5.1.0。

% nodebrew install-binary v5.1.0

2015/11/27追記ここから

Failed to create the file などというエラーになることがある。

fetch: http://nodejs.org/dist/v5.1.0/node-v5.1.0-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/pman0214/.nodebrew/src/v5.1.0/node-v5.1.0-darwin-x64.tar.gz: No such file or directory
                                                                           0.0%
 curl: (23) Failed writing body (0 != 2493)

この場合には、今表示されたディレクトリを手動で作成してやればいい。

% mkdir -p /Users/pman0214/.nodebrew/src/v5.1.0

2015/11/27追記ここまで

Node.jsの本家サーバが遅いと時間がかかるかもしれない。

インストールしたバージョンを使う宣言をする。

% nodebrew use v5.1.0

これでNode.jsが使えるようになった。

Node.jsの使い方がイマイチよく分かっていないのだが、とりあえず、 rework-pure-grids の説明にある通り rework と rework-pure-grids をインストールする。

% npm install rework rework-pure-grids

これで node_modules というディレクトリが作成され、その中に rework と rework-pure-grids 、依存するパッケージがインストールされる。

ここまで来たらグリッドを生成するための簡単なプログラムを書く。 rework-pure-grids にある書き方を参考にして、今回は1/9ベースのグリッドを生成するプログラムを書く。ここでは app.js という名前で保存することにする。

var sys = require('sys');
var rework    = require('rework'),
    pureGrids = require('rework-pure-grids');

// Creates a 9ths-based Grid.
var css = rework('').use(pureGrids.units(9, {
    mediaQueries: {
        sm: 'screen and (min-width: 35.5em)',
        md: 'screen and (min-width: 48em)',
        lg: 'screen and (min-width: 64em)',
        xl: 'screen and (min-width: 80em)'
    }
})).toString();

sys.print(css);

これを実行するとグリッド用のCSSが出力されるので、ファイルに保存する。

% node app.js > pure-grid-1-9.css

ちなみに sys を使うのは古いやり方だというWarningが出た。が、新しいやり方は調べていない・・・。

Pure.cssでは、例えば1/5幅の div を作るときに <div class="pure-u-1-5"> などと書く。生成した pure-grid-1-9.css をHTMLファイルで読み込めば、この書き方と同じように <div class="pure-u-1-9"> などと書けるようになる。 CSSファイルを小さくしたいなら tr コマンドで改行とスペースを削除すればいい。