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

お、これは良さげ!

HTML5のWebフレームワークはたくさん出揃ってきました。その中でどれを選択するかはカスタマイズ性の高さやデザイン性がマッチしているか、自分の手に馴染むかといった基準になるかと思います。

今回は新しく登場したレスポンシブなHTML5フレームワークZimit Frameworkを紹介します。

Zimit Frameworkの使い方

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

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

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

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

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

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

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

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

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

パン屑リスト。
パン屑リスト。

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

アラート。
アラート。

モーダル。
モーダル。

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

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

タブ。
タブ。

アコーディオン。
アコーディオン。

アイコン画像。
アイコン画像。

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

カルーセル。
カルーセル。

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

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

バッヂと動画。
バッヂと動画。

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

  • 統一されたUI

  • 軽量で使いやすいインタフェース(ミニファイすると84KB)

  • LESSベース

  • レスポンシブ

  • HTML5対応のブラウザであれば幅広くサポート

となっています。

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

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

Zimit Framework: The consistent HTML5 framework

FireZenk/zimit

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2