ITエンジニア/デザイナ向けにオープンソースを毎日紹介

これだけ色々出てくるとどれを使おうか迷ってしまいますね!

UIkitはHTML5向けのフロントエンドフレームワークです。いわゆるBootstrapやFoundationと同じようにWebインタフェースを手軽に作れるようにしてくれるフレームワークです。Bootstrap臭を嫌う方はチェックしてみてはいかがでしょう。

UIkitのスクリーンショット

今回はとにかくスクリーンショット満載です。隅々まで見て、自分のニーズにマッチしているか確認してください。まずは様々な部品を組み合わせたレイアウト例から。

トップページ風デザイン。
トップページ風デザイン。

画像とテキストの配置。この隙間の空き方がいい感じじゃないかと。
画像とテキストの配置。この隙間の空き方がいい感じじゃないかと。

ポートフォリオ風。
ポートフォリオ風。

マウスオーバーで拡大するための虫眼鏡表示。
マウスオーバーで拡大するための虫眼鏡表示。

モーダルもあります。
モーダルもあります。

ブログ風。
ブログ風。

ドキュメント表示。
ドキュメント表示。

コンタクトやチームメンバーの表示。このレイアウトいいですね!
コンタクトやチームメンバーの表示。このレイアウトいいですね!

フォーム付き。もちろんメンバーにはマウスオーバーも。
フォーム付き。もちろんメンバーにはマウスオーバーも。

ログインウィンドウ風。
ログインウィンドウ風。

さて、ここからは各部品ごとに見ていきます。

リストナビゲーション。
リストナビゲーション。

ヘッダーバー的なナビゲーション。
ヘッダーバー的なナビゲーション。

サブナビゲーション。
サブナビゲーション。

パン屑。
パン屑。

ページネーション。
ページネーション。

タブ。
タブ。

垂直にも並べられます。
垂直にも並べられます。

リスト。
リスト。

定義リストにも対応。
定義リストにも対応。

テーブル。レスポンシブです。
テーブル。レスポンシブです。

様々な種類が用意されています。
様々な種類が用意されています。

フォーム。
フォーム。

横に並べるフォームも可能です。
横に並べるフォームも可能です。

フォーム+アイコンなんて表示も。
フォーム+アイコンなんて表示も。

ボタン。
ボタン。

3つ並べたボタンとか良いですね。
3つ並べたボタンとか良いですね。

ボタン+ドロップダウン。
ボタン+ドロップダウン。

アイコン。
アイコン。

Font Awesome対応です。
Font Awesome対応です。

閉じるボタン。なかなかマニアックです。
閉じるボタン。なかなかマニアックです。

こんな感じに使います。
こんな感じに使います。

バッジ。
バッジ。

アラート。
アラート。

サムネイル表示。
サムネイル表示。

サムネイルの大きさも変更できます。
サムネイルの大きさも変更できます。

オーバーレイ。
オーバーレイ。

コンテンツの上にオーバーレイもできます。
コンテンツの上にオーバーレイもできます。

テキストオーバーレイ対応。
テキストオーバーレイ対応。

プログレスバー。
プログレスバー。

色を変えたりアニメーションもできます。
色を変えたりアニメーションもできます。

シンプルなテキスト。でも色々な種類があります。
シンプルなテキスト。でも色々な種類があります。

テキストの配置も変更できます。
テキストの配置も変更できます。

縦方向の配置も変更できます。これは良いかも!
縦方向の配置も変更できます。これは良いかも!

アニメーション。標準で用意されています。
アニメーション。標準で用意されています。

ドロップダウン。
ドロップダウン。

ドロップダウンを上に出す事もできます。
ドロップダウンを上に出す事もできます。

3列のドロップダウン。Amazonっぽいですね。
3列のドロップダウン。Amazonっぽいですね。

ドロップダウンをタブに配置する事もできます。
ドロップダウンをタブに配置する事もできます。

左からせり出すメニュー。
左からせり出すメニュー。

右からもできます。
右からもできます。

トグル。JavaScriptを意識せず実装できます。
トグル。JavaScriptを意識せず実装できます。

ツールチップ。
ツールチップ。

スクロールを感知して表示きりかえ。
スクロールを感知して表示きりかえ。

スクロールをスムーズにするライブラリもあります。
スクロールをスムーズにするライブラリもあります。

UIkitはボタンが角丸でちょっとBootstrap調ですが、グラデーションがあまりないのでフラットに見えます。デザインとしてはシンプルなのでiOS 7やAndroidで見てもすっきりしているのではないでしょうか。これを見ているだけでも創造性が刺激されますね!

特徴としてはLESSで作られていること、コンポーネント指向であること(実際、各パーツはまとめて使う事も一部だけ取り出す事もできます)、カスタマイズ性の高さ、レスポンシブ対応というのが挙げられています。

UIkitはスタイルシート、JavaScript製のオープンソース・ソフトウェア(MIT License)です。

UIkit

uikit/uikit

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2