ウェブ制作者のためにメンテナンスと拡張に重点をおいたフロントエンド用の軽量フレームワーク -UIkit
Post on:2013年7月30日
簡単に利用でき、カスタマイズも容易で、ウェブ制作者のためにメンテナンスと拡張に重点をおいたHTML, CSS, JavaScriptで作成されたフロントエンド用の軽量フレームワークを紹介します。
UIkitは現在多くの制作者が利用しているjQuery, normalize.cssをベースに、ウェブページで利用するさまざまなUIエレメントが簡単に実装できます。
また、UIkitではすべてのコンポーネントにテストファイルが提供されており、実際にどのように実装するかどのような見た目になるか確認することができます。
これだけでもページができちゃいそうですw
グリッドをはじめ、さまざまなUIエレメントはコンポーネントで試すことができます。
数多く用意されたコンポーネントから、いくつか紹介します。
Base
Baseでは見出しをはじめ、テキスト系、リスト系、テーブル系など、ベースとなるエレメントが揃っています。オブジェクト指向CSS(OOCSS)ベースで設計されているので、class名も直感的に分かるようになっています。
Panel
レイアウト関連はグリッド、記事、コメントなどがあり、パネル系も充実しています。キャプチャのアイコン付きだけでなく、シンプルなものからカラフルなものまで、デザインの参考としても役立ちます。
Nav
ナビゲーション関連は水平・垂直タイプのベーシックなものから、アコーディオン、ドロップダウン、サブコンテンツ用のナビゲーション、パンくず、ページネーション、タブなどが揃っています。
Table
エレメント関連は、リスト、テーブル、フォームなど実用的な要素がさまざまなスタイルで揃っています。
Badge
小物もさまざまなものが用意されています。まずは、バッジ。カウンタやお知らせなどちょっとした情報を伝えるのに役立ちます。
Overlay
画像のオーバーレイもさまざまなスタイルが用意されています。
ここで紹介したのは本当にごく一部で、コンポーネントはこれらの他にも多種多様なものが揃っています。
sponsors