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.
Related
I'm building a website using susy fluid grid container. But some of my interface elements require fixed width. So having these settings:
$susy: (
columns: 12,
container: rem-calc(1680),
gutters: 28px/112px,
global-box-sizing: border-box,
gutter-position: split
);
I would like to easly get for example 8 column span, but staticly. So #include span(8 of 12) would result with precentage value, which is fine, but in certain cases I'd like to get the static value (based on container fixed max width ofcourse).
Is it possible?
In your susy global settings above you can add:
math: static
But in order to do so you need to include the column-width object as well.
So let's say you want to have each column with 40px width, using your example it goes like this:
$susy: (
columns: 12,
...
math: static,
column-width: 40px
);
When you do #include span instead of using % basis, it will use px base which as you want it as static.
Yes - you can pass in static as an argument for any Susy function or mixin where you want static output — #include span(8 of 12 static) — as long as you have a column-width or container set. (don't set both, or there's potential for conflicts)
update: oh, I see this was mentioned in a comment above...
How do I set up a grid with fluid columns and fixed gutters using Susy Next?
It looks like Gutter Position is the way to go, offering two settings that use padding for the gutters See Docs:
inside
Gutters are added as padding on both sides of a layout
element, and are not removed at the edges of the grid.
inside-static
Gutters are added as static padding on both sides of
a layout element, even in a fluid layout context, and are not removed
at the edges of the grid.
However, I've had no success using it. There is no mention of how it should be used in the Docs so far as I can see, so it seemed logical that the following would work:
$default-layout: (
global-box-sizing: border-box,
columns: 12,
container: rem-calc(1000),
gutter-position: inside-static, // Same with `static`
gutters: rem-calc(20)
);
However this causes an error as soon as #include span() is used:
Invalid null operation: "12 times null".
I've tried adding an explicit column-width:
column-width: 8.333333333%,
I am aware there are mixins for adding prefixed and suffixed padding manually, but I want this as a global setting which applies to all spans.
Essentially I'm after the equivalent of this (but with 12 columns):
.wrapper
{
width:100%;
float:left;
}
.column
{
width: 25%;
float: left;
padding: 20px;
box-sizing: border-box;
}
Codepen Here
Note: I'm aware of this question, but it references Susy 1.
I found a helpful Issue on Susy's Github, linking to a Sassmeister containing an example of what I'm after.
The following works for me:
$gutter-width: rem-calc(10);
$pointless-column-width: rem-calc(1);
// Default layout
$default-layout: (
global-box-sizing: border-box,
columns: 12,
container: rem-calc(1000),
gutter-position: inside-static,
column-width: $pointless-column-width,
gutters: $gutter-width/$pointless-column-width
);
$susy: $default-layout;
I don't understand why a column width needs to be set, and the actual value of it seems to have no effect at all (as long as it isn't null or zero). It just needs to be present.
More in this Github issue I raised including a Sassmeister.
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 have 4 elements with widths set at #include span-columns(3,12) this outputs each element at 25% which is fine, what I would also like to do is add margin to each element but doing this breaks the layout of these elements as the 25% width and % margin get added together. Can anyone advise how I can combine the margin in with the width?
SCSS
.m-info-col{
.col{
#include span-columns(3,12);
// tried this margin-right: columns(.5,12);
&:last-child{
#include omega;
}
}
}
If you have your container set up with 12 columns and have set $gutter-width to a value, then each column has $gutter-width gap (margin if you like).
If you implement susy grid backgrounds using:
$show-grid-backgrounds : true;
and inside your container context:
#include susy-grid-background;
You will see the gutters behind your design.
You can also add padding into the span-columns mixin (3rd param). This does not always work as expected though.
Another way I have used is the squish mixin and it adds columns as margins. This works quite well but I have not tried using 0.5 columns as the squish amount.
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.