どのようにCSSのグリッドとCSSの変数を迅速にプロトタイプアプリケーション

CSSのグリッドとCSSの変数は、フロントエンドの開発者のための両方の巨大な勝利です.後者があなたのスタイルシートに変数の力をもたらす間、前者はウェブサイトレイアウトを作成することを簡単にします.
このチュートリアルでは、私はすぐにプロトタイプアプリケーションのデザインを迅速にそれらを利用する方法を紹介します.
我々は使用する例を直接どのように反応を使用してチャットアプリケーションを構築する上からプルされている.ジェイズアンドザChatkit API :
画像をクリックして、コースを取得します.
それで、あなたが読書の上でインタラクティブなスクリーンキャストを見るのを好むならば、それにおいて、あなたも同様にあなた自身のために実験することができるように、コードへのアクセスを得ます.このチュートリアルに従ってください.

グリッドコンテナの設定

我々のアプリはCSSのグリッド、それを簡単にレイアウトを構築し、その上にシャッフルすることができますモジュールを使用してレイアウトされています.これは、あなたが利用している場合は特に便利ですgrid-template-areas プロパティを指定します.
まず最初に我々の最初のチャットアプリのように見えます:

Chromeでdevツールを開くなら、下にあるグリッドがどのように構築されたかを調べることができます.ご覧の通り、6列6列あります.

このようなグリッドを作成するコードは次のとおりです.

.app {  
  display:                grid;  
  grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;  
  grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;  
}

まず、コンテナをグリッドに設定します.それから、私たちは6つの列が欲しいと言っています、そして、それらの各々が1つの分数単位であるべきです1fr ) 広い.1つの分数単位は、利用可能なスペースの1つの部分を意味する.したがって、ここでは幅を6つの均等に広い分数に分割し、各カラムに1つの割合を与えます.
行に関しては、最後の行がそれらの残りと同じくらい背が高くないので、私たちは等しい高さにそれらのすべてを分割していません.我々は明らかにそれは60px の代わりに1fr 背の高い

grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;

今、我々はグリッドの構造をレイアウトした、我々は次の部分に移動することができます:ポジショニング.

グリッドアイテムの位置決め

グリッドコンテナの各直接の子は、グリッドアイテムです.4つの項目があり、それぞれが以下のイメージの四角形にボックス化されています.

アイテムが上にある位置に置かれるようにするために、私たちはgrid-template-areas StyleEheet内のグリッドを視覚的に表現し、構築する

.app {  
  display:                grid;  
  grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;  
  grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;  
  grid-template-areas:  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "n s s s s s";
}

各文字列は行を表し、各文字はグリッド内のセルを表す.文字は、それらが表現しているグリッド項目(ルームリスト、メッセージリスト、新しいルームフォームとメッセージフォームを送信する)に意味的な関係を持っています.
今私達の項目に従って私達の項目を配置するためにgrid-template-areas 私たちはキャラクターを彼らのように使う必要があるでしょうgrid-area 値.このように:

.new-room-form {  
  grid-area: n;  
}

.rooms-list {  
  grid-area: r;  
}

.message-list {  
  grid-area: m;  
}

.send-message-form {  
  grid-area: s;  
}

These classes have of course also been applied to our grid items in our HTML. However, I won’t go into detail about that, as I’m assuming that you know how to add classes to HTML tags.

これで、レイアウトで実験を開始する準備が整いました.ちょうどいくつかの文字をスワップgrid-template-areas 値は、我々は完全にレイアウトの周りを反転することができます.

上記のGIFでは、ルームリストアイテムと新しいルームフォームアイテムの位置を変えて、4つの異なるレイアウトを試しています.私が変わっている唯一のものはgrid-template-areas プロパティ.
以下の4つのバリエーションです.試してみて、それぞれの対応するレイアウトにマップすることができます:

grid-template-areas:  
    "n m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r s s s s s";

grid-template-areas:  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "n s s s s s";

grid-template-areas:  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "s s s s s n";

grid-template-areas:  
    "m m m m m n"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "s s s s s r";

あなたがコードのあなた自身のコピーを得るならば、あなたが正確にどのようにそれを好むかについて、レイアウトを変えることができるように.

CSS変数による色の変更

今、我々は、CSSの変数を使用してアプリケーションの色を変更するつもりです.以前にCSS変数を公開していない場合は、以下の画像を見てください.


上記のイメージからわかるように、変数名が16進値より意味があるので、これはあなたのコードを読みやすくします.第二に、それはまた、色を変更したい場合により多くの柔軟性を与える.
どのように我々は私たちの変数宣言を開始し、CSSの変数を使用してアプリケーションをスタイルしてみましょう:

:root {  
  --main-color:            #5ea3d0;  
  --secondary-color:       white;  
  --main-text-color:       #3e5869;  
  --secondary-text-color:  #b0c7d6;  
  --new-room-form:         #d9e1e8;  
  --send-message-form:     #F5F5F5;  
}

これらの変数は、スタイルシート全体で17回再利用されます.しかし、それらのすべての場所を通過する代わりに、方法を見ましょう--main-color の両方のメッセージの背景色として使用され、左サイドバークー

以下に、コードでどのように動作するかを示します.

.rooms-list {  
  background: var(--main-color);}

.message-text {  
  background: var(--main-color);  
}

変数の美しさは、我々は今、宣言を変更することができますし、その変更は、アプリケーション全体に影響を与えます.例えば次のようにしましょう.

:root {  
  --main-color: red;  
}

...以下の結果になります.

我々が今できることは、単に:root , したがって、全体の外観を変更し、我々のアプリの感じ.
例えば、素敵なパレットのオンラインを見つけて、単に我々のアプリでそれを使用してみましょう

我々は、我々の角で若干の色を取り替えます:root 上のパレットから

:root {  
  --main-color: #5ea3d0;  
  --secondary-color: white;  
  --main-text-color: #3e5869;  
  --secondary-text-color: #b0c7d6;  
  --new-room-form: #d9e1e8;  
  --send-message-form: #F5F5F5;  
}

これは完全に異なるタイプのチャットを行います.

グリッドと変数の結合

CSSグリッドを使用してレイアウトを変更すると組み合わせる場合、我々はほとんど似ていない2つのユニークなチャットアプリケーションを取得します.そうしましょう


ここで我々の出発点はどのように我々の最終的な例に比べて見える.

:root {  
  --main-color:           #ff66ff;  
  --secondary-color:      #fbd8fb; 
  --main-text-color:      #3e5869;  
  --secondary-text-color: #d8b2ff;  
  --new-room-form:        #ffb2ff;  
  --send-message-form:    #d8b2ff; 
}

.app {  
  display: grid;  
  grid-template-columns: repeat(6, 1fr);  
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;  
  grid-template-areas:  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m n n"  
    "f f f f f f"; 
}

かなりクール、huh?
今私はあなたがそれを取ることをお勧めします、私は反応を使用して、このアプリを作成することをご案内いたします.jsとthe Chatkit API . もちろん、このデザインを自分で実験できるように、完全なコードを共有します.
読書ありがとう!私の名前は一人です、私は共同創設者です、そして、私は人々が新しい技術を学ぶのを援助します.あなたが新しい記事と資源について通知されるならば、私について来てください.