最近のサイトで見かけるかっこいいエレメントがコピペで実装できるコンポーネント集 -Refills

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

サイトのキャプチャ

Refills
Refills -GitHub

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

サイトのキャプチャ

ナビゲーション
下に半分見えてるのは、打ち出しコンテンツ

各デモの「Show Code」をクリックすると、コードが表示されます。

サイトのキャプチャ

ナビゲーションのコードを表示

実装にはベースとしてBourbon、グリッド用にNeat、エレメント用にBittersが必要です。

他にも魅力的なコンポーネントが数多く用意されています。

サイトのキャプチャ

アイコンをビュレットにしたコラム

サイトのキャプチャ

カード型のレイアウト

サイトのキャプチャ

タブコンテンツ

サイトのキャプチャ

ハイライト付きのテーブル

サイトのキャプチャ

フラットなスタイルのグリッド

サイトのキャプチャ

シンプルなグリッドのレイアウト

サイトのキャプチャ

フッタ

サイトのキャプチャ

モーダルウインドウ

サイトのキャプチャ

横からスライドするメニュー

サイトのキャプチャ

バッジやパンくず

サイトのキャプチャ

オーバーレイでキャプションが表示される画像

sponsors

top of page

©2024 coliss