Given I have the following markup:
<body>
<article>
<div class="foo">Foo</div>
<div class="bar">Bar</div>
</article>
</body>
The body
has a fixed width of 910px
:
body { @include container(910px); }
The body
has an article
element, which consists of 2 nested divs
(.foo
and .bar
).
At this point, if I wanted .foo
and .bar
take up 6 columns each. This is easy enough by doing:
article {
@include container
.foo { @include span(6 of 12) }
.bar { @include span(6 of 12) }
}
Is it fine for the body
to @include container
and the succeeding element (article
) to contain another @include container
directly?
In Twitter Bootstrap, a col
should always follow after a row
. But this isn't Bootstrap. It's Susy.
In Susy, what is the same concept of a row
and a col
? Or does @include span
basically do both?
Bootstrap uses rows to remove the edge gutters. Susy doesn't use or require rows, so span()
is all you need. There is also no need for the repeated container()
mixin. If you want the article to clear floats, you can use a clearfix instead (ours is called susy-clearfix()
).