あまりにも定番化しているので「とりあえずBootstrapで」というプロジェクトが多いと思いますが、シングルページのようなシンプルな案件ならもっとライトなフレームワークでもいいかもしれません。
フレームワークはプロジェクトの開発時間を大幅に短縮します。Bootstrapなどのフレームワークはとても人気があり、たくさんの機能を提供していますが、プロジェクトにはそこまで必要ない場合があります。この記事では、Spectreという新しいフレームワークに焦点をあてます。Spectreは軽くて、モダン、レスポンシブ、モバイルフレンドリーです。縮小化およびgzip圧縮された状態でのファイルサイズは約6.8キロバイトです。基本的なグリッドシステムのほか、タブ、モーダル、カードなど、有用でさまざまな構成要素もたくさんあります。
記事ではSpectreの概要を説明したあと、使い始めるのに役立つ簡単な解説をします。
インストール
インストールは圧縮されたSpectre.cssファイルを直接ダウンロードするか、npmとBowerを使用します。インストールすると、標準スタイルシートのようにファイルをプロジェクトにインクルードできます。
<link rel="stylesheet" href="link/spectre.min.css" />
また、/srcディレクトリ内のLessファイルを編集するか、spectre.lessファイルから不要なコンポーネントを移動して、独自にカスタマイズしたフレームワークの作成もできます。そのあとGulpを使用してコマンドラインからCSSファイルを作成します。
グリッドシステム
Spectreには、Flexboxベースのレスポンシブで12カラムのグリッドシステムがあります。カラムの幅は、各カラムにつけられたクラス名で決まります。各クラスはcol-で始まり、特定の要素のカラム数がどうあるべきか示す数字が続きます。たとえば、col-12は幅100％の12カラム、col-3は3カラム幅あるいはcol-12の4分の1で幅25％です。デフォルトでは異なるカラム間にギャップがあります。そのギャップは、コンテナにcol-gaplessクラスを追加して折りたためます。Spectreは、Bootstrapのようにビューポートの大きさが変わるときの要素の幅の制御に役立つcol-md-[1-12]、col-sm-[1-12]、col-xs-[1-12]などのクラスを提供しています。
また、特定のビューポートのサイズ上の要素を非表示にするhide-xs、hide-sm、hide-mdなどのクラスも提供します。
ビューポート幅が480px未満の場合、すべてのカラムが単一の行として表示されます。480pxより大きな幅を持つ要素にはcol-xs-クラスが適用されます。同じように、600px以上のビューポート幅にはcol-sm-、800px以上のビューポート幅にはcol-md-*が適用されます。
次のコードスニペットは幅33.333％（col-4）で1カラムを形成し、幅25％（col-3）で2カラム、幅16.66％（col-2）で1カラムを形成します。
<div class="container">
<div class="columns">
<div class="column col-4">
<div class="col-content">col-4</div>
</div>
<div class="column col-3">
<div class="col-content">col-3</div>
</div>
<div class="column col-3">
<div class="col-content">col-3</div>
</div>
<div class="column col-2">
<div class="col-content">col-2</div>
</div>
</div>
</div>
以下のデモでは、基本的なグリッドシステムだけでなくネストしたものも作成しました。デモから分かるとおり、複雑なレイアウトの作成は難しくありません。
基本要素
Spectreには、見出し、段落、blockquote要素などの字体要素のデフォルトスタイルが含まれています。また、フレームワークはアジア言語のフォントにも最適化されています。highlightやleadなどのテキストの一部のセクションを目立たせるクラスがあります。
以下のデモではこれらの機能を一度にすべて説明します。
また、任意の<table>要素にtableクラスを追加できます。その結果フレームワークは、よりクリーンなデフォルトの外観を使用するため、テーブルにパディングやボーダーなどの基本的なスタイリングを適用します。また、テーブルのヘッダー行のスタイルを適切に設定します。table-stripedクラスを使ってテーブルをストライプにし、table-hoverクラスを追加してhoverスタイルを有効にします。
デモでは、Spectreを使用した装飾的でレスポンシブなテーブルの作成がいかに簡単か説明します。
ボタンに使用できるクラスもいくつかあります。ボタンのデフォルトスタイルを使用するにはbtnクラスを追加します。btn-sm、btn-lg、btn-blockクラスを使って、ボタンの大きさを制御できます。btn-blockクラスは全幅のボタンを作成します。複数のボタンをグループ化するには、コンテナにbtn-groupクラスを使用します。
またSpectreには、ラベル、入力フィールド、テキストエリアなどの一般的なフォーム要素にクリーンでスタイリッシュな外観を使うスタイルルールもあります。水平方向のフォームを作成するには、<form>要素にform-horizontalクラスを追加します。そのあとcol-[1-12]クラスのいずれかを使用して子要素の幅を制御できます。ビューポートが少なくとも幅840pxある場合にのみフォームが水平になることに注意してください。フォーム要素のサイズ変更は、input-sm/input-lgクラスまたはselect-sm/select-lgクラスを追加するだけです。
また、入力コンテナにinput-groupクラスを追加することで、入力要素にテキストやボタンも加えられます。添付のテキスト要素にinput-group-addonクラスを追加し、ボタン要素にinput-group-btnクラスを追加してください。
基本的なフォームは、以下のデモで説明します。
ナビゲーション
ナビゲーションは、必要最低限のWebサイトに不可欠なパーツです。これを踏まえて、Spectreは3つのナビゲーションコンポーネント（ナビゲーションバー、垂直メニュー、パンくず）を提供しています。ナビゲーションバーには、ロゴ、ナビゲーションリンク、ボタン、および検索ボックスなどの要素を含められます。デフォルトではnavbarのスタイリングは最小限なので、カスタマイズに労力をかける必要はありません。基本的なナビゲーションバーを作成するマークアップは次のとおりです。
<header class="navbar">
<section class="navbar-section">
<a href="#" class="navbar-brand">SitePoint</a>
</section>
<section class="navbar-section">
<a href="#" class="btn btn-link">HTML5</a>
<a href="#" class="btn btn-link">CSS3</a>
<a href="#" class="btn btn-link">JavaScript</a>
<a href="#" class="btn btn-primary">Sign Up</a>
</section>
</header>
ナビゲーションバーのほかに垂直方向のメニューも作成できます。各コンテナ要素にmenuクラスを追加してください。メニュー内のすべての子要素にmenu-itemクラスを追加できます。フレームワークは、コンポーネントの残りの部分と一致する独自のスタイルを追加するためにこのクラスを使用します。別のメニュー項目は、dividerまたはmenu-headerを使って分離できます。
また、breadcrumbクラスを使用してパンくずメニューの実装もできます。すべての子要素にクラス名breadcrumb-itemをつける必要があります。
このセクションで説明した3つのメニューはすべて、次のデモに示されています。
モーダルとカード
まだ説明していない重要な2つのコンポーネントはモーダルとカードです。この2つはBootstrapの対応と似ています。
モーダル
モーダルは、コンテナ要素にmodalクラスを追加して作成します。コンテナ内では、modal-containerクラスを持つモーダルコンテナのactual要素と、modal-overlayクラスを持つモーダルオーバーレイ要素を追加できます。コンテナ内では、modal-header、modal-header、modal-footerクラスを持つactual要素を追加できます。modal-smクラスを使用してモーダルの大きさを制御できます。次のコードで基本的なモーダルを作成します。
<div class="modal modal-sm active">
<div class="modal-overlay"></div>
<div class="modal-container">
<div class="modal-header">
<button class="btn btn-clear float-right" type="button"></button>
<div class="modal-title">Modal title</div>
</div>
<div class="modal-body">
<div class="content">
<p>This is some text inside the Modal.</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button">Close</button>
</div>
</div>
</div>
デモでは、モーダルの表示後に消える機能を追加しました。activeクラスを追加および削除するだけです。
カード
カードは柔軟で汎用的なコンテンツコンテナです。あらゆるものの格納に使えます。カードはcardクラスを使って作成できます。カード自体は目的によってcard-header、card-content、card-footer、card-imageクラスのある子要素を持てます。一般的なカードのマークアップを表示する基本的なスニペットは次のとおりです。
<div class="card">
<div class="card-image">
<img class="img-responsive" src="img-path/bp.jpg">
</div>
<div class="card-header">
<h2 class="card-title">Heading</h2>
<p class="card-meta">Some Meta Data</p>
</div>
<div class="card-body">
<p>Something related to the image or the heading goes here!</p>
</div>
</div>
幅を制御するにはカードをcol-6やcol-md-8などのクラスでラップします。また必要に応じて、カードの内側にボタンやラベルなどの要素を置けます。デモでは、異なる位置にある画像を持つ2枚のカードを示しています。
追加の要素
「トースト」のようなコンポーネントは、Bootstrapのアラートと似ています。トーストコンポーネントにはテキストやその他のアイコンを含められます。また、必要に応じて閉じるボタンを追加できます。トーストはいろいろな目的に使用できます。それぞれの目的を達するために利用できるクラスがあります。成功のトーストにはtoast-successクラスを使用します。これはトーストを緑色にします。同じようにエラーメッセージ（toast-danger）と一般情報（toast-primary）のクラスもあります。
またSpectreには、バッジ、ラベル、ページネーションなどの一般的なコンポーネントやツールチップもあります。これらのコンポーネントについて詳しくは、公式サイトを参照してください。
さらに、text-left、text-lowercase、float-left、centeredなどの、マイナーなレイアウト調整に役立つユーティリティクラスもあります。ユーティリティクラスfloat-rightは、上のデモのモーダルヘッダーの小さなxボタンに適用されていて、実際の動きを見られます。
もう1つの便利なクラスは、ローディングアニメーションを表示するためにボタンやdiv要素に追加できるloadingです。
最終的な考察
Spectreの良いところは、たくさんのデフォルトスタイルを上書きする必要がないことです。フレームワークは、それ自体がきちんと基準に達している要素に対し、最小限のスタイリングだけを提供します。提供されているコンポーネント数を考えれば、サイズはとても合理的です。Spectreの唯一のデメリットは、すべてのコンポーネントに相互作用を追加するJavaScriptを提供していないことです。モーダルボックスやほかのこのような相互作用を表示したり隠したりするのに独自のコードを記述する必要があることを意味しますが、達成は難しくありません。
（原文：Spectre: A Lightweight CSS Framework）
［翻訳：柴田理恵／編集：Livit］
