プロペラがすごい！よく使うUI要素にあったデザインやアニメーション、レイアウトが簡単に利用できる -Propeller
Post on:2017年2月28日
sponsors
最近見かける美しいデザインや気持ちいいアニメーション、レスポンシブ対応のコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトなど、人気が高いテクニックを効果的に取り入れて制作されたHTMLとCSSベースのフレームワークを紹介します。
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コンポーネントが配置されています。
sponsors
