2016 年 4 月 25 日_html/css_WEB-ITnose-htmlチュートリアル-php.cn

2016 年 4 月 25 日_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:19:55

オリジナル

1070 人が閲覧しました

マテリアルデザインは、Web と携帯電話での会社の製品スタイルを統一するために Google によって開発されました。これは、適切なアニメーション、応答性、色と影の使用などの原則に基づいています。完全なガイドの詳細については、こちら (http://www.google.com/design/spec/material-design/introduction.html) を参照してください。

Google のデザインは主に Android アプリケーションに適用されているように見えますが、素晴らしいものでもあります。 Web およびハイブリッドアプリケーションの機会。ユーザーがマテリアルデザインスタイルの Web プロジェクトをより適切に作成できるようにするために、多くのフレームワークとクラスライブラリが対応するコンポーネントとスタイルを実装しています。おすすめのトップ 15 は次のとおりです

マテリアルデザインライト

マテリアルデザインライトは、Google が公式に提供するフレームワークであり、実装されている標準を知るために最新バージョンを頻繁に更新できます。見た目も素晴らしく、使いやすく、他に依存するものはありません。

Materialize

これは、応答性の高いアプリや Web サイトを構築するためのフロントエンドフレームワークです。特に、Bootstrap のようなフレームワークに慣れている人にとっては、始めるのは非常に簡単です。非常に優れているのは、ユーザーがインポートするコンポーネントを選択できる SASS バージョンです。

マテリアル UI

マテリアル UI は、マテリアルデザインに基づいて設計された React コンポーネントの豊富なセットです。これは、CSS スタイルやアニメーションを含む、非常にうまく実装されたライブラリです。ブラックとライトの 2 つの独立したスタイルから選択できます。

MUI CSS

リストの中で最も軽量なもので、依存関係はなく、すべての CSS と JS を含む 12 kb gzip パッケージのみです。 React サポートが提供されており、SASS ファイルを介してカスタマイズできます。電子メールに適した HTML を作成できるように、MUI には電子メール CSS ライブラリが含まれており、インライン化の使用が可能です。

ポリマー

ポリマーは Google のもう 1 つの製品です。プロジェクト用に高速で再利用可能な Web コンポーネントを構築するためのライブラリ。 Polymer では、使用できる多数の要素 (https://elements.polymer-project.org/) が提供されており、7 つのカテゴリに分類されています。そのうちの 1 つは Paper と呼ばれるもので、すべてマテリアルデザインのコンポーネントです。

Ionic マテリアル

これは、Ionic ハイブリッドモバイルアプリケーションフレームワークの拡張ライブラリです。 Ionic を使用したアプリケーションの開発方法を変更することなく、Ionic の具体化を実現するための新しいスタイルのクラスとメソッドが追加されます。

マテリアルファンデーション

Zurb は、応答性の高い Web サイトやアプリケーションを構築するためのもう 1 つの人気のあるフレームワークです。これは、基本的な要素を迅速に構築できる独立したコンポーネントのセットです。見た目は素晴らしいですが、重要なマテリアルデザインコンポーネントがあまりありません。

Surface

2 週間の個人的な体験 Surface は、JavaScript を使用せずに多くの古典的なマテリアル UI コンポーネントを実装する CSS フレームワークであり、プログラミング言語を必要としません。 CSS ファイルは 1 つだけで、非常に軽量で使いやすいです。

Essence

Essence は、React および React Native に基づく CSS フレームワークです。これにより、開発者は非常に美しい Web およびモバイルインタラクティブアプリケーションを迅速に構築し、スキューモーフィックなデザイン標準を実装できるようになります。 npm を使用してライブラリ全体をインストールすることも、使用するモジュールだけをロードすることもできます。

LumX

Angular.js に似たフレームワークは、スムーズにアニメーション化される CSS および JavaScript コンポーネントを多数提供します。 Lumx のレイアウトとスタイルは Bourbon に基づいており、アニメーションライブラリは人気のある Velocity.js を使用します。これらのフレームワークを統合した後、Lumx はレスポンシブ Web アプリケーションを実装するための多くの機能を実装するツールです。

Bootstrap 用 Paper テーマ

多くの人が、マテリアルデザインをシミュレートする Paper と呼ばれるスタイルを含む、多くのクールな Bootstrap スタイルを Boostwatch に実装しています。すべてのスキューモーフィックデザインコンポーネントを実装しているわけではありませんが、非常に人気のあるアプリケーションを実装するために何も変更する必要がない (スタイルの読み込みを除く) ため、ブートストラップを使用する一部の人にとっては非常に良い選択です。

Bootstrap 用のマテリアルデザイン

Bootstrap 用に別のオプションも作成されます。これは、Google の設計標準を満たすために、いくつかの新しいスタイル、いくつかの JavaScript、およびいくつかの jQuery プラグインを追加する、アクティブにスタイル設定されたフロントエンドフレームワークです。さらに、Github 上のプロジェクトには 14,000 を超えるスターが付いています。

Angular マテリアル

AngularJS は、Web 開発用の非常に人気のあるオープンソースフレームワークです。これは Google のチームによって保守されているため、独自のマテリアルデザインツールキットがあるのも当然です。現時点では Angular 1 のみをサポートしていますが、バージョン 2 のサポートはほぼ完了しています。

マテリアル

マテリアルは、Bootstrap と MDL を完全に統合する UI レイヤーフレームワークと考えることができます。これは Bootstrap に非常に似ており (グリッドと HTML はほぼ同じ)、Card [http: //daemonite.github.io/material/ui-card.html] とポップアップの日付 [http://daemonite.github.io/material/ui-picker.html] の選択。従来のマテリアルデザイン要素のほとんどがここにあります。

Phonon

Phonon はハイブリッドモバイルアプリケーション開発に特化しています。これまでのところ、サイズはわずか 60 kb であり、サードパーティのプラグインに依存せず、非常に軽量な Cordova および PhoneGap アプリケーションを作成するために使用できます。 Phonton の UI コンポーネントは、マテリアルデザインの概念に非常に近いものです。

Framework7

Framework7 はハイブリッドアプリケーションを構築するためのものです。これにより、開発者は、iOS や Android に非常に近い外観と動作をする Web アプリケーションを迅速に構築できます。この効果を実現するために、Apple デバイス用とマテリアルデザインコンポーネントスタイルの 2 つのスタイルが提供されます。

追加ボーナス: マテリアルアイコン

ここでのアイコンセットは、基本的に Web、Android、IOS 上の Google によって使用されます。選択できるアイコンはたくさんあり、リストは常に増え続けています。完全に無料で、Google Fontsなどを使って簡単に実装できます。