モジュラーグリッド960gsを構築するためのすばらしいフレームワークについて徹底的に説明したいと思います。 最近、コメントのどこかで、彼らは960gsは 青写真よりも理解するのが難しいと言っていました。 これらのフレームワークを比較したくありません。ただし、それらが異なるウェイトカテゴリに表示されるためだけに、モジュラーグリッドを構築するには、960gsが表示されなかったほど簡単で理解しやすいものはありません。
彼らはHabréのモジュラーグリッドについて書いたように見えますが、ここでは検索を失望させたものがあります。すべてのゴミは「哲学的幾何学」のようです。 ここにいくつかのリンクがあります：
私はプログラマーなので、経験豊富なレイアウトデザイナーやデザイナーが急にテキストを下ろしてしまった場合、見落としを許してくれることを願っています。 pastie.orgのすべてのコードを削除しました 。まず、Habrはコードを強調表示するときにタグが多数あるため記事全体を投稿できません。次に、コードが記事を無駄に膨らませません。
960gsは、フレームワークの作成者であるNathan Smithの選択により名前が付けられました。デフォルトでは、コンテナの全幅は960ピクセルです。 ただし、960ピクセルは鉄の制限ではありません。
すべての960gs要素は、cssのクラスとして記述されています。 明らかに、<tag class = "960gs_someclass">として使用する必要があります。
この記事では、公式サイト960.gs/css/960.cssのフレームワークコードを使用します。 この記事を読んで理解するために、このコードを見る必要はまったくありません。ストーリーの最後で、CSSコードをより詳細に取得する方法に焦点を当てます。
例では、マークアップ要素としてディーバを使用し、便宜上、960gsクラスの名前でそのようなディーバを呼び出します。 たとえば、クラス.container_12のdivを要素コンテナーと呼びます。 この小さな自由が、レイアウトの第一人者の目に理解をもたらすことを願っています。
また、フレームワーク要素のパラメーターを説明するときは、元のCSSコードのパラメーターのみを説明します。 もちろん、コーダーは必要に応じて自由に変更したり、新しいプロパティを追加したりできます。
翻訳では、グリッド要素は「セル」と呼ばれ、文字通りの「グリッド」とは多少異なりますが、それほどくなく、実際の目的に非常に近いように聞こえます。 比較：「1行に3つのグリッドを配置」と「1行に3つのセルを配置」。
粗さが終わったことを願っていますので、この記事のトピックに直接行きます。
コンテナ
コンテナ -モジュラーグリッドのパラメーターを設定する960gsマークアップのルート要素。 「ルート要素」-それに関するフレームワークの子のみがモジュラーグリッドの形成に参加することを意味します。「パラメータの設定」-コンテナ内にあるフレームワークのすべての要素が均一にパラメータに従うことを意味します。
12列のコンテナーは次のようになります。
コンテナは、モジュラーグリッドに次のパラメーターを設定します。
それ以外はすべてデザイナーの意志に任されています。
1つのページには、同じパラメーターまたは異なるパラメーターを持つコンテナーを一度にいくつでも配置できます（明らかに、1つのページでいくつかの異なるモジュラーグリッドを使用する非常に良い理由がデザイナーにあるはずです）。
たとえば、ページをヘッダー/メインコンテンツ/フッター（ヘッダー/コンテンツ/フッター）の領域に分割するために、いくつかのコンテナーを使用すると便利です。
960gsのイデオロギー内の入れ子になったコンテナーは馬鹿げています（htmlで入れ子になった<body>を想像してください）が、cssのインデントを操作することで、コンテナーを互いに入れ子にすることができます。 しかし、なぜですか？
将来的には、パラメーター付きのコンテナーを使用します。
- 列幅：60px
- 列：12
- 溝の幅：20px
- コンテナの幅=（60 * 12）+（20 * 11）+（20/2 * 2）= 960px
コンテナコードの例：
<div class = "container_12" />
開発段階では、グリッドイメージを背景イメージコンテナとして使用すると便利です。これは、たとえば公式Webサイトで取得できます（これについては後で説明します）。 True、標準の12列および16列のレイアウトのみ。
div.container_12 { 背景：#fff url（ "/ img / 12_col.gif"）repeat-y; }
グリッド
グリッド-コンテナのモジュラーグリッド上のhtml要素の場所のために設計された2つの基本的なマークアップ要素の1つ。 セル（グリッド）は、常にコンテナに対してコンテンツを水平面に向けます。 1つのセルがモジュラーグリッドの1つの列を占有するか、一度にクラス名がこのプロパティを反映します：1つの列を占有するセルの場合、クラスの名前はgrid_1、2つの列のセルの場合はgrid_2、5列のセルのgrid_5などになります。 d。 したがって、一般的には、クラスをgrid_ Xとして表すことができます。ここで、Xはモジュラーグリッドの列に必要なセル幅です。 それぞれgrid_1、grid_6、およびgrid_12グリッドを検討してください。
pastie.org/780079
1つのセルが他のセルと水平方向に並ぶことができます。ただし、それらが一緒になってコンテナ内にあるものを超えないように列を覆っている場合に限ります。
pastie.org/780086
コンテナよりも多くの列が必要な場合は注意してください。1行のサイズに収まらない右端のセルは、下の行で強制的に破棄されます。
pastie.org/780088
好奇心reader盛な読者は、cssコードを調べて、html要素が必要なセルとは異なり、マージンの助けを借りて溝が形成されていることを知ることができます。 しかし、これが誰にとっても明白であることを願っています。
積極的なレイアウト設計者は、grid_へのすべての参照の名前を、フレームワークのコード内のcell_などにinしげなく変更できます。
クリア
おそらく、以前のコードを読んだ誰もが、新しい要素がそこに登場したことに気づいたでしょう。
<div class = "clear" />
Clearは、960gsの2番目の基本的なマークアップ要素です。 clearの機能を理解するために、次の状況を考慮します。clearを使用せずに最後の例を書き直し、便宜のためにコンテナーに赤いベゼルを追加します。
pastie.org/780092
うーん、容器は娘細胞によって引き伸ばされていませんでしたが、薄く孤独なままでした。 したがって、 最初の明確なタスクは、親コンテナーを予想されるサイズに拡大することです。 ここで、各セルが個別に行全体を占めるグリッドセクションの最初の例を注意深く見ることを提案します。 この例から、 2番目の明確なタスクは、現在の行がいくつ残っているかに関係なく、現在の行を完了することであると結論付けることは論理的です。
これらの2つのルールから、960gsで作業するときは、この行がコンテナ内の最後の行または唯一の行であっても、常にクリアで行を終了する良い習慣に従います。
明確なクラスを持つディーバが比較的頻繁にタイプセッターによって使用されることは秘密ではありません。 サイト全体のコードと将来の960gsコードとの競合を回避するために、タイプセッターはフレームワークファイルのcssコードでclearクラスの名前を別のクラス（clrなど）に変更するか、指定する（たとえば、.container_12 .clear）。 それでも、私の意見では、潜在的な競合の場合の名前の変更がより適切な方法です。
次に、グリッド要素のすべての追加クラスをリストします。 メインクラスgrid_Xへの追加クラスとしてのみ存在するため、これらは追加です。 例えば
<div class = "grid_2 alpha" />
アルファとオメガ
1つのセルに他のいくつかを埋め込む必要がある場合があります。 例として、10行それぞれに、横に2つの非常に長い連続セル、高さ10行、中央に1つのセルが必要です。
そのような場合は、 アルファクラスとオメガクラスを使用する必要があります。 一番下の行は単純です-セルに他のいくつかのセルをネストする場合、最初のネストされたセルはアルファクラスに設定する必要があり、最後のセルは明らかにオメガに設定する必要があります。
pastie.org/780095
ちなみに、この例は、<br>タグを使用する必要があるまれなケースの1つです。
セルを1つだけネストする必要がある場合は、オメガなしでアルファクラスのみを使用するだけで十分です。
プレフィックス、サフィックス、プッシュおよびプル
これらの4つの追加クラスは、基本的に、それぞれpadding-left、padding-right、left、およびrightのより抽象的な置換です。 これらのクラスを使用することは、頭の中や計算機で必要なインデントを計算するよりもはるかに便利であることは注目に値します。
それらはすべて、セルクラス名class_name Xに似たクラス名を持ちます。ここで、Xはモジュラーグリッドの列数です。
簡単な例を考えてみましょう。
pastie.org/780097
次に、prefix_1、suffix_1、push_1、およびpull_1クラスをそれぞれ韻のあるセルに適用します。
pastie.org/780099
それだけです、この記事には960gsのすべての機能がリストされていますが、いくつかの点だけを検討する必要があります。
まず、 www.mediafire.com /？2jfqdxdtqowの記事からサンプルを含むコードをダウンロードできます。
次に、フレームワークのWebサイトアドレス： 960.gs。 そこで、ダウンロードをクリックすると、2種類のスタイル（12列と16列）を含むcssファイルと、多くのグラフィックエディター用のテンプレートを含むすべてが追加されます。
第三に、 www.spry-soft.com / gridsには、 960gsに基づくモジュラーグリッドの素晴らしいジェネレーターがあり、特にゴム製モジュラーグリッド（ ！ ）を作成できます。この素晴らしいことを必ず評価してください。 このツールを使用すると、作成者が設定した960pxの制限をバイパスできます。
第4に、誰かが読んでいない場合に資料を統合するために、記事habrahabr.ru/blogs/css/70203をお勧めします。
シムにあなたの休暇を取らせてください、新しい年にあなたが興味深くて難しいプロジェクトを願っています！
UPD： （px、em、％）grid generator.comグリッドジェネレーターを追加します。 Pendalfに感謝します 。
同様に960gsの「ゴム」バージョン。 www.designinfluences.com/fluid960gs 。 おかげでDeavy