WebのデザインフレームワークというとすぐBootstrapやFoundationなどが挙がります。企業の管理画面などであれば良いのですが、よくあるフレームワークには臭いが感じられてしまうのが難点です。 そこで、という訳ではないですが他のフレームワークを使うことでオリジナリティを出してみてはいかがでしょう。今回は軽量なSpectre.cssを紹介します。

Spectre.cssの使い方

スクリーンショット多めで紹介します。まずはタイポグラフィ。

アジア系（日本含む）フォントのサポートも想定されています。

リスト。

テーブル。

ボタン。

ボタングループ。

フォーム。

インプットグループ。

メディア。

グリッド。

ナビゲーションバー。

何もない時の表示、なんて表示も。

アバター。

チップ。アイコン付きも。

自動補完系の表示例。

ツールチップ。

バッジ。

通知。

メニュー。

パンくず。

タブ。

ページネーション。

モーダル。

カード。

Spectre.cssは軽量、レスポンシブでモバイルフレンドリー、多数の便利なコンポーネントが特徴となっています。近々、レスポンシブなメールテンプレートも提供されるそうです。Spectre.cssはJavaScriptはなく、スタイルシートのみの提供なのでJavaScript側は自由に組み合わせて使えるでしょう。

Spectre.cssはスタイルシート製のオープンソース・ソフトウェア（MIT License）です。

Spectre.css - a lightweight, responsive and modern CSS framework picturepan2/spectre: Spectre.css - a lightweight, responsive and modern CSS framework.