ITエンジニア/デザイナ向けにオープンソースを毎日紹介

どれだけスタイルシートのフレームワークが登場してきても、それでも大抵のWebサイトは独自のスタイルシートで組まれているものです。しかし独自で組むとデザイン漏れが発生し、後付けで設定を追加したり更新が続くと徐々に最初の設計思想から離れていくものです。

そこで使ってみたいのがSkylineです。Skylineはデザインフレームワークという訳ではなく、カスタムスタイルシートフレームワークを構築する差異の出発点として欲しいと考えているライブラリです。

Skylineの使い方

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

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

グリッドのサンプル。
グリッドのサンプル。

ネストされたグリッド。
ネストされたグリッド。

モジュールの例。
モジュールの例。

パネル。
パネル。

サムネイル。
サムネイル。

インデックス。
インデックス。

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

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

Skyline | Evolving CSS Architecture

crushlovely/skyline

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2