6

フレームレスグリッドの使い方を完全に理解するのに苦労しています。つまり、私はその概念を完全に理解しています。いいな。

私の牛肉は、要素の配置を妨げるものが何もないというだけだと思います。それは彼らの幅を設定するだけです、そしてそれはそれです。したがって、要素に列幅を適用した場合でも、フローティングまたは絶対的な配置を開始しない限り、すべてがスタックします。

この点で、これらの要素がスタックしないようにするために使用できるユニバーサルポジショニングスタイルがあるかどうかについてのアドバイスを探していると思います。

それとも、これは広すぎますか?ケースバイケースで要素を配置する必要がありますか?

(また、参考までに、私はSASSを利用しています。

ありがとう!

4

1 に答える 1

7

UPD:フレームレスグリッドは実際のコード(SASS、LESS、JS)を考え出したので、以下の答えは時代遅れです。

フレームレスは、グリッドフレームワークというよりもアプローチです。

グリッド計算用の単一の関数(この関数の実際の使用方法に関する適切なドキュメントがなくても)以外は、それ自体では何も実行しません。

みてみましょう:


1.通常の固定幅グリッドを作成します。

列の幅、側溝の幅を選択してください…ご存知のとおり、通常のものです。まだ列の数について心配する必要はありませんが、それ以外の場合は、固定幅のグリッドを作成するために通常使用する基準を使用してください。柔軟性を高めるために、比較的小さい列幅を使用することをお勧めします。

自分でグリッドを組み立てる必要があります。それを達成するために何かを使用してください、Framelessは何も提供しません。列幅は固定幅である必要があります。


2.無限に繰り返すようにします。

次に、グリッドに無限の数の列を指定します。これにより、ビューポートをどれだけ広くしても、表示される列が増えます。六角形の代わりに柱で満たされた無限に広いハニカムを見ていると想像してください。

「無限の数」とは、「必要な数」を意味するようです。フレームレスホームページは魅力的な26列で動作します(それを表示するには1920pxの表示幅が必要です)が、frameless.scssは16列の変数のみを提供します。

「グリッドに多数の列を与える」とは、「最大で一定量の列を活用する設計を考え出す」ことを意味します。


3.ビューポートの中央に配置します。

グリッドをビューポートの中央に水平に配置します。列の数が偶数のグリッド(写真)の場合、ビューポートの中心点を、中央にある2つの列の間のガターの中央に揃えます。奇数のグリッドの場合は、中央の列の中央に配置します。

これは非常に基本的なことですが、CSSコードの別の行を手動で実行する必要があります。


4.それだけです。

グリッドの使用を開始します。より多くの列が利用可能になったときに、メディアクエリを使用してデザインを適応させます。ピクセルごとではなく列ごとに適応させるので、レイアウトを適応させるべきかどうかを正確に選択できます。たとえば、このサイトは約320、480、600、900、1900ピクセルにしか適応しません。実際の動作を確認するには、ブラウザウィンドウのサイズを変更してみてください。

いいえ、それは「それ」ではありません。そこから実際に作業が始まります。

さまざまなビューポートに適応するようにグリッドを手動でコーディングする必要があり、Framelessはそのためのツールを提供していません。


したがって、グリッドを組み立てるために使用できるツールを探している場合は、Susyをお勧めします。それはSASSの素晴らしくてエレガントな作品です。

スージーは非常に用途が広いです。さまざまなグリッドタイプがあります(デモ)。また、さまざまなアプローチがあります。最初に単一の列の幅を宣言し、ウィンドウの幅に一致するように列の数をSusyに調整させることで、コンテンツに進むことができます。または、どの列数がどのウィンドウ幅に対応するかを宣言し、それに応じてSusyに列幅を調整させることができます。

Susyを使用すると、Framelessが提案することを実現できますが、必要なすべてのツールも提供されます。技術的には異なりますが、スージーは同じ考えを共有しています。携帯電話用の小さなグリッドから始めて、画面が大きくなるにつれて大きくしていきます。このデモは、そのような2つのステップを示しています。7列から始まりますが、画面の幅が示す場合は12列になります。

ここでは、Susyを使用して5つのステップでストレッチするWebサイトを作成しました。http://am-teh.ruこのStackOverflowの投稿で、このサイトのレイアウトの背後にあるコード(およびそのコンセプトの進化)を確認できます。スージーの開発者はそれについて前向きにコメントしています。

于 2012-11-26T23:06:57.027 に答える