Basic questions about Susy and an odd behaving span-columns() - susy-compass

Question

After getting Susy running in Codekit, i was finally able to try around more thoroughly. I am right at the start with the whole grid and Susy thing. So i tried to apply a Susy grid to a design of a recent website i try to build for exercising purpose. But quite a few questions arose about Susys behaviour as well as about best practices in a few edge cases which haven't been covered in the scenarios on the Susy homepage. My markup looks something like that:
<div class="wrapper">
<header role="banner">
<div class="finish"></div>
<a href"/"><a>
<nav role="navigation">
<ul>
<li>Kunden</li>
<li>Projekte</li>
<li>Leistungen</li>
<li>Agentur</li>
<li>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><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
<li><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
</ul>
</section>
</div>
Which leads to (sorry due to my status i am not allowed to post images yet - but in this case they are essential so i placed a direct link):
https://dl.dropbox.com/u/8578/sample.png
So a div is wrapping the content of the page. The header is carrying the logo (not shown in the screenshot beneath) and a nav. Then comes an aside element for that grey box floating. Beneath several sections (like register cards) are placed. I've included only one partially in the screenshot. Each register card should cover the screen in its complete width. In between each register card the background image looks through. The background image is placed with #include background-size(cover). As a side note in each register card there should be a bleed on the left and right of about e.g.10% each, so the content is only contained in the center 80%. And the content area of each section contains either matrixes of li (like in the html code above) or columns of 1 to 3 placing divs of content. A few parts of the css i used so far:
$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;
}
Within the wrapper at the end the aside as well as sections reside. the basic question are as follows:
a) A general question about best practice first. In the described example would it be enough to place one single container in the wrapper div or would it better to create several containers and would those containers align to each other then if placed throughout the document?
Means either one container for all or one container for the header, one for the aside element and one for each section?
b) Would it be thoughtful to create a container for the aside element. Means one bleed on the left one column content area and one bleed on the right? Or would it be disadvantageous to use an container in that case at all?
c) Looking at the sections is it basically possible at all to let a section fill the whole width of the screen, having on each side a bleed of x columns (placed with pad()? ) and centered in the middle the "content" area splitted into x columns (with span-columns).
d) As seen in the screenshot; at the top of each section there are two arrows pointing at each other. Each arrow consists of a content box containing the text as well as a before and after pseudo class containing a triangle and a rectangle. Latter should stretch till the side of the screen on each side. Would it make sense and be possible to get an responsive css only solution by placing each element within a column:
col1 col2 col3 col4 col5
rectangle content triangle content rectangle
left and right
by assigning a width of 100% each element should fill the full width of the column it is in while be also responsive. And if this idea might work out would it be necessary to create two containers for each section (one for the arrows one for the content with bleeds beneath) or would one be enough?
e) Last question is about the application. If i use :
.moodlegrid li{
#include column-count(3);
#include column-gap(1em);
#include inline-list;
}
it looks like the screenshot from the beginning. If i use the Susy mixins i get the following:
.moodlegrid li{
#include span-columns(4,12);
#include span-columns(4,12);
#include span-columns(4 omega,12);
#include inline-list;
}
and the results look like this:
https://dl.dropbox.com/u/8578/result2.png
Well that's it for now. I am still a bit confused and unsure about best practices as well as if i am doing everything all right so far. ;) Any hints and suggestions would be appreciated. Thanks in advance Ralf

Answer 1

a) I use one container when possible, but multiple containers can be useful (and will align) in certain cases.
b) I don't understand the question. I would simply use squish() to add space to the left and the right.
c) I have not idea what you are asking. Yes, you can have elements span the full screen. You can do it by using multiple containers inside your structural elements (rather than one wrapping them all), or a very large value for bleed. Is that what you mean?
d) I would simply add a large bleed on the left of one, and the right of the other. Then use generated content for the triangles. You don't need your bleed to be responsive to the edge of the screen - you can simply overflow that edge and add overflow-x: hidden; where needed to keep scrollbars from appearing.
e) this code doesn't make any sense. Maybe you wanted this?
.moodlegrid li {
#include span-columns(4,12);
#include nth-omega(3n);
}
Even then, it looks like you may be having issues with float clearing or margin collapsing or something else unrelated.
It would help in the future if you asked each question separately and created specific code examples for each one - rather than lumping them together with one large and complex example. That would also help you debug the problems yourself. Simplify the problem so it is manageable, and then try out the different ideas you have.