最近のWebデザインのトレンドはどんどんアプリ風に、複雑になっています。レスポンシブWebデザインによって、画面幅を意識したデザインになり、さらにマテリアルデザインによってユーザのアクションを意識するようになっています。これをすべて実装したサイトのデザインはとても難しいでしょう。 そこで使ってみたいのがPropellerです。管理画面のデザインに特化したレスポンシブ/マテリアルデザインなフレームワークです。

Propellerの使い方

スクリーンショット多めで紹介します。まずはダッシュボード。

リスト。アイコン付きもあります。

タイポグラフィ。

アイコン。

影。

アコーディオン。

アラート。

バッジ。

ボタン。

モーダル。

ドロップダウン。

リスト。

ナビゲーションバー。

ポップオーバー。

プログレスバー。

タブ。

ツールチップ。

カード。

フローティングアクションボタン。

フォーム。

データテーブル。

コンタクトフォーム。

404。

ログイン。

メールのインボックス。

通知。

Propellerでは多くのデザイン、要素が考慮されています。これだけあれば大抵の管理画面は作れるのではないでしょうか。さらにマテリアルデザインなので、デスクトップはもちろんスマートフォンでも便利に使えるでしょう。なお、ベースはBootstrapとなっています。

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

digicorp/propeller: Propeller - Develop more, Code less. Propeller is a front-end responsive framework based on Google’s Material Design Standards & Bootstrap.