プロペラがすごい!よく使うUI要素にあったデザインやアニメーション、レイアウトが簡単に利用できる -Propeller

最近見かける美しいデザインや気持ちいいアニメーション、レスポンシブ対応のコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトなど、人気が高いテクニックを効果的に取り入れて制作されたHTMLとCSSベースのフレームワークを紹介します。

サイトのキャプチャ

Propeller
Propeller -GitHub

Propellerの特徴

PropellerはMaterial Designのデザインやアニメーション、Bootstrapのモバイルファーストで構築されたレスポンシブ対応のフレームワークです。
MITライセンスで、個人でも商用でも無料で利用できます。

  • 25個のUI要素を含むレスポンシブ対応のコンポーネントのライブラリ
  • 開発プロセスをスピードアップするテンプレート
  • UI要素を段階的に使用する詳細なユーザーマニュアル

対応ブラウザ

  • Firefox, Chrome, Safari Mac
  • IE 9+
  • Android 4.4+, Chrome for Android 44+
  • iOS Safari 7+

Propellerのスタイル・コンポーネント

PropellerでどういうUIコンポーネントが実装できるのか、デモで楽しむことができます。
まずは、スタイルの3種類から。

デモのキャプチャ

タイポグラフィ

文字のサイズはhtmlに指定された「font-size: 16px;」をベースに、remでサイズ指定がされています。

デモのキャプチャ

アイコン

Material Designのアイコンが使用されており、class名を与えるだけで簡単に利用できます。サイズ変更もclass名を変更するだけです。

デモのキャプチャ

シャドウ

紙をメタファにしたMaterial Designには重要なエフェクトです。6種類のシャドウが用意されています。

コンポーネントは21種類に分類されており、その中の一部を紹介します。

デモのキャプチャ

アコーディオン

コンポーネントはBootstrapのシンプルなものとPropeller用にカスタマイズされたもの、その他にさまざまなオプションが用意されており、それぞれのUIコンポーネントのデザイン集としても勉強になります。

デモのキャプチャ

アラート

Bootstrapのはスタティックに配置するお馴染みのUIですが、Propellerのヤバイ、かっこいい。

デモのキャプチャ

バッジ

サークル状のバッジでもいろいろな配置があるのですね。

デモのキャプチャ

ボタン

べた塗り矩形のボタン、ソリッドのボタン、フラットのボタンなどが用意されています。

デモのキャプチャ

モーダル

テキストが配置されたシンプルなモーダルをはじめ、リスト・フォーム・メディア、そしてさまざまなサイズが用意されています。

デモのキャプチャ

ドロップダウン

ドロップダウンはクリックして開くタイプ、ホバーで開くタイプ、開く方向を選べるタイプもあります。

デモのキャプチャ

リスト

リストもデフォルトのスタイルをはじめ、アイコン、複数行、リンクリストなど、バリエーションが豊富です。

デモのキャプチャ

ナビゲーションバー

アイテムが水平に配置されたナビゲーション、プロフィール用ドロップダウン付き、検索フォーム付きが用意されています。

デモのキャプチャ

ポップオーバー

ポップオーバーはクリックで開くタイプとホバーで開くタイプです。

デモのキャプチャ

プログレスバー

シンプルなラインにも豊富なバリエーションがあり、細いライン、ストライプのライン、アニメーションで動くライン、カラーで区分されたラインがあります。

デモのキャプチャ

タブ

タブも進化していますね。通常のタブでハイライトがアニメーションで移動するタイプ、スクロールで移動できるタブ、ドロップダウン付きのタブなどがあります。

デモのキャプチャ

カード

カードの基本的な構成、さまざまな組み合わせが用意されています。

デモのキャプチャ

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

去年くらいから見かけるようになったアクションボタンです。「+」をタップすると、ずらっとアイテムが表示されます。

デモのキャプチャ

フォーム

よく見かけるシンプルなデザインのフォームから、ラインで構成されたフォーム、入力時にラベルが移動するフォームなどが用意されています。

デモのキャプチャ

ダッシュボード

管理者用ダッシュボードのデモで、カード型レイアウトにさまざまなUIコンポーネントが配置されています。

top of page

©2017 coliss