BootstrapユーザーがUIkitに乗り換えるべき3つの理由

Pocket

bootstrapユーザーがUIkitに乗り換えるべき3つの理由
数あるCSSフレームワークの中でも特に人気の高いのがBootstrap。最近Bootstrap3にアップデートされ、このサイトでも基本的な使い方Bootstrap3で簡単にWebサイトを作ってみたりしています。

大変使いやすくてBootstrapなしでUIを作るのがめんどくさく感じるくらい重宝しているのですが、Bootstrapをさらに上回るかもしれないフレームワークを発見しました。

それがこのUIkitです。

この記事ではBootstrapからUIkitに乗り換えるべき3つの理由と題してUIkitの素晴らしいと思ったところを紹介していきます。

UIkitに乗り換えるべき3つの理由

最新のUIコンポーネントに対応

コンポーネントはBootstrapでも実装されており、大変便利な機能です。UIkitにはさらに以下のようなコンポーネントが実装されています。

off-canvasはYouTubeやFacebookアプリなどに利用されてるメニュー機能。ボタンを押すと左側にメニューバーが開きます。
Off-canvas
Switcherはボタンを押して表示するものを切り替えたいときなどに使用。Webサイトでも文字サイズの変更などに使えそうです。
Switcher
Scrollspyは画面スクロールでイベントを発生させることができる機能。ランディングページでよく見るオブジェクトのフェードインなどを実装可能。
Scrollspy
UIkitのDropdownはなんと3カラムのビッグメニューに対応。
Dropdown

テーマのカスタムが簡単

UIkitには公式サイトでテーマのカスタマイズが可能です。ここではフォントや配色の設定を細かく指定することができます。作成したテーマはダウンロードしてすぐに使えるのでまさにUIkitを作ってるような感じですね。
theme

アドオンでより高度な機能を追加

UIkitにはさらに高機能なコンポーネントが追加されています。Stickyはナビやサイドバーの追尾機能としてよく使います。その他の機能は通常のWebサイトで使用することはあまりないかもしれませんが、アプリ開発時には有用なアドオンが揃っていますね。

  • Markdown area:ブラウザ上でマークアップできる機能
  • Sortable:ドラッグ&ドロップでオブジェクトのソートができる機能
  • Datepicker:カレンダーから日付を選択
  • Timepicker:キーボード操作で簡単に時刻変更
  • Sticky:スクロールで追尾する機能
  • Notify:警告文や操作の完了を知らせてくれる機能
  • Form password:フォームパスワードの見える化
  • Form file:アップロードするファイルの選択

このようにBootstrapにはない魅力的な要素がたくさんあります。Bootstrapでも今後のアップデートで実装されるかもしれませんが、現在のところこのフレームワークがオススメ。このサイトでも次回のリニューアル時にはUIkitとLESSを使ってWordpressのテンプレートを作ってみたいと思っています。

モバイルアプリのフレームワークおまけ

ここまでUIkitを紹介してきましたが、CSSフレームワークというよりもモバイルアプリのフレームワークに近い機能が搭載されています。単にWebサイトのUI設計が簡単になるというだけでなく、アプリを作るのにも向いているってわけですね。

そこでおまけとして、HTML5でアプリ開発する際に使ってみたいモバイルアプリのフレームワークを紹介したいと思います。これらを使ってさくっとアプリを作り、PhoneGapBuilderでスマホアプリ化すればiPhoneやAndroid端末にもインストールできるアプリが作れるのです。

ionic
こちらはフロントエンドデベロッパー向けのアプリケーションフレームワーク。BootstrapやUIkitと同じようなコンポーネントも備えながら、AngularJSというフレームワークに対応。見た目と機能を1つにまとめてみた感じ。
Ionic
total.js
こちらは本格的なサーバーフレームワーク。サイトにあるvideoではたった5分でチャットシステムを作るというやばいデモンストレーションを見ることができます。2014年、間違いなくヒットするフレームワークになるでしょう。
total_js