急成長しているWebデザイン會社であるSuperCoolは、アートクライアント向けのカスタムWebサイトを作成し、既製のクラフトCMSシステムを使用しています。高速のグラフィックデザインと、比較的厳しいタイポグラフィとアートガイダンスを特徴としています。私たちは過去數(shù)か月間、CSSグリッドに目を向けてきました。私たちは、古い習(xí)慣を新しい構(gòu)文に単純に移植するのではなく、新しいパラダイムと設(shè)計方法を発見できるように、ゆっくりと移行しています。

これまでのところ、レイアウトを追跡するための非常に有用な戦略をいくつか開発しました。名前付きの領(lǐng)域とテンプレートを使用して、非常に巧妙なミキシンをいくつか書きましたが、読みやすいコードを作成するための基本的な規(guī)則をいくつか見つけました。グリッドを使用して単一の主要コンポーネントの完全な生産実裝を段階的に段階的に実裝し、発生するデザインの問題のいくつかを掘り下げ、遭遇する落とし穴を避けるように導(dǎo)くことは非常に価値があると思います。 CSSグリッドは、多くの可能な方法と多くの正しい方法を備えた大規(guī)模な仕様ですが、ある時點であなたはあなたの方法を決定し、それをオンラインにする必要があります。

CSS、SASS、BEMの知識があり、完全に実裝された、アクセス可能なカスタムフレームワーク（50を超えるコンポーネントを使用）のプロトタイピングに興味があることを期待しています。

まず、設(shè)計のさまざまなコーディングタスクを特定して分離し、それらをどのように処理するかを計畫しましょう。

1. フォント：デザイナーはフォントシステムを定義しました。
2. 色：最初に、テーマモデルを構(gòu)築してから、セクションに含めます。
3. コンテンツ：このブロックにはどの要素が含まれていますか？そのバリアントは何ですか？これは、BEM Mixinが出てくる場所です。
4. レイアウト：これは、このブロックにコンテンツを配置する方法です。このステップに直接スキップすることをお勧めします。
5. 契約：これはまさに上記のすべてを書くことを選択した方法です。 CSSには多くの正解がありますので、私たち全員が1つの條約であるルールに同意することが重要です。これは実際に最初にランク付けされるべきですが、この記事のために、最後に要約します。

フォントシステム

ユーティリティクラス（h-text - h1、h-text-バッジなど）を使用して、フォントスタイルを設(shè)定します。プロジェクトには10??0個のフォントスタイルがある場合があります。 Typexを使用して、これらのスタイルをSketchからPatternLabに直接エクスポートします。これはそれ自體が別の投稿であるため、フォントが処理されたと仮定しましょう。コンポーネントパーツにフォントを?qū)毪筏蓼护蟆?/p>

色の使用

テーマにはいくつかの小さなミキシンが追加されているだけなので、理想的にはセクションには多くの色のルールが表示されません。それらをすべて「Mixin and Model」ライブラリの_themer.scssセクションに保存して、Webサイトの設(shè)計システムが守られるようにします。そうすれば、誰かが後でビルドに戻ると、設(shè)計とブランドのルールを説明するための重要な參照セクションがあります。ほぼ同じ市場で多くのWebサイトを構(gòu)築して維持する場合、それぞれに異なるブランド仕様がありますが、あるブランドが別のブランドと混同されていないことを確認(rèn)する必要があります。したがって、フォントと同様に、パーツから色ルールを抽象化します?；镜膜?、 _header.scssファイルでは、実際にレイアウトのみに焦點を當(dāng)てています（可能な限り）。

私たちは常にテーマのためにミックスインを使用することに同意することを考えると、これは要素にそれを含める方法です：

 <code>@include var($property, $value);</code>

次に、この特定のWebサイトで色がどのように機能するかを示すテーマモデルを設(shè)定し、それをコンポーネントに適用します。

 <code>@include theme;</code>

このページタイトルで使用するサンプルテーマモデルは次のとおりです。とても簡単です。

色を黒または白と組み合わせます。私たちは、おそらくイベント（ホバリングなど）または強調(diào)された行動の呼びかけに、コントラストルールに依存し、強調(diào)のためにそれらをひっくり返します。これを達(dá)成するために必要なことはこれであり、今ではこのWebサイトで実際に色がどのように機能するかについてのドキュメントがあります。 UIをデバッグまたは拡張する必要がある場合は、アクセスして確認(rèn)できます。

また、私たちを助けるために継承を準(zhǔn)備したいので、いくつかの有用な慣習(xí)を特定しましょう。

• SVGアイコンの塗りつぶしをパイプライン內(nèi)のCurrentColorに設(shè)定します（ちなみに、CSSのデフォルトサイズはwidth: 1em; height: 1em; font-size: inherit; ）。）。
• ベースにセットアップします<a></a>CurrentColor用。
• 略語を書き、境界を継承（ 1px solidまたは1px solid currentColorなど）。

このトピックモデルを使用すると、任意の數(shù)のトピックを生成したり、ユーティリティクラスとして保存したり、コンポーネント內(nèi)のモディファイアリストをループしたり、ユーザーがCMSのブロックに変數(shù)を直接設(shè)定できるようにすることができます。 IE 11が統(tǒng)計の1％未満を占める場合、変數(shù)を使用することができますが、現(xiàn)在の使用には十分です。

トピックから逸??脫しないようにしましょう。グリッドはどうですか？ ！

コンテンツコンポーネント

グリッドを使用すると、各セクションにあるものを新しい方法で正確に説明できます。これは、各プロジェクトに新しいUIを構(gòu)築するデザインエージェンシーのゲームチェンジャーであり、探求するように、私たちはそれの新しい（そして興味深い）アプリケーションを発見しています。

コンテキストを提供するには、Craft CMSを使用してお客様の各インターフェイスをカスタマイズし、特定のニーズとコンテンツモデルを満たすためにカスタムフィールドを作成します。チケットAPIからイベントを抽出し、そこからエントリを作成できる內(nèi)部ツールがあり、CMSで編集および拡張できます（または完全に作成されます）。顧客は、永続的なページエリアで名前のフィールドを入力または編集することができ、設(shè)計されたブランドブロック全體を各ページを構(gòu)築しているときにレイアウトに追加することもできます。

多くのUIがあります。顧客はコンテンツを大いに制御しており、HTMLを多くの制御しているため、ページに高品質(zhì)のアクセス可能なセマンティックコードがあることを確認(rèn)できます。発見プロセス中にコンテンツモデルを共同で開発し、コンテンツを自由に作成できるようにします。彼らは彼らが望むものを追加し、私たちはそれが機能し、常に正しいように見えることを確認(rèn)します。右よりも良い！素晴らしい。 （ごめんなさい?。篜）

したがって、開発者として、私は競合する優(yōu)先順位を比較検討する必要があります。

• アクセシビリティ、可用性
• ブランディングとグラフィックデザイン
• パフォーマンス
• メンテナンスとコードベースの健康

それらを1つずつ見てみましょう：

アクセシビリティ

アクセス可能で論理的なHTMLが私のお気に入りです。少なくとも、私のプロジェクトは、Lighthouseスコアでグリーンアクセシビリティスコアを取得する必要があります。 （私は冗談です、私はそのおいしい100が欲しいです?。━偿ⅴ靴工去讴`ジは、いくつかのスクリーンリーダー（キーボードタブ、キーボードナビゲーション）、低ビジョンシミュレーター、ダッシュ、音聲アクセス、バイナリスイッチを使用してテストされます。 （私はロボットとケーキでも働いているので、それは私の開発作業(yè)の大部分です。）私は、巨大なクリック可能な電話番號と電子メールアドレスをページに何度も何度も追加しました。私は人々が行きたい場所に手に入れてほしいだけです。

コンテンツをGrid（およびFlexBox）によってどのように並べ替えることができるかを心配していました。いくつかのビルドを行ったので、実際にGridがこの問題を解決するのに役立つと思います。 CSSグリッドでは、レイアウトのためにHTMLを移動する理由はありません。ドキュメント全體を主な関心事としてロジックとして扱う線形シーケンスに戻ることができます。

ブランドとパフォーマンスとメンテナンス

アート會場では、プリントとWebで統(tǒng)一された高標(biāo)準(zhǔn)のグラフィックデザインが必要であり、常に変化する素材（プログラム、マニュアル、チケット、ポスター、マイクロウェブサイトなど）が必要です。ご想像のとおり、優(yōu)先度の処理が必要で、多くの場合、強力な印刷主導(dǎo)のブランドが付屬する高品質(zhì)の大きな畫像がたくさんあります。つまり、約15のカスタムフォント（厚さのバリエーション、ディスプレイフォントなどを含む）と複雑なCSSをページに提供する必要がある場合があります?？赡埭氏蓼旰侠砘丹欷皮い氡匾ⅳ辘蓼埂，F(xiàn)在、約20 kbのナノGzipt CSSを送信していますが、さらに削減することに取り組んでいます。

ただし、PostCSSタスクで削減識別子をFalseに設(shè)定することにより、グリッド領(lǐng)域名の全長を維持します。 DevToolsで利用可能なレイアウト図を使用することは、これらの少量のバイトを保存するよりも便利です。 Sowerby Bridgeの遅延列車でのレポでアクセスせずに、このWebサイトの將來の自己不自由を維持、自己文書化、そしてあなたの將來の自己困惑のために：地図を維持します。

コードヘルス

これらすべての競合するニーズのバランスをとる方法は、テストで修正する必要があるコンテンツを減らし、解決された問題が解決されたままであるように、明確にして合意を作成することです。構(gòu)築されたすべてのコンポーネントをチェックし、常にタイトルから開始し、場所をリンクし、ボタンのトリガーアクション、リストとして配信され、ランドマークタイトルが付いているカウント可能なオブジェクトを確認(rèn)します。ナビゲーションはナビゲーションです。<nav></nav> 、時間です<time></time>、Divスープは朝食です - 基本。

CSSグリッドでは、レイアウトのためにHTMLを移動する理由はありません。レイアウトの変更がCSSで発生し、コンテンツが常に論理的に流れる可能性があります。そして、間隔を作成するためのマージンやパディングは必要ないので、単純に宣言することができます。

 <code>.o-grid .o-grid { width:100%; }</code>

…任意の數(shù)のネストされたグループが同じページグリッドを視覚的に占有するようにするため。 HTMLは、ドキュメントに近いことをより明確に導(dǎo)くことができます。

タイトルとアクションの間に管理することがたくさんあります。私の課題は、これらすべてのコンポーネントのこれらすべてのフィールドを追跡しながら、デザインの仕様を忠実に実行して、それらが移動可能でスキャン可能で、線形化可能で、読みやすく読みやすくなるようにすることです。

驚くほど便利な最初のグリッドミックスを紹介しましょう。

 <code>@mixin template($elements...) { @each $element in $elements { &__#{$element} { grid-area: $element; } } }</code>

このミックスインをどこでも使用することは、次のことを意味します。

1. 各コンポーネントセクションは、可能なすべての要素のリストから開始されます。これは、特にTwiggingが実際にフロントエンドコンポーネントをする場合に非常に便利なドキュメントです。
2. ミックスインは、グリッド領(lǐng)域の割り當(dāng)てを擔(dān)當(dāng)します。
3. 要素とコンポーネント名は、スケッチ、CSS、およびHTMLで一貫しています。レイアウトが失敗するため、矛盾は非常に明白です。私はしっかりしていますが、公正です。
4. BEMの命名は自動的に強制されますが、セクションでは物事を臺無しにしません。

ここで、セクションでは、グリッドテンプレートエリアのみを宣言し、平易な英語の単語を使用して、データベースフィールドにも一致する一連のレイアウトマップを提供します。読みやすい！

このミックスインの使用方法の例は次のとおりです。

このサイトの素晴らしい記事を読んで、リストされているサポートされているプロパティに固執(zhí)した場合、ほとんどの場合、AutoprefixerがIE 11のグリッドを処理する方法を説明するため、內(nèi)部グリッド用の名前付き領(lǐng)域に固執(zhí)することにしました。ブラウザテストでAutoprefixerを適用した非常に便利なデバッグモードを使用してこのテストケースを表示すると、機能していることがわかります。

しかし、trapがあります！インライン要素をブロックとして設(shè)定して、それらが常にIE 11のグリッドユニットとして動作していることを確認(rèn)する必要があります。例のマーカーラインをコメントして、他に何が起こるかを確認(rèn)してください。

痛い！それらの作品に注意してください。 IE 11のいくつかのバージョンはこの修正さえピックアップしないことがわかります。その場合、通常の使用を試みることができます<div>タグ…ため息。<p>たとえば、実際のグリッドが內(nèi)部コンテナに設(shè)定されている場合があるため、 <code>display: gridはこのミックスインに含まれていませんでしたが、グリッドエリアが正しいBEMクラスと一致するようにしたいからです。

それで：

 <code>.c-header{ @include template(title, pretitle, posttitle, producer, venue, credit, quote, nav, infobar, search); }</code>

これらのことをレイアウトしましょう。

レイアウト

このコンポーネントがページレイアウトに簡単にスライドできるようにするためのいくつかの追加のルールを特定しましょう。執(zhí)筆時點では、利用可能なサブグリッドはありません（ただし、あります?。?。このコンポーネントは、オンの親グリッドを知りません。これは、たまたまBEMコンポーネントアプローチとよく一致します。これは、各コンポーネントが継承を制限するためにフラットで分離されているためです。私はここでBEMを支持していません（または私たちが明らかに使用しているBemish ） - 私はただあなたがすでにそれを使用しているなら、それは追加のボーナスだと言っているだけです。

この例では、デザイナーは、12列のグリッドと20px（1.25REM）間隔を持つページレイアウトをセットアップします。サイト全體にオフセットパーツはありません。私たちのコンポーネントは、12のグリッド列すべてを占めるページエリアです。この移行期間中、このタイプのセットアップグリッドを使用しています。これは、統(tǒng)合する必要があるこのアイデアにまだ基づいている多くのシステムがあるためです。したがって、これはこの條件に基づく規(guī)則です。全幅の領(lǐng)域については、グリッドギャップを削除し、グリッドテンプレートを12の分?jǐn)?shù)単位（FR）に書き込みます。

そうすることは、

1. この內(nèi)側(cè)のグリッドの光景は、グリッドが存在するグリッドにほぼ従います。
2. コード內(nèi)の基礎(chǔ)となる設(shè)計ルールを簡単に表示します。そして
3. 必要に応じて物事を正確に整列するのは簡単です。

アライメントに関するクイックノート

待って...「正確なアライメント」とはどういう意味ですか？それはすでに正確に整合していませんか？

まあ、いいえ。分?jǐn)?shù)単位法はスペースを完全に分割するので、間隔に陥ります。 2つの列が間隔の真ん中にあなたを置きます。 1つの列が2/3で、もう1つの列がその間隔の1/3で分割されます。

ページグリッド間隔の幅を知っているため、アライメントの修正は難しくありません。たとえば、均一なセグメンテーションでは、グリッドギャップを含めることができます。

ただし、他のセグメンテーションではこれを行うことはできません。私たちにできることは、そのギャップをマージンとして追加することです。設(shè)定したボックスサイズが何であれ、マージンは內(nèi)部に追加されます。この例では、間隔を3つの部分に分割する3つの列（2つの名前付きエリアと1つの空きスペース）があります。

これは、これらのマージンを計算する方法です。FRユニットの合計が12であることを確認(rèn)してください。グリッドギャップを親グリッドの列の數(shù)で分割し、次のように掛けます。

nの右マージン乗數(shù)は、nの右側(cè)のFRユニットの合計に等しくなります。 nの左マージンは、nの左側(cè)のFRユニットの合計に等しくなります。

したがって、 grid-template-columnsの値は2fr 3fr 2fr 4fr 1frです。

<code> 2 3 2 4 1 0/10 2/7 5/5 7/1 11/0</code>

頻繁にcalc()を書いていることに気付いた場合は、Mixinとして書くこともできます。たとえば、內(nèi)側(cè)のグリッドを親グリッドに合わせる方法は次のとおりです。

...そして、名前が內(nèi)部で指定されているが、數(shù)字がグリッドの外側(cè)で指定されている場合、マージンを自動的に計算する方法を次に示します。

名前のある列に切り替えたり、追加の固定幅の列を追加したり、行ごとの12の名前の領(lǐng)域を持つすべてのマップを書いたりするなど、他のソリューションを考えることができると思います。これに対処するには多くの方法がありますが、多くの方法が指定された領(lǐng)域の利點を排除すると思います。この領(lǐng)域は、私たちの將來の自己が知っておくべきことを含む読みやすいレイアウト図を私たちに提供します。ドキュメントとしてのコードです。

明確にするために、私が解決するように導(dǎo)いている設(shè)計上の問題は、アラインメントの問題ではありません。グリッドを使用すると、アラインメントは簡単です。問題は、直接的な些細(xì)なレイアウトの問題を解決することではなく、目標(biāo)をサポートする方法でそれを解決することです。つまり、6か月で理解できるようにすることです。

1. コンポーネントに含まれる要素。
2. それらがどのようにレイアウトされるか。
3. この方法でコードが書かれているのはなぜですか。

グリッド仕様は巨大で、オプションで簡単に迷子になる可能性があります。おそらく、より良い計畫は、12列のグリッドにリセットし、絶対アライメントが必要なときに數(shù)値仕様を使用することです（つまり、數(shù)値仕様を使用するページグリッドに明示的にリンクします） - しかし、私は発見するためにより賢く、より単純なソリューションがあると感じています。このWebサイトでは、ページグリッドオブジェクトを作成し、クラスを使用してネストされた內(nèi)部グリッドセルを追加することになりました： .o-page-grid\_\_sidebar 。

どう思いますか？私は間違いなくこれについて別の見解を予見しています。 ？

本當(dāng)のグリッド！

共通のページタイトルを作成するために使用できます。

または、ホームページのバリエーションを作成できます。

それで、私たちのコンテナを超えたヒーローのタイトルはどうですか？確かに！または、コンテナの外でそれを提供することができます：

次は何ですか？完全な幅情報バー（ペースト）と、親グリッドのサイドバーに合わせた內(nèi)部ボタンを備えたテーマイベントタイトル？それは正しい。表示が簡単になるように、親グリッドを含めます。

では、中央アライメントを使用した検索はどうですか？折りたたみ式の列の手法を使用しましょう。

これらすべてのバリエーションを単一のセクションとしてデモンストレーションします。はい、それは地図です！パッケージです！

同意する

うわー、私たちはたくさんカバーします！しかし、このようなシステムがどれほど柔軟で自己文書化されているかを見ることができますよね？

1. フォントは、個別のフォントシステムで処理されます。
2. 色は、単に要素を一時的にシェーディングするのではなく、デザインの基礎(chǔ)となる色のルールを説明するテーマセクションで処理されます。
3. 要素は英語でそれらと呼ばれ、セクションの上部にあるテンプレートミキシンに含まれています。このリストは、小枝またはテンプレートのリファレンスとして含めることができます。
4. 常に正しいHTMLを使用し、ネストはグリッドを壊しません。これは、コンベンションを設(shè)定することにより、任意の數(shù)のネストされたグリッドを同じレイアウトスペースに適用できることを意味します。
5. 正確なアライメントは、名前の仕様ではなく、數(shù)値仕様で行われます（ただし、アライメントには名前の仕様を使用できることに注意してください）。
6. IE 11をサポートします。

また、名前付き領(lǐng)域を使用して構(gòu)築されたコンポーネントの簡単な説明と別の例もあります。この例では、カードは領(lǐng)域ではなく、グリッドに配置されたコンポーネントであるため、12のFR規(guī)則を使用する理由はありません。予想できるメディアオブジェクトセクションは次のとおりです。

 <code>.c-card { &--news { align-content: start; grid-template-areas: "image" "datetime" "title"; } &--search { justify-content: start; grid-template-columns: 1fr 3fr; grid-template-areas: "image page" "image title" "image summary"; } &--merchandise { grid-gap: 0; grid-template-columns: $b 1fr 1fr $b; grid-template-areas: "image image image image" ". title title ." ". summary summary ." ". price action ."; } &--donations { // donations thanks button is too long and must take up more space than input grid-gap: 0; grid-template-columns: $b 1fr 2fr $b; grid-template-areas: "image image image image" ". title title ." ". summary summary ." ". input action ."; } } // ...</code>