お、これは良さげ! HTML5のWebフレームワークはたくさん出揃ってきました。その中でどれを選択するかはカスタマイズ性の高さやデザイン性がマッチしているか、自分の手に馴染むかといった基準になるかと思います。 今回は新しく登場したレスポンシブなHTML5フレームワークZimit Frameworkを紹介します。

Zimit Frameworkの使い方

スクリーンショットを多めで紹介します。

タイポグラフィ。クラスをつけたりしないのが良いですね。

コード表示。preまたはcodeタグで行います。

フォーム。多様に揃っています。ほぼ指定なしのままです。

データリストの追加もできます。

ボタン。色合いが独特ですね。

レスポンシブ対応のテーブル。

幅を縮めるとこのような縦の表示になります。

ナビゲーションとメニュー。

パン屑リスト。

ちょっと珍しいツリー表示。

アラート。

モーダル。

通知。フロート表示なのが良いですね。

ツールチップ。

タブ。

アコーディオン。

アイコン画像。

Ligature Symbolsを使っていて、多数のWeb Font系アイコンが使えます。

カルーセル。

プログレスバーやレーティング。

オーディオ。audioタグを使います。

バッヂと動画。

Bootstrapと同じくらいの機能は揃っているのではないでしょうか。Zimit Frameworkは特徴として、

  • 統一されたUI
  • 軽量で使いやすいインタフェース(ミニファイすると84KB)
  • LESSベース
  • レスポンシブ
  • HTML5対応のブラウザであれば幅広くサポート

となっています。

クラス指定が多くない印象なので、プロトタイプに使ってもさくさくと画面が作れて良さそうです。

Zimit FrameworkはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア(MIT License)です。

Zimit Framework: The consistent HTML5 framework FireZenk/zimit