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...
Related
i try out susy and my first problems starts ;) at first i try to remove the gutter from an element with
#include span(no-gutters);
this are my settings
$susy: (
columns: 12,
gutters: 10,
global-box-sizing: border-box,
math: fluid,
gutter-position: inside,
debug: (
image: show
)
);
is this the correct way?
the mixin with "full" works just fine
#include span(full);
i found this at the docs
http://susydocs.oddbird.net/en/latest/toolkit/#span-mixin
scroll down to "Other Settings"
Use no-gutters to remove gutter output from an individual span, ...
a short codepen, maybe i'm doing at some other place something wrong ;)
http://codepen.io/destroy90210/pen/KVVWgL?editors=110
gregor ;)
The no-gutters key word does not remove existing gutters (maybe the docs should be more clear). It just keeps the span mixin from outputting new gutters. It removes the gutter-output, but it doesn't override gutters set somewhere else. To do that, gutters(0px) is a fine solution, as you found above.
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.
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.
I've defined a Susy-based responsive grid system handling 4 (mobile), 8 (tablet) and 12 (desktop) columns. My layout is having a fixed header bar which is divided in two sections "logo" and "toolbar".
The "logo" div is not nested within Susy's grid-container and is positioned absolute to always be on the very left.
The "toolbar" div contains the Susy grid-container and holds a search- and a logout-action - so far so good :)
When resizing the browser its in the nature of the grid to change total-columns when there's no more space for say 12 columns. This causes following problem:
The "logo" div gets overlapped by the grid since its positioned absolutely.
Is there a way to tell Susy to break the layout to 8 columns before the black border of the "logo" div is being reached?
Any advice would be highly appreciated. Thanks in advance.
#Eric: I managed to get it working. This is what is used:
#mixin update-container {
#include container;
#include susy-grid-background;
}
.page {
#include update-container;
#include at-breakpoint(865px 8 1149px) {
#include update-container;
}
#include at-breakpoint(1150px 12) {
#include update-container;
}
}
So I've explicitly described the min- and max widths to tell the columns when to change. Is this the "right" way to go or is there any more elegant way for solving this?
Thanks :)
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.