ウェブ制作者のためにメンテナンスと拡張に重点をおいたフロントエンド用の軽量フレームワーク -UIkit

簡単に利用でき、カスタマイズも容易で、ウェブ制作者のためにメンテナンスと拡張に重点をおいたHTML, CSS, JavaScriptで作成されたフロントエンド用の軽量フレームワークを紹介します。

サイトのキャプチャ

UIkit
UIkit -GitHub

UIkitは現在多くの制作者が利用しているjQuery, normalize.cssをベースに、ウェブページで利用するさまざまなUIエレメントが簡単に実装できます。
また、UIkitではすべてのコンポーネントにテストファイルが提供されており、実際にどのように実装するかどのような見た目になるか確認することができます。

デモのキャプチャ

コンポーネントのテスト

これだけでもページができちゃいそうですw

グリッドをはじめ、さまざまなUIエレメントはコンポーネントで試すことができます。

サイトのキャプチャ

コンポーネント

数多く用意されたコンポーネントから、いくつか紹介します。

デモのキャプチャ

Base
Baseでは見出しをはじめ、テキスト系、リスト系、テーブル系など、ベースとなるエレメントが揃っています。オブジェクト指向CSS(OOCSS)ベースで設計されているので、class名も直感的に分かるようになっています。

デモのキャプチャ

Panel
レイアウト関連はグリッド、記事、コメントなどがあり、パネル系も充実しています。キャプチャのアイコン付きだけでなく、シンプルなものからカラフルなものまで、デザインの参考としても役立ちます。

デモのキャプチャ

Nav
ナビゲーション関連は水平・垂直タイプのベーシックなものから、アコーディオン、ドロップダウン、サブコンテンツ用のナビゲーション、パンくず、ページネーション、タブなどが揃っています。

デモのキャプチャ

Table
エレメント関連は、リスト、テーブル、フォームなど実用的な要素がさまざまなスタイルで揃っています。

デモのキャプチャ

Badge
小物もさまざまなものが用意されています。まずは、バッジ。カウンタやお知らせなどちょっとした情報を伝えるのに役立ちます。

デモのキャプチャ

Overlay
画像のオーバーレイもさまざまなスタイルが用意されています。

ここで紹介したのは本当にごく一部で、コンポーネントはこれらの他にも多種多様なものが揃っています。

top of page

©2017 coliss