Propeller - レスポンシブ/マテリアルデザイン対応の管理画面テンプレート
最近のWebデザインのトレンドはどんどんアプリ風に、複雑になっています。レスポンシブWebデザインによって、画面幅を意識したデザインになり、さらにマテリアルデザインによってユーザのアクションを意識するようになっています。これをすべて実装したサイトのデザインはとても難しいでしょう。 そこで使ってみたいのがPropellerです。管理画面のデザインに特化したレスポンシブ/マテリアルデザインなフレームワークです。
Propellerの使い方
スクリーンショット多めで紹介します。まずはダッシュボード。
![]()
リスト。アイコン付きもあります。
![]()
タイポグラフィ。
![]()
アイコン。
![]()
影。
![]()
アコーディオン。
![]()
アラート。
![]()
バッジ。
![]()
ボタン。
![]()
モーダル。
![]()
ドロップダウン。
![]()
リスト。
![]()
ナビゲーションバー。
![]()
ポップオーバー。
![]()
プログレスバー。
![]()
タブ。
![]()
ツールチップ。
![]()
カード。
![]()
フローティングアクションボタン。
![]()
フォーム。
![]()
データテーブル。
![]()
コンタクトフォーム。
![]()
404。
![]()
ログイン。
![]()
メールのインボックス。
![]()
通知。
![]()
Propellerでは多くのデザイン、要素が考慮されています。これだけあれば大抵の管理画面は作れるのではないでしょうか。さらにマテリアルデザインなので、デスクトップはもちろんスマートフォンでも便利に使えるでしょう。なお、ベースはBootstrapとなっています。
PropellerはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。