GoogleはMaterial DesignをCSS、HTML、JavaScriptに持ち込む
2152 ワード
Google Material Design Lite(MDL)は、Material Designの感覚をWebサイトに持ち込むことを目的としています.Material Designは視覚言語であり、Androidの標準であり、Googleが提案したプラットフォーム間ソリューションでもある.
Googleによると、MDLは以下の条件を満たしているが、これが「Lite」という名前の由来である.依存性が少ないため、インストールと使用が簡単になります. は他のフレームワークに依存せず、開発者は既存のフロントエンドツールチェーンの に統合することができる.コード量は相対的に大きくない は非常に焦点を合わせ、Material Designの原則を実現し、大きな完全なフレームワークではない である.
次のコードでは、波紋のある突起ボタンを宣言する方法を示します.
MDLは初のMaterial DesignのHTML/CSS/JS実装ではなく、MDLのほかにMaterializeやMaterial Bootstrapなどがある.Googleによると、コミュニティが推進するプロジェクトに比べてMDLの主な利点は、その開発が「Material DesignとChrome UXチームと密接な協力を維持し、定期的な審査を経て規範との互換性を維持している」ことにある.
MDL以前は、PolymerはCSS/JS向けのMaterial Designの標準実装であった.MDLに比べて、Polymerがカバーする範囲は大きく、データ通信コンポーネントおよび非Material Designコンポーネントを含む視覚領域を超えています.
現在、MDLは最適化されておらず、ボタンなどの単一コンポーネントの使用もサポートされていません.開発者が少量のMDLコンポーネントを使用したい場合、不要なコンポーネントを
MDLはBEMの規則に従い,クラス名の一貫性,隔離性,記述性を維持する.Googleはさらに詳しく紹介しています(https://github.com/google/material-design-lite/wiki/Understanding-BEM)BEMをMDLに適用する際のガイドライン.残念なことに、BEMはクラス名の急騰を招き、最初のフィードバックによるとMDLは中招され、簡単なカードに対して17の異なるクラス名が必要であるが、これはMaterial Designの基本的な概念である.
GoogleはMDLがすべての現代ブラウザ(Chrome、Firefox、Opera、Microsoft Edge、Safari)に使用できるとともに、IE 9などのブラウザで優雅なダウングレードを実現できると明らかにした.また、GoogleはCDNを引用してMDLをサイトに含めることを提案していますが、直接ダウンロードしたりnpmやBowerで導入したりすることもできます.
Google Brings Material Design to CSS,HTML,and JavaScript
Googleによると、MDLは以下の条件を満たしているが、これが「Lite」という名前の由来である.
次のコードでは、波紋のある突起ボタンを宣言する方法を示します.
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect"> Button </button>
MDLは初のMaterial DesignのHTML/CSS/JS実装ではなく、MDLのほかにMaterializeやMaterial Bootstrapなどがある.Googleによると、コミュニティが推進するプロジェクトに比べてMDLの主な利点は、その開発が「Material DesignとChrome UXチームと密接な協力を維持し、定期的な審査を経て規範との互換性を維持している」ことにある.
MDL以前は、PolymerはCSS/JS向けのMaterial Designの標準実装であった.MDLに比べて、Polymerがカバーする範囲は大きく、データ通信コンポーネントおよび非Material Designコンポーネントを含む視覚領域を超えています.
現在、MDLは最適化されておらず、ボタンなどの単一コンポーネントの使用もサポートされていません.開発者が少量のMDLコンポーネントを使用したい場合、不要なコンポーネントを
material-design-lite.cssから注釈し、不要なスクリプトをGulpfileから注釈し、gulpを再実行するように、カスタマイズされたMDLを実装することができます.MDLはBEMの規則に従い,クラス名の一貫性,隔離性,記述性を維持する.Googleはさらに詳しく紹介しています(https://github.com/google/material-design-lite/wiki/Understanding-BEM)BEMをMDLに適用する際のガイドライン.残念なことに、BEMはクラス名の急騰を招き、最初のフィードバックによるとMDLは中招され、簡単なカードに対して17の異なるクラス名が必要であるが、これはMaterial Designの基本的な概念である.
GoogleはMDLがすべての現代ブラウザ(Chrome、Firefox、Opera、Microsoft Edge、Safari)に使用できるとともに、IE 9などのブラウザで優雅なダウングレードを実現できると明らかにした.また、GoogleはCDNを引用してMDLをサイトに含めることを提案していますが、直接ダウンロードしたりnpmやBowerで導入したりすることもできます.
Google Brings Material Design to CSS,HTML,and JavaScript