7

雅虎的 YUI 项目有一些非常棒的、经过良好测试的组件，我刚刚开始将它们集成到我的（固定宽度）站点中。我实际上非常兴奋——我已经有一段时间远离面向消费者的网站创建了，看到过去几年的发展让我很开心。

非常喜欢 YUI 组件和 reset.css - 我认为我使用Yahoo YUI grids.css是不费吹灰之力的。事实上，他们说自己卖得很好：

“结合页面宽度、模板预设和嵌套网格，可以实现几乎无限数量的复杂页面布局”

（来自上面的 grids.css 链接）

但是，我正在尝试做一些非常简单的 3 列布局，但似乎无法做一些基本的事情——在如何做这些事情的文档中也找不到很好的解释。

例如：

  • 我可以更改列之间的排水沟吗？
  • 将 1/2、2/3、1/4 类型的布局相互嵌套非常容易，但我可以嵌套yui-t1模板吗？
    • （我确实获得了有限的成功嵌套yui-t1选择器，但最终有多个 div 具有相同的 id，这让我相信我做错了什么。

我的网站更多地是“设计驱动”——也就是说，有一个需要制作成页面的 Photoshop 标记。

到目前为止，我的印象是 YUI Grid 适用于更多“内容驱动”的网站，在这些网站中，您可以获得诸如新闻之类的内容，而这些内容不一定必须适合精确的设计。这是一个公平的说法 - 还是我错过了使用 grids.css 的一些魔术？

我是否更适合使用具有固定定位的替代网格？

YUI 的替代品 - 如另一个 stackoverflow 帖子中所提供

4

6 回答 6

8

此答案由 Nate Koechley 在YUI 论坛上提供- YUI 高级工程师，YUI 团队

我建议人们不要直接接触作为网格骨架的节点。当然，欢迎您，但正如您所注意到的，这会影响他们的稳定性和行为。

和

我认为最好将 Grids 的节点保留为未触及的骨架，并将您的内容标记放在该结构中。是的，它有点额外的标记，但我认为它是封装，因为您的内容可以自由且安全地独立于网格移动。

我希望它对想要使用 YUI 网格的人有用

更新

假设这里有一些 yui-grid 标记

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

你想增加一些额外的利润。正如 Nate 所说，添加一些额外的标记

<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

您可以通过覆盖边距属性来更改装订线。您可以通过覆盖 .yui-gb { } 等选择器或您使用的任何布局来全面执行此操作。如果您只想做一组特定的列，您可以添加另一个类并使用它，只需确保您具有比 YUI 规则更多的特异性（或相同且您的规则在 CSS 文件中较低）。

我不认为这些模板是可嵌套的，因为它们被设计成一个快速抛出的东西来做一个完整的页面。

创建网格的方式是专门为满足我们获得的页面大小而设计的，这些大小由我们自己的 UED 指南和我们的广告格式控制。没有什么可以阻止您将框架用作基本框架并覆盖确切的宽度/排水沟等。

免责声明：我为 Y 工作！

于 2009-01-26T19:19:15.553 回答
1

听起来您需要对 YUI Grids 的默认设置进行大量自定义，对我来说，这在一定程度上违背了使用它的意义——或者更确切地说，它的灵活性降低了，因此效率降低了。

你看过 Nate Koechley 的演讲了吗？从记忆中，我认为他确实提到了可以更改列之间的排水沟并解释了如何进行自定义。

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

基本上，您可以深入研究网格的 CSS 文件并确定列之间的间距设置在哪里，并在您自己的 CSS 文件中进行调整。

于 2009-01-26T09:01:51.447 回答
1

只是想提一下，在新的 YUI 3 网格中，有一个关于如何指定网格间距的具体示例。

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

于 2010-09-14T21:13:56.137 回答
0

如果您确实研究了 YUI 的替代品，请查看 Blueprint CSS Generator ( http://kematzy.com/blueprint-generator/ )。这是自定义 CSS 网格（基于Blueprint CSS）的好方法。

不幸的是，我不知道 YUI 是否有类似的工具。

于 2009-01-26T14:45:49.023 回答
0

YUI 3 网格功能强大。灵活、稳定、简单。看一看。

于 2010-09-10T03:42:56.513 回答