Is it possible to override the default gutter value for a container with base values e.g. like that:
$total-columns: 12;
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: 10px;
So that you would be able to minimize the gutter from 20px to e.g. only 5px, or any other desired value, on demand.
.example{
@include squish(1,1);
li{
@include span-columns(2,10);
@include nth-omega(5n);
}
}
Is it possible via a mixin, would i have to place another container/layout or should i stick with plain CSS to solve that task? Thanks
Update: To be more specific, i don't look for an exact sizing of the gutter (as far as i read so far, due to rounding, it would be difficult anyway), i just want to minimize the gutter and enlarge the column width indirectly.
https://dl.dropbox.com/u/8578/Boxes.png
At the moment i have squished 3 columns before and after the contained 7 columns and their gutters. So far the columns and its images are too small in width. Therefor i wanted to size down the gutter width and enlarge the column width indirectly.
The Susy settings look that way:
$total-columns: 24;
$column-width: 3%;
$gutter-width: 1%;
$grid-padding: 0;
A container width i haven't set so far since the container is inside a wrapper for the whole page.
.wrapper {
@include container;
overflow-x: hidden;
width:100%;
max-width: 100%;
}
The specific selector for the image matrix shown in the screenshot is the following:
.projects {
@include squish(3,3);
li {
@include span-columns(2,14);
@include nth-omega(7n);
}
}
You need any more details? So would you still recommend to use the with-grid-settings mixin to solve that problem? And is the set-container-width mixin really necessary? Thought if i set up things relative no absolute values should be necessary? Thanks Ralf
Update 2:
Ufff i tried the suggested little secret's approach mentioned in the comments beneath. But so far i was unable get a clean display, more like a messy chaotic "patchwork"... ;) Kind of confusing over all. Basically the articles author recommended 2 steps. First he added -100% margin-right for the content containing element and in the next step pushed the objects back into their places. My last setup in a long line of tries looks like that right now but still no solution in sight.
.example{
@include squish(3,3);
@include with-grid-settings($gutter: 0.1%){
margin-right: -100%;
li{
@include span-columns(6,18);
@include nth-omega(3n);
@include pre(9);
}
}
}
The margin-right i've placed within the with-grid-settings mixin in the containing element for "li" like suggested. But the question is where to place the pre mixin and especially which numbers it should contain (has the number to take the squish number in consideration too)? Is it the same value for all li or is a for loop necessary to push the images to individually to their horizontal positions ? And is the mixin order within the li element correct? Does it matter where it is placed? At the end or inbetween span-columns and nth-omega? Over all i am still confused. Grids, image matrices and Susy still keep my brain spinning. :/
Update 3:
Thanks! I finally got it working. In the end i would have two questions about my solution:
.test{
@include with-grid-settings($gutter: 0.1%){
li{
margin-right: -100%;
float:left;
@include span-columns(6,18);
@include nth-omega(3n);
$count:0;
@for $i from 1 through 9 {
&:nth-child(#{$i}) {
$count: $count + 1;
@include push($count);
@if $count == 2{ $count: 0;}
}
}
}
}
}
Would there be a more elegant way for the layout of the for loop? And second why is it possible that this version as well as a version when i comment out the $count: $count + 1; statement lead to the same visual result? Actually commented out there isn't a second and third count up for the push variable. Any idea why that works anyway without the $count: $count + 1;? Thanks!
Update 4: I played around a little bit more and as it turns out the following version works like a charm. It seems the $count variable isn't necessary at all, as well as the incremental growing of the value contained within the push/pre mixin. A simple 0 did the trick.Thanks again for the help!!!
.test{
@include with-grid-settings($gutter: 0.5%){
li{
margin-right: -100%;
@include span-columns(6,18);
@include nth-omega(3n);
@for $i from 1 through 9
{
&:nth-child(#{$i})
{
@include push(0);
}
}
}
}
}
Update 5
I already mentioned in my last comment beneath that the example shown in update 4 hasn't worked as good as it supposed to work at the first look. I tried now to completely rebuild the suggestion from the Palantir article. Underneath is the scss parts for the 7x4 as well as the 3x3 matrix shown in the video: https://dl.dropbox.com/u/8578/matrix.mov
.7x3{
@include with-grid-settings($gutter: 0.25%){
li{
margin-right: -100%;
@include trailer(1);
@include span-columns(2,14);
@include nth-omega(7n);
$y: 0;
@for $x from 1 through 28
{
&:nth-child(#{$x}){
margin-left: ($y * columns(2,14)) + ($y * gutter(14));
$y: $y + 1;
@if $y > 6{
$y: 0;
}
}
}
}
}
}
.3x3{
@include with-grid-settings($gutter: 1%){
li{
margin-right: -100%;
@include trailer(1);
@include span-columns(6,18);
@include nth-omega(3n);
$j: 0;
@for $i from 1 through 9
{
&:nth-child(#{$i}){
margin-left: ($j * columns(6,18)) + ($j * gutter(18));
$j: $j + 1;
@if $j > 2{
$j: 0;
}
}
}
}
}
}
At the first look the matrices look broken but if you take a closer look at the inspector within the video, it appears that each element is pushed to its correct horizontal position in both matrices. Only problem is that each li is contained in separate lines. This is the closest version i was able to get. :/ Right now i am out of ideas how to put those pieces together to get to a proper matrix. I tried more or less ever possibility with float as well as display properties. But no luck. Anyone has a hint perhaps?
