BootstrapからUIkitに乗り換えたい7つの理由

Geeklog
投稿者: 表示回数17,588

CSSフロントエンドフレームワークについて

CSSやJavaScriptは、サイトごとに個別に開発するのではなく、フレームワークを開発してそれをすべてのWEBに最初から提供する方式が一般的になりました。WEB開発を高速化、効率化させる力強い味方になるためです。

CSS Front-end Frameworks with comparison
CSS Front-end Frameworks with comparison
CSS Front-end Frameworks with comparisonでは、世界中で使われているCSS フロントエンドフレームワークを比較して紹介しています。
CSS Front-end Frameworks
CSS Front-end Frameworks
フレームワークとして十分な機能を提供しているおもな3つのフレームワーク。
CSS Front-end Frameworks Bootstrap, Foundation, UIkit
CSS Front-end Frameworks Bootstrap, Foundation, UIkit

Bootstrap, Foundation, UIkitはそれぞれ以下のように特徴をアピールしています。

Bootstrap
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
Foundation
Foundation 3 is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself and gives you new tools to quickly customize and build on top of Foundation.
UIkit
UIkit gives you a comprehensive collection of HTML, CSS, and JS components. It can be extended with themes and is easy to customize to create your own look.

CSSフロントエンドフレームワークは、MITなどオープンソースライセンスにて公開、開発が進んでいます。

最も有名なCSSフロントエンドフレームワークは、当初Twitterの開発者が開発したBootstrapです。

Foundationは、レスポンシブウェブデザインの機能を強化するなど、高機能さを売りにしたCSSフロントエンドフレームワークです。

対してUIkitは、軽量かつ高機能。名前空間(Namespace)の設計が秀逸で、すべての機能をバランスよく網羅して、配布サイトのドキュメントがわかりやすいのもポイントです。

UIkitに乗り換えたい7つの理由

1.名前空間(Namespace)が秀逸

UIkitでは、すべてのclass名、Javascript関数名の前置子として、UIkitを表す"uk-"が付いています。

Bootstrapなどフレームワークを追加すると起きがちなコンフリクトの心配をゼロにできることは、開発者の負担を大幅に軽減できます。

覚えやすいネーミングも、開発者のストレスを軽減できます。 styleの属性を覚えている開発者なら、UIkitのネーミングはすぐに覚えられるのではないでしょうか。

2. 合理的なhtml記述ができる

Gridを例に挙げた場合、Bootstrapの場合、以下のように記述します。
4分の1カラムがセンタリングされて表示され、ブラウザを狭めたとき、4分の1の幅のカラムは1カラムになる、レスポンシブウェブデザイン対応です。

Bootstrap

<div class="row row-padded homepage-grid row-bordered p-t text-center">
    <div class="col-sm-4">
    </div>
    <div class="col-sm-4">
    </div>
    <div class="col-sm-4">
    </div>
</div>

このなかのclass名のうち、どれがBootstrap由来なのかわかりにくいという問題があります。これに対してUIkitでは次のように記述します。

UIkit

<div class="uk-grid uk-flex-center">
	<div class="uk-width-medium-1-4">
	</div>
	<div class="uk-width-medium-1-4">
	</div>
	<div class="uk-width-medium-1-4">
	</div>
</div>

詳しくは、Grid, Flex, Dynamic Grid

UIkitの実例

1
2
3

uk-flexは、縦方向をマッチングさせて横並びにするclassです。uk-flex-left uk-flex-center uk-flex-rightなどがあります。uk-width-medium-1-4は、ブラウザがmediaum(768px)以上のブラウザで、幅を1/4にするものです。medium, large, smallなどを選べます。幅は、-1-1 -1-2 -1-3 や、-1-10 -3-10 -2-3 -4-5 など多数用意されています。

3. テキストアイコンも標準提供

テキストアイコンをすぐに組み込めますが、UIkitはよりシンプルなタグで記述できます。

Bootstrap

<span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>

UIkit

<i class="uk-icon-hand-o-right"></i>

UIkitの実例

詳しくはIcon

4. レスポンシブウェブデザインを強力にサポート

UIkitでは、スマホのメニューOffCanvasや、幅に応じて、gridのカラム数や幅を変更したり、Formの水平レイアウトで幅が狭くなったら自動的に縦並びにする、センタリングを左寄せにするなど、レスポンシブウェブデザインの機能を十分に提供しています。

UIkitの事例

DEMO

詳しくは、以下を参照してください。

5. スライドショーなど、多様な表現をサポート

スライドショーなど、拡張機能も十分に用意されています。

6. 軽量

UIkitは軽量なので、他のCSSフロントエンドフレームワークやjQueryプラグインなどと併用しても、速度などで問題を起こしません。

7. カスタマイザーがわかりやすい

UIkitのカスタマイザーが視覚的で、便利です。 UIkitでは、カラーピッカーでカラーを指定できます。事例も視覚的にわかりやすいのが特徴です。