プロペラがすごい!よく使うUI要素にあったデザインやアニメーション、レイアウトが簡単に利用できる -Propeller
Post on:2017年2月28日
最近見かける美しいデザインや気持ちいいアニメーション、レスポンシブ対応のコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトなど、人気が高いテクニックを効果的に取り入れて制作されたHTMLとCSSベースのフレームワークを紹介します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022806.png)
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種類から。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-01.png)
文字のサイズはhtmlに指定された「font-size: 16px;」をベースに、remでサイズ指定がされています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-02.png)
Material Designのアイコンが使用されており、class名を与えるだけで簡単に利用できます。サイズ変更もclass名を変更するだけです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-03.png)
紙をメタファにしたMaterial Designには重要なエフェクトです。6種類のシャドウが用意されています。
コンポーネントは21種類に分類されており、その中の一部を紹介します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-04.png)
コンポーネントはBootstrapのシンプルなものとPropeller用にカスタマイズされたもの、その他にさまざまなオプションが用意されており、それぞれのUIコンポーネントのデザイン集としても勉強になります。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-05.png)
Bootstrapのはスタティックに配置するお馴染みのUIですが、Propellerのヤバイ、かっこいい。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-06.png)
サークル状のバッジでもいろいろな配置があるのですね。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-07.png)
べた塗り矩形のボタン、ソリッドのボタン、フラットのボタンなどが用意されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-08.png)
テキストが配置されたシンプルなモーダルをはじめ、リスト・フォーム・メディア、そしてさまざまなサイズが用意されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-09.png)
ドロップダウンはクリックして開くタイプ、ホバーで開くタイプ、開く方向を選べるタイプもあります。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-10.png)
リストもデフォルトのスタイルをはじめ、アイコン、複数行、リンクリストなど、バリエーションが豊富です。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-11.png)
アイテムが水平に配置されたナビゲーション、プロフィール用ドロップダウン付き、検索フォーム付きが用意されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-12.png)
ポップオーバーはクリックで開くタイプとホバーで開くタイプです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-13.png)
シンプルなラインにも豊富なバリエーションがあり、細いライン、ストライプのライン、アニメーションで動くライン、カラーで区分されたラインがあります。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-14.png)
タブも進化していますね。通常のタブでハイライトがアニメーションで移動するタイプ、スクロールで移動できるタブ、ドロップダウン付きのタブなどがあります。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-15.png)
カードの基本的な構成、さまざまな組み合わせが用意されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-16.png)
去年くらいから見かけるようになったアクションボタンです。「+」をタップすると、ずらっとアイテムが表示されます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-17.png)
よく見かけるシンプルなデザインのフォームから、ラインで構成されたフォーム、入力時にラベルが移動するフォームなどが用意されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201701/2017022807-18.png)
管理者用ダッシュボードのデモで、カード型レイアウトにさまざまなUIコンポーネントが配置されています。
sponsors