良い時間です。 この記事では、Webページを作成するためのマテリアルデザインフレームワークについて説明しています。 私だけでなく、マテリアルデザインのトピックに興味がある場合は、Catへようこそ。おそらく、新しくて面白い何かを発見するでしょう。
マテリアルデザインの概要、登場時期、使用場所について簡単に説明します。
マテリアルデザイン-2014年にGoogleによって導入された視覚言語は、モバイルアプリケーションで最もよく使用されます。 マテリアルデザインの使用例は、Chrome OSだけでなく、多くのGoogleモバイルアプリケーション（Play、Music、Booksなど）でも見ることができます。
さらに詳しく知りたい場合は、 Material.ioの Webサイトにアクセスすることをお勧めします。ここでは、この投稿よりもはるかに詳細にすべてを見つけることができます。 投稿のトピック-フレームワークに直接行きましょう。
マテリアライズ
リンク： マテリアライズとGithub
そして、私のリストの最初のものは、興味深い機能のおかげでここに来たマテリアライズです。
最初のコミットは2014年で、実際には、マテリアルデザインがGoogleカンファレンスで発表された同じ年です。
気持が良いことから、JQueryやHummer.jsなどのサードパーティJSライブラリからの独立性を導入したAlpha 1.0が最近リリースされたことに気付くことができます。
冒頭で述べたように、マテリアライズには、Parallaxエフェクト 、Scrollspy、Scrollfire（ページをスクロールするときの要素の外観）など、他と区別できるいくつかの興味深い機能があります。
サイズ：〜194kb
マテリアルデザインライト
リンク ： Material Design LiteおよびGithub
Web用の公式Googleフレームワーク。
Materializeとは異なり、Material Design Liteは他のJSフレームワークから独立しているため、少し簡単になります。
Liteという言葉には理由があります-このフレームワークはマテリアルデザインの主要なコンポーネントのみを提供し、カルーセル、メッシュ、視差効果などはありません。
利点のうち、さまざまな色のテーマがサポートされていることがわかります。
このサイトにはテーマデザイナーがあり、独自のカラーテーマを作成できます。
サイズ：〜27 kb
ムイ
リンク ： MUIとGithub
軽量フレームワークとして位置付けられていますが、AngularとReactを使用していますが、明らかに簡単ではありません。これは、後で説明するBootstrapのテーマを除けば、最も重いと言えます。
フレームワークの大きな重みは、React.jsバージョン16、Angular.jsのサポート、およびメールレターのレイアウト用モジュールの存在によって相殺されます。
このフレームワークを使用して作成されたレターは、GMail、Microsoft Outlook、Apple Mailなどの電子メールボックスを操作するための多くの一般的なプラットフォームでサポートされており、レターが美しくデザインされており、まずは読みやすく、次に使用する場合定期的な郵送で、製品や他の何かに興味を持つことができます。
サイズ：〜61kb
表面
リンク ： SurfaceとGithub
フレームワークは、Javascriptを使用せずに純粋なCSSで記述されています。この事実が、リストされているすべての中で最も簡単なものです。 ところで、フレームワークがたった2週間で書かれたことも興味深いです。
これらすべての事実にもかかわらず、彼はマテリアルデザインの基本的な要素をすべて持っています。
しかし、残念ながら、BowerとNPMのサポートはありません。
フレームワークの著者は、英国のCancer Research Foundationに彼に送られた寄付を求めていることを別に注意したいと思います。
サイズ：〜5.7kb
ブートストラップ素材のテーマ
リンク： ブートストラップマテリアルデザインとGithub
名前が示すように、これは独立したフレームワークではなく、Bootstrapの単なるテーマです。
このテーマがBootstrap用である限り、Bootstrapのすべての機能とMaterial Designのすべての要素があり、Materialスタイルの組み込みアイコンもあります。
サイズ：〜648kb
それとは別に、上記のライブラリはすべて12列のグリッドをサポートしています。
おわりに
simpleのような単純な、または単なる軽量フレームワークが必要な場合、選択するのはおそらくSurfaceまたはMaterial Design Liteです。 完全なターンキーソリューションが必要な場合は、さまざまなスライダーと、たとえばParallaxエフェクトがありますが、ほとんどの場合、Materializeで停止します。 MVCを使用するより複雑なプロジェクトを実行していて、React.jsまたはAngular.jsのサポートが必要な場合は、MUIを確認する必要があります。
私の意見では、特別な注意はBootstrapのテーマに特別な注意を払うに値します。
Bootstrapを使用してサイト全体を記述して
テキストについて苦情がある場合は、コメントでの質問や議論を歓迎します。私はすべてに答えようとします。 記事を読んでくれてありがとう、少なくともそれが何らかの形で役立つことを願っていますが、それはあなたが必要とするフレームワークの選択に役立つでしょう。