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.
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.
I do want my website to stay responsive, the sidebar should still go under the content when the screen is too small, but there's a few span* classes I'm using that I don't want going to 100% width when the screen is too small. Is there a way I can still use the span* class (it's a really easy way to position things) but explicitly say that they should not be responsive; either on the container, or row, or each span, whatever works.
a bit short for explanation, code is missing.
have you tried using selector: span[class*="span"]{} to filter the class you want ?
I don't think you can have it both ways.
Either your bootstrap grid is responsive or it isn't.
This is because all bootstrap knows is whether or not the responsive initialization snippet has been called. If it has, then it changes the spans to make them responsive.
If you want a way around this, I would copy the styles from the span class that you want applied to your unresponsive sections and then make a new class with those styles.
So, if you wanted to make an additional unresponsive .span3 you could just copy the relevant styles and make your own classes. You would need to set the width, float, and margins. In this case width: 220px;, float: left; , and add a .margin-right: 20px;. The widths can be found in bootstrap.css file.
I also attached a fiddle for reference -- http://jsfiddle.net/c86kE/
.main {
background: green;
#include span-columns(9,12);
}
Is there an easy or inbuilt way in Susy to include , say, a 10px padding inside .main keeping its initial width intact so that the green background doesnt bleed ?
Thanks in advance, and sorry if a version of this question has been asked before.
There are two options:
Use box-sizing: border-box; - this is now supported by all the major browsers, and Compass has a handy box-sizing() mixin to take care of prefixes for you. If you use it everywhere (like I do), it can change the size of a Susy container, but Susy comes with the handy mixin to fix all that for you. Simply add this at the root, before you set your containers - it will set the box model, and let Susy know to adjust for it:
#include border-box-sizing;
Use the $padding argument (docs) to the span-columns mixin. With this approach you are limited to the same units you used for declaring your grid - and just like those, these will be converted to fluid values if they aren't fluid already.
You can see why option #1 is way better, as long as you are OK leaving IE7 out of the fun.
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.