[CSS]classの命名など気になるテクニックがいろいろ取り入れられているレスポンシブ対応のフレームワーク -Skyline

Post on:2015年1月21日

sponsors

大規模サイトから個人のポートフォリオやブログまで、さまざまなデザインをサポートするための汎用性に優れたアーキテクチャで設計されたCSSのフレームワーク「Skyline」を紹介します。

Skylineでは気になるCSSのテクニックがたくさん使われています。
classの命名にはBEM、リセットにはnormalize.css、印刷にはHTML5 Boilerplate、コンポーネントのアイデアはBootstrap、そしてSCSSで書かれたオブジェクト指向のCSSです。

「BEM」とは、ブロック（Block）、エレメント（Element）、モディファイア（Modifier）の頭文字をとったもので、各要素を3つのどれかに必ず属するものとして考えます。

例えば、ページにはヘッダ・コンテンツ・フッタのブロックがあり、ヘッダブロックにはロゴ・メニュー・検索のブロックがあり、検索のブロックには入力フィールドとボタンのエレメントがある、という感じです。
詳しくは、下記ページをご覧ください。

HTMLもプロジェクトを始めるのに非常に親切なつくりになっています。
「***」で囲まれた箇所を自分用に直して使います。

index.htmlのコードの一部

Skylineを使ってどんな感じのページが作成できるかのデモはこちら。

Skyline -デモページ
ページを表示した際にヘッダがズームし、コンテンツはベーシックなレイアウトになっています。

ダミー画像、ダミーテキストでつくられたデモもあり、グリッドの例やコンポーネント・エレメントなどがチェックできます。

グリッドはレスポンシブ対応で、ベーシックなものから入れ子、そして二重入れ子のものも用意されています。

モジュールにはページでよく使うエレメントが多数、パネルやサムネイル、特徴などのコンテンツを配置するコールアウト（この名前初めて知った）、モーダルウインドウなどが用意されています。