マテリアライズ - マテリアルデザインCSSフレームワーク

グーグル 材料設計 Web上でもモバイルアプリ上でもうまく機能することを目的としています。それは開発者に人気が高まっており、あなたもそれを採用したいのであれば、あなたのサイトにMaterial Designを実装する多くの方法があります。 PolymerまたはAngularを使用することも、Materialiseを使用することもできます。.

実体化は Sassサポート付きのマテリアルデザイン原則に基づくCSSフレームワーク より良い開発のために。それは簡単に使用するためのデフォルトのスタイリングを運び、そして詳細なドキュメンテーションを持っています.

ダイアログ、モーダル、日付選択、マテリアルボタン、視差、カードなど、たくさんの便利なコンポーネントを見つけることができます。ドロップダウン、スライドインメニュー、タブなど、選択可能な多くのナビゲーションオプションもあります。マテリアライズも使用 12グリッドシステム 3つのデフォルト画面サイズのメディアクエリを使用：最大幅600ピクセルはモバイルデバイス、992ピクセルのタブレットデバイス、および992ピクセル以上はデスクトップデバイスと見なされます.

入門

Materialiseを使い始めるには2つの方法があります。 標準CSS または Sass. 両方のソースはここからダウンロードできます。次のコマンドを使用して、それらをbowerで入手することもできます。

 バウアーインストール 

ソースを入手したら、それらをプロジェクトファイルに正しくリンクするか、Sassバージョンを使用している場合はソースをコンパイルしてください。.

特徴

このセクションでは、マテリアライズが提供するいくつかの機能について説明します。.

1. Sass Mixin

このフレームワークはSass Mixinを持っています。これはあなたが特定のCSSプロパティを書くとき自動的にすべてのブラウザプレフィックスを追加します。それを確実にしなければならないことは素晴らしい機能です すべてのブラウザにわたる互換性, できるだけ少ない手間とコードで.

以下のアニメーションプロパティを見てください。

 -webkit-animation：0.5秒-moz-animation：0.5秒-o-animation：0.5秒-ms-アニメーション：0.5秒。アニメーション：0.5秒。 

これらのコード行は、Sass mixinの1行で次のように書き直すことができます。

 @include animation（0.5s）; 

についてあります 19のメインミックスイン 利用可能です。完全なリストを見るには、のSassカテゴリに進んでください。 ミキシン タブ.

フローテキスト

他のフロントエンドフレームワークは固定テキストを使用しますが、マテリアライズは本当にレスポンシブなテキストを実装します。読みやすさを維持するために、テキストサイズと行の高さもそれに応じて拡大縮小されます。小さい画面になると、行の高さは大きくなります。.

フローテキストを使用するには、単純に フローテキスト ご希望のテキストをクラスにします。例えば：

 
これはフローテキストです.
 

Flow Textセクションでデモをチェックしてください。.

3.波による波及効果

Material Designにはインタラクティブなフィードバックも付属しています。注目すべき例の1つは波及効果です。マテリアライズでは、この効果はと呼ばれます 波. 基本的に、ユーザーがボタン、カード、その他の要素をクリックまたはタップ/タッチすると、効果が現れます。波を追加することで簡単に作成できます 波効果 あなたの要素へのクラス.

このスニペットはあなたに波効果を与えます.

 提出する 

波紋はデフォルトでは灰色です。しかし、あなたが暗い色の背景を持っている状況では、あなたは色を変えたいと思うかもしれません。別の色を追加するには、単に追加するだけです。 波 - （色） 要素に。 "（色）"を色の名前に置き換えます.

 提出する 

あなたは7色から選ぶことができます： ライト、レッド、イエロー、オレンジ、パープル、グリーン、ティール. それらの色があなたのニーズに合わないならば、あなたはいつでもあなた自身の色を作成またはカスタマイズすることができます.

4.影

要素間の関係を実現するために、材料設計ではサーフェスに標高を使用することをお勧めします。マテリアライズはこの原則に基づいて、 z深さ（数） クラス。シャドウの深さは、（数）を1から5に変更することで決定できます。

 
 
影の深さ3
  
 

すべての影の深さは下の画像で示されています.

5.ボタンとアイコン

材料設計には、主に3つのボタンタイプがあります。 上げられたボタン, fab（フローティングアクションボタン） そして フラットボタン.

（1） 上げられたボタン

上がったボタンがデフォルトのボタンです。このボタンを作成するには、単に BTN あなたの要素にクラス。クリックまたは押されたときにそれに波のような効果を与えたい場合は、次の手順に従ってください。

 ボタン 

あるいは、ボタンのテキストの左側または右側にアイコンを付けることもできます。アイコンの場合は、カスタムを追加する必要があります アイコンクラスの名前と位置でタグを付けます。例えば：

 ダウンロード 

上記のスニペットでは、 MDIファイルファイルのダウンロード ダウンロードアイコンのクラス。についてあります 740の異なるアイコン あなたは使うことができます。アイコンタブのSassページに移動します。.

（2） フローティングボタン

追加することでフローティングボタンを作成できます BTN-フローティング クラスとあなたの希望のアイコン。例えば：

材料設計では、フラットボタンはダイアログボックス内でよく使用されます。それを作成するには、単に追加する BTNフラット あなたの要素にこんな感じで：

 低下 

また、ボタンを使用して無効にすることもできます。 無効 クラスを使用して大きくした btn-large クラス.

6.グリッド

マテリアライズは標準を使用 12列レスポンシブグリッド システム。応答性は3つの部分に分けられます。 モバイル用小、中（m） タブレット用 大きい（l） デスクトップ用.

列を作成するには、サイズを示すためにs、m、またはlを使用し、その後にグリッド番号を続けます。たとえば、モバイルデバイス用に半分のサイズのレイアウトを作成する場合は、 s6 あなたのレイアウトにクラス. s6 を意味する 小6 これは、小型デバイスでは6列です.

あなたも含める必要があります コル 作成したレイアウト内のクラスを 行 クラス。これは、レイアウトを列に正しく配置できるようにするためです。これが一例です。

 
 
ここでは12桁または全角があります
 
4列（3分の1）はこちら
 
4列（3分の1）はこちら
 
4列（3分の1）はこちら
 
 

結果は次のとおりです。

デフォルトで, 列s12 固定サイズで、すべての画面サイズに最適化されています。基本的には同じです。 col s12 m12 l12. あなたが別のデバイスの列のサイズを指定したいのであれば。あなたがする必要があるのはそのように追加サイズをリストすることです：

 
 
私の幅は常にどこにでも12列あります
 
私はモバイルに12列、タブレットに6列、デスクトップに9列を持っています。
 
 

これは次のようになります。

それらはマテリアライズのほんの一部の機能です。それらの他の機能についてもっと学ぶためには、ドキュメンテーションページに進んでください。.