CMS Geeklog開発周辺覚書

 Thursday, April 18 2024 @ 10:16 PM JST

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

  • Thursday, November 19 2015 @ 04:26 PM JST
  • 投稿者:
  • 表示回数 30,157
Geeklog [h2:CSSフロントエンドフレームワークについて]

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

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

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

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

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

[h2:UIkitに乗り換えたい７つの理由] [h2:１．名前空間（Namespace）が秀逸]

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

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

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

[h2:2. 合理的なhtml記述ができる]

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

[h3: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由来なのかわかりにくいという問題があります。これに対して[tag:UIkit]では次のように記述します。

[h3: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

[tag: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 など多数用意されています。

[h2:3. テキストアイコンも標準提供] テキストアイコンをすぐに組み込めますが、[tag:UIkit]はよりシンプルなタグで記述できます。 [h3:Bootstrap] 
<span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>
[h3:UIkit] 
<i class="uk-icon-hand-o-right"></i>
[h3:UIkitの実例]

詳しくはIcon

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

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

[h3:UIkitの事例]

DEMO

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

[h2:5. スライドショーなど、多様な表現をサポート] スライドショーなど、拡張機能も十分に用意されています。 [h2:6. 軽量] UIkitは軽量なので、他のCSSフロントエンドフレームワークやjQueryプラグインなどと併用しても、速度などで問題を起こしません。 [h2:7. カスタマイザーがわかりやすい] UIkitのカスタマイザーが視覚的で、便利です。 UIkitでは、カラーピッカーでカラーを指定できます。事例も視覚的にわかりやすいのが特徴です。