Dev.Wan.Co

skel.jsはレスポンシブなWebサイトを構築する為の軽量(19KB)なフロントエンドフレームワークです。
jQueryなどの他のスクリプトに依存することなくグリッドシステムを利用でき、表示サイズごとのbreakpointの設定も簡単です。
また、reset cssやbox-modelなどの有用なCSSのショートカットも用意されています。

今回はmiddlemanをベースにskel.jsを扱ってみます。
bundlerでrubyプロジェクトの作成を開始します。

bundle init

Gemfileにmiddlemanを追加し、

gem 'middleman'

middlemanをインストール。
そしてmiddlemanプロジェクトを初期化します。

bundle install --path vendor/bundle
bundle exec middleman init .

middleman初期化時にGemfileが上書きされるので、

      update  Gemfile
         run  bundle install from "."
Could not find gem 'ruby18_source_location (>= 0) ruby' in the gems available on this machine.
Run `bundle install` to install missing gems.
      create  .gitignore
      create  config.rb
      create  source/index.html.erb
      create  source/layouts/layout.erb
      create  source/stylesheets
      create  source/stylesheets/all.css
      create  source/stylesheets/normalize.css
      create  source/javascripts
      create  source/javascripts/all.js
      create  source/images
      create  source/images/background.png
      create  source/images/middleman.png

改めて依存関係をインストールします。

bundle

skel.jsをダウンロードし、javascriptディレクトリに配置するだけでインストールは完了です。

今回はcoffee scriptで設定を記述してみます。
javascriptディレクトリにskel.config.coffeeというファイルを作成します。

skel.config.coffee

window._skel_config=
  prefix: "/assets/stylesheets/style"
  resetCSS: true
  boxModel: "border"
  grid:
    gutters: 30
  breakpoints:
    wide:
      range: "1200-"
      containers: 1140
      grid:
        gutters: 50
    narrow:
      range: "641-1199"
      containers: 960
    mobile:
      range: "-640"
      viewportWidth: 640
      containers: "fluid"
      grid:
        collapse: true

breakpointsは任意のブレイクポイントの名前と、それに対してのオプションを指定することが出来ます。
ここではwide, narrow, mobileと3つのブレイクポイントを作り、それぞれに切り替えの条件を指定しています。

prefixはCSSをskel.jsから動的に読み込む場合に指定します。（デフォルトは“style"であり、無効にするにはnullを指定します）
これはbreakpointsと連動していて、たとえばmobile時では/assets/stylesheets/style.cssと/assets/stylesheets/style-mobile.cssが読み込まれます。
もちろん個別のstylesheetsの読み込みを抑制することも可能です。

resetCSSオプションを有効にすることで、skel.jsにビルトインされているReset CSSが自動的に読み込まれます。
他にもnormalizeCSSも用意されています。

boxModelには"border”, “content”, “margin”, “padding"のいずれかを指定できます。

設定ファイルとskel.jsをまとめて読み込むためにall.coffeeを作成し、

all.coffee

#= require 'skel.config'
#= require 'skel.js'

layoutファイルで読み込みます

layout.haml

!!!
%html
  %head
    %meta{:charset => "utf-8"}
    %meta{:name => "viewport", :content => "width=device-width, user-scalable=no"}
    %title= current_page.data.title || "Title"
    = javascript_include_tag  "all"
    %noscript
      = stylesheet_link_tag "skel-noscript.css", "style", "style-wide"
  %body{:class => page_classes}
    .container
      = yield

CSSはskel.jsから動的に読み込みますが、jsが無効化されている場合に備えてnoscriptの中にjsが無効化されている場合に読み込みむCSSを指定します。
グリッドシステムを使う場合には<div class="row">の内部に<div class="4u">などと"数字+u"のクラスを作成するだけで、
カラム数12のグリッドに配置されます。
後は.row, .4uとそのまま用いてもよし、それらのクラスを元に自分でCSS拡張してもよしです。

bootstrapなどを用いると、グリッドシステムの他にボタンをはじめとした様々なパーツをすぐに利用することが出来ます。
プログラマがとりあえず体裁を整えるために使うのは有効ですが、デザインが画一的になってしまう欠点もあります。
しかもbootstrapを元にデザインを変更しようとするのも手間がかかります。

デザインは自前で構築する場合にそのベースとしてレスポンシブルなデザインに対応した軽量フレームワークであるskel.jsを有効に活用できそうです。