Can I get advice on how to accomplish a layout with Susy?

[Jake Mauer]

I'm wondering how best to accomplish this design with Susy. My big question is regarding the content blocks with a white background. Currently I have my container set to 9 columns, with 80px column widths and 30px gutters. The content fits perfectly along the gridlines, however the white background needs to extend into the grid padding's territory. 

I also have a few additional questions:

• Is it best practice to make classes for each of these types of containers, and apply the span-column declarations in the sass file? What is the current opinion on using class names within your HTML, such as span2 or span4omega?
• The three images in the "qualifier" section align to the main grid. In this case do I give them +span-columns(2, 6) or just +span-columns(2)?

Thanks for your help!

[Eric Meyer]

Grid padding is simply applied to the container as padding (padding: $grid-padding;) so you could remove that and apply it to the margin instead. I may consider adding that as a setting...

Best practice is to use semantic classes in your markup, and then apply the mixins in css. You can use placeholder classes to extend, but you'll need to include context in your classes as well (%span3of6 etc).

That leads into your last question. You need the context when nested, so "+span-columns(2, 6)".

Cheers,
-e

[Jake Mauer]

Thanks Eric,

So I've added +border-box-sizing, set $grid-padding to 0, and added gutter-width padding to the left and right of my content sections. The problem is now Susy is calculating column widths incorrectly. Because it thinks the entire container has extra width. However I can't simple add additional margin as my left and right margins are auto. 

Does this make sense? I feel like I'm missing something obvious. 

[Eric Meyer]

I'm having a hard time following without code samples.

We recently set up a 'susy-compass' tag on stackoverflow, which I'm hoping to use as the main forum for questions like this. I'd recommend moving the conversation over there - with code.

Cheers,
-e

[Jake Mauer]

Can do, thanks Eric.