Working on a Drupal site with a Zen sub theme, I ditched zen-grids for susy. I have been playing around with Susy and it works nicely. But here is my question.
I have a layout with two main columns: #content (holding the main content; a grid of three rows of four images with a width of 181px) and div.region-sidebar-second (holding the main navigation).
My designer came up with a 960px layout, where the #content container’s width is 750px then there is a 8px right-margin and div.region-sidebar-second has a width of 202px.
In my responsive.scss I put:
.sidebar-second {
#content {
@include span-columns(9, 12);
}
.region-sidebar-second {
@include span-columns(3 omega, 12);
}
}
So #content uses the first 9 columns and .region-sidebar-second uses the last 3 columns. But this does not translate to 750px/8px/202px.
The percentages that susy calculates are correct, of course, but for my layout I would need Susy to calculate different percentages.
E.g. Susy calculates for #content
.sidebar-second #content {
float: left;
margin-right: 1.40845%;
width: 74.6479%;
}
and for
.sidebar-second .region-sidebar-second {
float: right;
margin-right: 0;
width: 23.9437%;
}
In order to meet the design requirements I would need a width: 78.125% for #content, .833333% for margin-right and a width: 21.0416666% for .region-sidebar-second
Not sure whether this can be achieved with Susy span-columns. If you have a quick idea this would be very much appreciated. Thanks.