0

在让 Susy 在 Codekit 中运行之后，我终于能够更彻底地尝试了。我对整个网格和 Susy 的事情一开始就是正确的。因此，我尝试将 Susy 网格应用于我为锻炼目的而尝试构建的最近网站的设计。但是，关于 Susys 行为以及在一些边缘案例中的最佳实践出现了很多问题，这些案例在 Susy 主页上的场景中没有涵盖。我的标记看起来像这样：

<div class="wrapper">

    <header role="banner">
        <div class="finish"></div>

        <a href"/"><a>
        <nav role="navigation">
            <ul>
                <li><a href="#kunden"></a>Kunden</li>
                <li><a href="#projekte"></a>Projekte</li>
                <li><a href="#leistungen"></a>Leistungen</li>
                <li><a href="#agentur"></a>Agentur</li>
                <li><a href="#kontakt"></a>Kontakt</li>
            </ul>
        </nav>
    </header>

    <aside class="intro testcol">
        <h3>Headline 3</h3>
        <p>Ferferiandus ma plibus voluptas assi dis peria conectati dus que mi, sundae seque maximod ipsunt ut opta eture sus dit, nos iligentiis rentin res quam dendi officiae quas esequam, volup- tibea sit, simpore pedis eum explani magnatu mquias dolorio cus aut modolectur sequis nullescid ut veni doluptaturem dolorupit estorpo raectatus.</p>
    </aside>

    <section name="projekte" class="test" role="main">
        <hgroup>
        <h1>Unsere Projekte</h1>
            <h2>Subtitle</h2>
        </hgroup>

        <ul class="moodlegrid">
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>           
        </ul>
    </section>
</div>

这导致（对不起，由于我的状态，我还不允许发布图片 - 但在这种情况下，它们是必不可少的，所以我放置了一个直接链接）：

https://dl.dropbox.com/u/8578/sample.png

所以一个 div 正在包装页面的内容。标题带有徽标（未在下面的屏幕截图中显示）和导航。然后是那个浮动的灰色盒子的旁白元素。在几个部分（如登记卡）下方放置。我在屏幕截图中只包含了一部分。每张登记卡都应覆盖整个屏幕的宽度。在每张登记卡之间，背景图像可以透过。背景图片使用@include background-size(cover) 放置。作为旁注在每张登记卡中应该有一个左右各约eg10%的出血，所以内容只包含在中心的80%中。每个部分的内容区域包含 li 矩阵（如上面的 html 代码中）或 1 到 3 个放置内容 div 的列。到目前为止我使用的 css 的几个部分： 

$base-font-size: 17px;
$base-line-height: $base-font-size * 1.5;

$total-columns: 20;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;

@mixin bleed($padding: $grid-padding, $sides: left right) {
    @if $sides == 'all' {
        margin: - $padding;
        padding: $padding;
    } 
    @else {
        @each $side in $sides {
            margin-#{$side}: - $padding;
                padding-#{$side}: $padding;
            }
        }
}

* { 
    @include box-sizing(border-box);
}

body {
background: url('../img/body-bg.jpg') no-repeat center center fixed;
@include background-size(cover);
color:#333;
padding:0;
margin:0;
width: 100%;
font-size: $base-font-size;
font-family: "Signika", Georgia, serif;
@include establish-baseline;
}

.wrapper {
    width:100%;
    @include container;
    @include susy-grid-background;
    @include bleed;
}

在末尾的包装器中，旁边和部分都驻留。基本问题如下：

a) 首先是关于最佳实践的一般性问题。在所描述的示例中，将一个容器放置在包装器 div 中是否就足够了，还是创建多个容器更好，并且如果放置在整个文档中，这些容器是否会相互对齐？是指一个容器用于全部或一个容器用于标题，一个用于旁边元素，一个用于每个部分？

b) 为 side 元素创建一个容器是否考虑周到。意思是左边一栏内容区域一出血，右边一出血？或者在那种情况下使用容器会不会很不利？

c）查看这些部分基本上可以让一个部分填满屏幕的整个宽度，在每一侧都有一个 x 列的流血（用 pad() 放置？）并在中间居中“内容”区域分成 x 列（带有跨度列）。

d) 如屏幕截图所示；在每个部分的顶部有两个相互指向的箭头。每个箭头由一个包含文本的内容框以及一个包含三角形和矩形的前后伪类组成。后者应拉伸到每一侧的屏幕一侧。通过将每个元素放在一列中是否有意义并且可以获得仅响应式 css 的解决方案：

col1 col2 col3 col4 col5 矩形内容三角形内容矩形左右

通过分配 100% 的宽度，每个元素都应该填满它所在的列的整个宽度，同时也具有响应性。如果这个想法可行，是否有必要为每个部分创建两个容器（一个用于箭头，一个用于下方有出血的内容）或者一个就足够了？

e) 最后一个问题是关于申请的。如果我使用：

.moodlegrid li{
    @include column-count(3);
    @include column-gap(1em);
    @include inline-list;
    }

它看起来像一开始的屏幕截图。如果我使用 Susy mixins，我会得到以下信息：

.moodlegrid li{
    @include span-columns(4,12);
    @include span-columns(4,12);
    @include span-columns(4 omega,12);
    @include inline-list;
    }

结果如下所示：

https://dl.dropbox.com/u/8578/result2.png

好吧，这就是现在。我仍然有点困惑和不确定最佳实践，以及到目前为止我是否做得很好。;) 任何提示和建议将不胜感激。提前感谢拉尔夫

4

1 回答 1

1

a) 我尽可能使用一个容器，但在某些情况下，多个容器可能有用（并且会对齐）。

b) 我不明白这个问题。我会简单地使用squish()在左侧和右侧添加空间。

c) 我不知道你在问什么。是的，您可以让元素跨越整个屏幕。您可以通过在结构元素中使用多个容器（而不是一个包装所有容器）来完成此操作，或者使用非常大的bleed. 你是这个意思吗？

d) 我会简单地在一个的左侧和另一个的右侧添加一个大出血。然后为三角形使用生成的内容。你不需要你的出血来响应屏幕的边缘——你可以简单地溢出那个边缘并overflow-x: hidden;在需要的地方添加以防止滚动条出现。

e) 这段代码没有任何意义。也许你想要这个？

.moodlegrid li {
  @include span-columns(4,12);
  @include nth-omega(3n);
}

即便如此，看起来您可能会遇到浮动清算或保证金崩溃或其他不相关的问题。

如果您单独询问每个问题并为每个问题创建特定的代码示例，而不是将它们与一个大而复杂的示例混为一谈，这将有助于将来。这也将帮助您自己调试问题。简化问题，使其易于管理，然后尝试您的不同想法。

于 2012-09-30T06:28:38.143 回答