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

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

サイトのアニメーション

Skyline
Skyline -GitHub

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

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

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

サイトのキャプチャ

BEM翻訳版

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

コードのキャプチャ

index.htmlのコードの一部

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

デモのキャプチャ

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

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

デモのキャプチャ

Skyline -Exampleページ

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

デモのキャプチャ

Example -グリッド

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

サイトのキャプチャ

Example -モジュール

sponsors

top of page

©2018 coliss