I'm using Compass for the first time.
Instead of having 24 columns and 10px gutters, I'd like to have 12 columns and 20px gutters.
If I put "width:960px" on my #container, the .showgrid class shows me a correct grid based on this :
$blueprint-grid-columns: 12;
$blueprint-container-size: 950px;
$blueprint-grid-margin: 20px;
I've put this in my _base.scss, and here is the result :
There are 12 columns for a total width of 960px. Right.
But if I apply "width:span(12)" or "include column(12)" on my container, it shows me only 6 columns for a total width of 480px (960/2) :
The widths are wrong and based on the original sizes : 24 columns.
Do you know why and how I could fix that?
And, subsidiary question : do you know how to remove the lines relative to line-height on .showgrid ?
Related
My susy layout is wrong by 1 pixel and I don't know why:
$susy: (
columns: 12,
container: 1546px,
gutter: 26px,
column-width: 105px,
global-box-sizing: border-box
);
It returns 104px width columns with 27px gutters, the container is as set. Any pointers?
There are a few issues here:
The gutters setting (plural) takes a ratio, rather than a length. To get your proper ratio based on the length, you can use division: gutters: 26px/105px
By default, Susy output is in relative %, even if you define the grid using px. If you want Susy to output exact px-lengths, you should add math: static to your settings. In that case, you should also remove your container size, and let Susy calculate that for you based on columns and gutters.
Just wondering what is the best way to go about this...
I am using a Susy grid (Sass/Compass, Susy version one).
My desktop total columns = 12. However inside the twelve, I would like to divide that into 5 columns of equal width.
Is there a simple way to do this using the Susy grid? I don't know how to nest an odd number of columns into an even number of total columns.
You can lie to Susy about your context, and it will divide the space into an many columns as you say are available — span-columns(1, 5) will divide the space into 5 units. The only issue is that your gutters will be sized differently in the 12-column grid and the 5 column grid, because they are calculated relative to the size of a column.
The simplest way to get different grids in the same container, and keep equal gutters across grids, is to move the gutters inside. Susy 1 doesn't have an option to automate that, but Susy 2 does. You'd want the inside-static option.
In Susy 1, you would have to set your gutters to 0 (with whatever units you are using), make sure you are using border-box box-sizing, and then add the gutters by hand.
#mixin static-gutters($width) {
padding-left: $width/2;
padding-right: $width/2;
}
.item {
#include span-columns(1, 5);
#include static-gutters(1em);
}
I am trying to make a fluid grid which at its maximum width has these values:
http://gridcalculator.dk/#/1224/12/40/56
When the browser is resized below 1264px (to allow for 20px padding on the body), everything (margins, gutters and columns) should scale down proportionally. Is this possible?
I have tried these approaches:
First try:
$total-columns : 12;
$column-width : 56px;
$gutter-width : 40px;
$grid-padding : 56px;
This doesn't work because the padding is fixed at 56px and doesn't scale down.
Second try:
$total-columns : 12;
$column-width : 4.575163%;
$gutter-width : 3.267973%;
$grid-padding : 4.575163%;
$container-width: 1224px;
This almost works but the grid padding is greater than the column width for some reason...
What am I missing? Thanks!
Susy 1.0 handles grid-padding differently from columns and gutters. In order to achieve what you are looking for, we would have to require special classes on both the first and last elements in a row. That is how Susy 0.9 worked, but it added a lot of complexity for a feature most people complained about. Now, with grid-padding added to the container rather than the elements, what you want is not possible.
The grid padding is now added directly to the container, without any math. In your first example, that means it doesn't flex. In your second example, it is interpreted by browsers as a percentage of the entire viewport, while gutters are a percentage of the container, thus resulting in different widths.
I want to decrease the space between components (DIV mainly) from 20px to 3px or maybe 5px. I know that I need to multiply 12 columns * 60 px and then 11 spaces * 20 px and this give me 940px. Also knows about the tool from Twitter to make those changes but I tried and my styles still gettin 20px of space. Any help on this?
You mean the grid columns? The values you want to change are:
#gridColumns
#gridColumnWidth
#gridGutterWidth
You can modify them in the LESS scripts or you can download the entire package with the variables already customized.
I'm developing a site using 960gs and I'm running into some troubles. I want to display a small (beveled) border between my columns. One way (i'm using now) is to give the main container a background-image, but this means I have to manually make images for 2, 3 or more columns. I rather set a background to the columns themselves, but this would mean that I have to get rid of the margin. What would be the neatest approach to handle this?
Thanks,
J.
go to the 960.gs site and click generate css. u can then edit the column width there and make the columns a little smaller to accommodate the bevel width on both sides
Yes, avoid using images whenever possible, specially for things like this. If for example, you have 3 columns, 300px each, 30px of margin between them:
column 1 - 300px wide
column 2 - 300px wide, margin:0 30px (left and right = 30)
column 3 - 300px wide
Just change the rules a bit and give that central column the borders, for example
column2 {border-left:1px dashed #ccc; border-right:1px dashed #ccc; margin:0 29px;}
By reducing the margin by 1 px you make space for the space now taken up by the borders