最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集 -Refills
Post on:2014年4月16日
ヘッダやフッタ、ナビゲーション、タブ、アコーディオン、カードコンテンツ、モーダル、パンくず、オーバーレイコンテンツなど、最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集を紹介します。

デモでは、さまざまなコンポーネントの動作が確認できます。

ナビゲーション
下に半分見えてるのは、打ち出しコンテンツ
各デモの「Show Code」をクリックすると、コードが表示されます。

ナビゲーションのコードを表示
実装にはベースとしてBourbon、グリッド用にNeat、エレメント用にBittersが必要です。
他にも魅力的なコンポーネントが数多く用意されています。











sponsors