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

Bootstrapの良いところは使い手(主にエンジニア)の気持ちを理解し、その利用シーンが想定されていることでしょう。こだわったデザインにすることだってできますが、それでは応用がききません。その汎用性と見栄えのバランスを上手に保っています。

今回紹介するResponsive Dashboardもその応用例と言えます。いわゆる管理画面系のダッシュボードですが、AngularJSとjQueryに対応し、カスタマイズして利用するのが容易になっています。

Responsive Dashboardの使い方

こちらがメイン画面です。管理系で良くありがちなウィジェットがたくさんあります。メニューは左側です。
こちらがメイン画面です。管理系で良くありがちなウィジェットがたくさんあります。メニューは左側です。

デスクトップもメニューを折り畳めます。
デスクトップもメニューを折り畳めます。

タブレットサイズになると自動でメニューの文字が折り畳まれます。
タブレットサイズになると自動でメニューの文字が折り畳まれます。

スマホサイズ。カラムが1列になります。
スマホサイズ。カラムが1列になります。

Responsive DashboardはBootstrapをベースに、AngularJSまたはjQueryで使えるようになっています。ウィジェット(.widget)というクラスを用意していて、それで項目をボックスの中に入れるようになっています。様々な情報が載せられますね。

Responsive DashboardはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Dashboard

Ehesp/Responsive-Dashboard

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2