7

YahooのYUIプロジェクトには、私が（固定幅の）サイトに統合し始めたばかりの、非常に優れた、十分にテストされたコンポーネントがいくつかあります。私は実際に非常に興奮しています-私はしばらくの間消費者向けのサイト作成から離れていて、ここ数年で何が発展したかを見るのをとても楽しんでいます。

YUIコンポーネントとreset.cssがとても好きです-YahooYUIgrids.cssの使用は簡単だと思いました。実際、彼らはそれを自分たちでかなりうまく売ると言います：

「ページ幅、テンプレートプリセット、およびネストグリッドを組み合わせると、ほぼ無限の数の複雑なページレイアウトが可能になります。」

（上記のgrids.cssリンクから）

しかし、私はいくつかの非常に単純な3列のレイアウトを実行しようとしていますが、いくつかの基本的なことを実行できないようです。また、それらの実行方法のドキュメントで適切な説明を見つけることもできません。

例えば：

  • 列間の側溝を変更できますか？
  • yui-t11 / 2、2 / 3、1 / 4タイプのレイアウトを相互にネストするのは非常に簡単ですが、テンプレート をネストできますか？
    • （私は限られた成功のネストyui-t1セレクターを取得しましたが、同じIDを持つ複数のdivになってしまい、何か間違ったことをしていると思いました。

私のサイトはもっと「デザイン主導」です。つまり、ページにする必要のあるフォトショップのマークアップがあります。

これまでの私の印象では、YUIグリッドは、必ずしも正確なデザインに適合している必要のないニュースなどのコンテンツがある、より多くの「コンテンツ主導型」サイトに適しています。それは公正な声明ですか？それとも、grids.cssを使用するための魔法のトリックが欠けていますか？

固定位置の代替グリッドを使用する方が適していますか？

YUIの代替 -別のstackoverflowの投稿で提供されているように

4

6 に答える 6

8

この回答は、 YUI フォーラムの Nate Koechley によって提供されました- YUI シニア エンジニア、YUI チーム

グリッドのスケルトンであるノードに直接触れないことをお勧めします。もちろん大歓迎ですが、お気づきのように、安定性と動作に影響を与える可能性があります。

と

Grids のノードはそのままのスケルトンのままにして、コンテンツ マークアップをその構造内に配置するのが最善だと思います。はい、少し余分なマークアップですが、コンテンツはグリッドから独立して自由かつ安全に移動できるため、カプセル化と考えています。

YUI グリッドを使用したい方の参考になれば幸いです

アップデート

ここに yui-grid マークアップがあるとします。

<div class="yui-g">
    <div class="yui-u first"></div>
    <div class="yui-u"></div>
</div>

そして、余分なマージンを追加したいとします。ネイトが言ったように、マークアップを追加します

<div class="yui-g">
    <div class="yui-u first">
        <div class="specialCss">
            your content goes here
        </div>
    </div>
    <div class="yui-u">

    </div>
</div>

マージン、パディングなどを定義します...

.specialCss {
    margin:10px;
}

このようにして、YUI CSS グリッドの安定性と動作に影響を与えません。

于 2010-06-21T18:16:57.430 に答える
6

margin 属性をオーバーライドすることで、ガターを変更できます。.yui-gb { } などのセレクターまたは使用しているレイアウトをオーバーライドすることで、これを全面的に行うことができます。特定の列のセットを実行したいだけの場合は、別のクラスを追加してそれを使用できます。YUI ルールよりも具体性が高いことを確認してください (または、同じにして、CSS ファイルでルールを低くします)。

テンプレートは、ページ全体を実行するためにすばやくスローアップするように設計されているため、ネスト可能ではないと思います。

グリッドが作成された方法は、独自の UED ガイドラインと広告フォーマットによって規制されているページのサイズに対応するためのものでした。フレームワークを基本として使用し、正確な幅/ガターなどをオーバーライドすることを止めるものは何もありません.

免責事項：私はYで働いています！

于 2009-01-26T19:19:15.553 に答える
1

新しいYUI3グリッドには、グリッド間隔を指定する方法に関する特定の例があります。

http://developer.yahoo.com/yui/3/examples/cssgrids/cssgrids-units.html

于 2010-09-14T21:13:56.137 に答える
1

YUIグリッドのデフォルト設定に多くのカスタマイズを行う必要があるようです。これは、私にとっては、それを使用するという点を半ば打ち負かします。つまり、柔軟性が低下し、効果が低下します。

ネイト・ケークリーの話はもう見ましたか？記憶から、彼は列の間の溝を変更することが可能であると述べ、カスタマイズを行う方法を説明していると思います。

http://developer.yahoo.com/yui/grids/

基本的に、グリッドのCSSファイルを掘り下げて、列間のガターが設定されている場所を特定し、独自のCSSファイルでそれを調整できます。

于 2009-01-26T09:01:51.447 に答える
0

YUI 3 グリッドは強力です。柔軟性があり、安定しており、シンプルです。見てください。

于 2010-09-10T03:42:56.513 に答える
0

YUI の代替案を調査する場合は、Blueprint CSS Generator ( http://kematzy.com/blueprint-generator/ ) を確認してください。これは、CSS グリッド (ブループリント CSSに基づく) をすばやくカスタマイズするための優れた方法です。

残念ながら、YUI 用の同様のツールがあるかどうかはわかりません。

于 2009-01-26T14:45:49.023 に答える