どれだけスタイルシートのフレームワークが登場してきても、それでも大抵のWebサイトは独自のスタイルシートで組まれているものです。しかし独自で組むとデザイン漏れが発生し、後付けで設定を追加したり更新が続くと徐々に最初の設計思想から離れていくものです。 そこで使ってみたいのがSkylineです。Skylineはデザインフレームワークという訳ではなく、カスタムスタイルシートフレームワークを構築する差異の出発点として欲しいと考えているライブラリです。

Skylineの使い方

Skylineは4つの階層に分かれています。ベース、エレメント、レイアウトそしてモジュールです。それぞれ目的に沿って、書き加えていきます。SkylineはOOCSS/SCSSを使って書けるようになっています。

こちらはフォームのサンプル。

グリッドのサンプル。

ネストされたグリッド。

モジュールの例。

パネル。

サムネイル。

インデックス。

HTMLの構造はHTML5に沿って書かれており、モバイルファーストな設計思想になっています。さらにjQueryの組み合わせも可能です。このように予め定義されていることで、自分たちのWebサイト用のスタイルシートフレームワークを作ってみても面白そうです。

SkylineはHTML5/スタイルシート製、MIT Licenseのオープンソース・ソフトウェアです。

Skyline | Evolving CSS Architecture crushlovely/skyline