1. タイポグラフィ (Typography)

標準の見出しとテキストのスタイリングです。

<h1>H1 見出し</h1>
<h2>H2 見出し</h2>
<h3>H3 見出し</h3>
<p>テキストが入ります。</p>

2. グリッドシステム (Grid System)

.grid-row の中に .span-1 〜 .span-12 の子要素を配置して画面を分割します。画面幅 768px 以下では自動的に全幅（縦並び）になります。

<div class="grid-row">
    <div class="span-6">コンテンツ</div>
    <div class="span-6">コンテンツ</div>
</div>

<div class="grid-row">
    <div class="span-4">コンテンツ</div>
    <div class="span-4">コンテンツ</div>
    <div class="span-4">コンテンツ</div>
</div>

<div class="grid-row">
    <div class="span-3">サイドバー</div>
    <div class="span-9">メインコンテンツ</div>
</div>

3. ボタン (Buttons)

.button クラス、または button タグに対して適用されます。

<a href="#" class="button btn-small">小ボタン</a>
<a href="#" class="button">標準ボタン</a>
<a href="#" class="button btn-large">大ボタン</a>

4. フォーム (Forms)

各種インプット、テキストエリア、セレクタの標準スタイルです。すべて幅100%（width: 100%）で表示されます。

<label>テキスト入力</label>
<input type="text" placeholder="...">

<label>セレクトボックス</label>
<select>
    <option>選択肢1</option>
</select>

<label>テキストエリア</label>
<textarea></textarea>

<label><input type="checkbox"> チェック</label>

5. ユーティリティクラス (Utilities)

HTML側から直接、配置やマージンの微調整を行うための便利クラスです。