レイアウトアダプティブレイアウトの次のタスクに直面するレイアウトデザイナーには、グリッドが必要です。 ほとんどの場合、古き良きブートストラップが使用され、タイプcol-xs-6 col-sm-4 col-md-3



クラスを持つdivがhtml-keに表示され始めます。 そして、すべてが素晴らしく、速いように見えますが、このアプローチでは、多くの落とし穴がしばしば発生します。 この記事では、これらの落とし穴を検討し、 腐ったトマトを落とし 、トラブルのないネットのための私の技術を検討します。

問題

カスタムメッシュ

そのため、レイアウトデザイナーには時間はほとんどなく、レイアウトはオンになっています。すべてを昨日行う必要があります。 したがって、彼は人気のあるcss-frameworkブートストラップを基本として、作業を開始します。 そして、仕事の途中で、彼は突然「5列に並んだ」バナーのブロックに出くわしました。 ブートストラップを使用したすべての人は、デフォルトのグリッドが12倍であることを知っているため、標準のブートストラップグリッドでは5列を連続して実行することはできません。 はい、もちろん、ブートストラップでは任意のグリッドを収集できますが、今回は依存関係を失い、ダウンロードし、less-kiを収集します（そして、たとえば、sassに書き込みます）。

カスタムグリッド用のライブラリを接続できますか？ 一般的に、これは良い方法です。このアプローチの唯一のマイナス点は、ほとんどすべてが長くて退屈な@media(min-width:){}



書くように設計されているか、 col15-xs-offset-3



束で独自のクラスのセットを生成することcol15-xs-offset-3



おそらく必要ありませんcol15-xs-offset-3



。最終的なcss-kuに分類されます。

そのため、高い確率で、レイアウト設計者はすべてのスタイルを単純に手動で記述します（原則として、そこに記述することはあまりありません）。

独自のブレークポイントセットが必要

非常に多くの場合、標準のブートストラップグリッドには追加のブレークポイントが十分にありません。つまり、xs、sm、md、lgがあります。それらはすべて最大1200ピクセル幅です。 しかし、大きなモニターはどうですか？ 1600pxのブレークポイントxlがいくつかあり、標準セットを要求します。 しかし、これも存在せず、前の段落と同じ解決策が生じます。 しかし、多くのコントロールポイントが存在する可能性があります-320、360、640、768、992、1200、1600、1900 ..

冗長性と冗長性

そして、私たちは次の問題に徐々に近づいています。 各グリッドのブロックサイズを規定する必要があると想像すると、次のようになります。

 <div class="col-xxs-12 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

多すぎますか？ 可能なプル/プッシュと表示/非表示をここに追加すると、安全に夢中になります。 しかし、これらのクラスはすべてcssに登録されています。60倍グリッドのすべての組み合わせに対してcssに登録する必要があるクラスの数を想像してください。

スタイルをマークアップから分離する

タイプセッターは、インラインスタイルが悪いことを知っています。 では、なぜマークアップクラスでスタイルを記述するのでしょうか。 col-xs-6



、 visible-sm



、Godはtext-right



禁止しtext-right



-これらはすべてスタイルであり、既にストレッチされたレイアウトを変更する必要がある場合、レイアウトデザイナーがcol-sm-を変更するようバックエンドに依頼する必要があるという問題が必ずあります。 col-sm-4で6。

重複する不要なスタイル

多くの場合、グリッドといくつかの小さな機能のためにcssフレームワークがすべてプラグインされるため、スタイルが過剰にリセットされ、最終的なcssのサイズが2倍になります。 たとえば、bootstrap.min.css全体が接続されている場合、 .btn, .form-control



などのシャドウと丸みのあるコーナー（ .btn, .form-control



:hover, :focus, :first-child



など）は楽しく、熱心に削除されます。 その結果、フレームワークは助けの代わりに干渉し始めます。 .glyphicon



ような、しばしば不必要な機能は言うまでもありません。 もちろん、必要なものからブートストラップを構築することもできますが、それでも時間です。

外国の標準とコードスタイル

レイアウト設計者がBEMを研究し、それを使い始めたとしましょう。 ただし、ブートストラップを使用する必要があるため、例外が発生します。すべてのクラスは、BEMの原則に従っていないハイフンで記述されています。 そして、ここで選択の問題が発生します-クラス名にミッシュマッシュを我慢するか（ btn-block disabled component__btn component__btn_disabled



）、とにかくブートストラップを投げます。

非推奨のメソッド

ご存知のように、ブートストラップ3のグリッドはフロートに基づいています。 しばしば問題を引き起こすのは、最も頻繁に起こるものの1つが異なるブロックの高さで、その結果として美しいグリッドが「壊れる」ことです。 他の目的でのフロートの使用をやめます。フレックスボックスを使用できないほとんどすべてのブラウザーは既に終了しています。

スージー！ これは抜け道ですか？

上記のすべての問題の解決策を探して 、すばらしいSusyグリッドフレームワークに出会いました！ 全体的に非常に良い。 しかし、私は十分な速度を持っていませんでした。 各ブレークポイントの列を個別に記述することをお勧めします。

 .col { @media (min-width: 768px) { @include gallery(4 of 12); } @media (min-width: 1200px) { @include gallery(3 of 12); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それは疑わしい！ 自分でブレークポイントを処理することをお勧めします。 また、気難しい！ それ自体はあなたのためにdisplay: flex



書いていませんdisplay: flex



ために、行、あなたはそれらを自分で登録することを忘れないでください。 その中の列間のインデントは相対的な設定のみです（ピクセル単位で固定することは機能しません）。 また、彼は最近、フレックスを学び、その前に、 float



および:nth-child()



メッシュを構築しました。 すべてのすべて、susy！ これは良いことですが、ブートストラップの場合と同様に、すべてのブレークポイントのグリッドをすばやく簡単に記述したいと思います。

他のグリッドシステムの検索でもあまり結果が得られませんでした-誰もがsusy！のパスをたどり、ブレークポイントを忘れるか、ブートストラップのパスをたどって、htmlでグリッドをタキシングするための生成されたクラスのセットを提供します。

自転車建設

したがって、結果としてファストグリッドが生まれたため、独自の何かを書くことが決定されました。 susyのように、sassに基づいています。 他のソリューション、特にsusyと比較した場合の主な利点は何ですか？ まず、コードが少ないため速度が速いので、標準的なブートストラップの例を見てみましょう。

 <div class="row"> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">1</div> <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">2</div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

高速グリッドを使用すると、このようなグリッドは非常に簡単に説明できます。

 @import "~fast-grid/fast-grid"; .row { @include grid-row(); } .col { @include grid-col(6 4 3 2); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

https://codepen.io/PaulZi/pen/EvPbWK

では、短所を見て、高速グリッドがこれらの問題をすべて解決する方法を見てみましょう。

カスタムメッシュ

簡単：

 @import "~fast-grid/fast-grid"; .cols { $grid: ( gap: 5px ); @include grid-row($grid); &__item { @include grid-col(12 6 null (1 of 5), $grid); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

https://codepen.io/PaulZi/pen/gxPXJq

独自のブレークポイントセットが必要

 @import "~fast-grid/fast-grid"; .cols { $grid: ( breakpoints: ( xxs: 0px, xs: 360px, sm: 640px, md: 960px, lg: 1200px, xl: 1600px ), columns: 60 ); @include grid-row($grid); &__item { @include grid-col((xxs: 60, xs: 30, sm: 20, md: 15, lg: 12), $grid); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

https://codepen.io/PaulZi/pen/XaXVmg

冗長性と冗長性/スタイルとマークアップの分離

fast-gridはcssで使用するためのグリッドフレームワークであり、クラスのジェネリックセットに基づくhtmlではありません。 これにより、マークアップがスタイルから分離されるようになり、さらなるサポートに役立ちます。 また、これのおかげで、ヘルパークラス（ .col-xs-push-4



など）の束を生成する必要はありません。ほとんどの部分は使用されていません。

重複する不要なスタイル

高速グリッドはミックスインのセットであるため、それ自体はcssでルールを生成しません。 したがって、ここでは、フレームワークが必要のない要素を様式化するという事実に出くわすことはありません。 とにかく、これらは単なるグリッドであり、それ以上のものではありません。

外国の標準とコードスタイル

高速グリッドは、クラス内で使用する必要のあるミックスインで、好きな名前を付けます。 BEMが好きですか？ 質問なし！

非推奨のメソッド

Flexboxはデフォルトで使用されます。これにより、多くの可能性が開かれ、従来のフロートの問題が解決されます。 たとえば、列を簡単に並べ替えることができます。

以下の例では、モバイルバージョンのメインコンテンツの下にサイドバーを表示し、 大画面の最初のブロックにします 。

もちろん、これはフロートのプル/プッシュを使用して実現できますが、非常に松葉杖です。

おわりに

一般に、私のために設定されたタスクは完了しました。今では、グリッドが問題を引き起こさなくなり、レイアウトが迅速かつ簡単になりました。 リポジトリでfast-gridの機能について詳しく読むことができ、例を見ることができます。

Github

例

まだブートストラップを使用していますか？ それから私たちはあなたに行きます！