I am attempting to define some default behaviors for a grid and then override them at specific breakpoints. In the following example I would like the two divs to be stacked on top of each other, with slightly modified gutter settings from the default, and then at 800px and above I would like the divs to stack next to each other. The second part does not happen. Seems like some margin settings from the less than 800px scenario are being applied to the greater than 800px scenario. Please let me know how to code this and adhere to susy best practices.
HTML:
<div class="container">
<div class="primary">
<p>I am Primary</p>
</div>
<div class="secondary">
<p>I am Secondary</p>
</div>
</div>
SCSS:
$susy:
(
flow: ltr,
output: float,
math: fluid,
column-width: false,
container: 1200px,
container-position: center,
last-flow: to, columns: 12,
gutters: 1 / 4,
gutter-position: after,
global-box-sizing: border-box,
debug: (
image: hide,
color: rgba(#66f, 0.25),
spot: background, toggle: bottom right)
);
* {
#include box-sizing(border-box);
}
.container{
#include container;
}
.primary{
background-color: red;
}
.secondary{
background-color: blue;
}
// Mobile first layout with slightly different
// gutter settings from default
#include with-layout(12 0.5 split){
.primary{
#include span(12);
}
.secondary{
#include span(12);
}
}
// this layout should take over at 800px and above
// and share a row but instead boxes end up on different
// rows
#include susy-breakpoint(800px, $susy)
{
.primary{
#include span(first 6);
}
.secondary{
#include span(last 6);
}
}
I also made a codepen example that can be found here:
http://codepen.io/sbonham/pen/vLKvMJ
Yep, Susy is just writing CSS values, so you have to handle this the same way you would with plain CSS. Susy doesn't know your DOM, so it has no way of knowing that you want to override values that you set before. If we assumed you always want to override, we would have to output massively bloated code.
There are two solutions here:
Put your small-screen layout inside a max-width media-query, so it doesn't affect larger screens.
Or: override those global values inside the large-screen media-query. The problem to fix is the extra margins added by your initial split gutters.
I prefer the first solution, because I think overrides are ugly. But if you're dealing with some small browsers that doesn't support media-queries (do those still exist?), then you'll need to use the second solution. Try:
#include susy-breakpoint(max-width 800px, 12 0.5 split) {
.primary{
#include span(12);
}
.secondary{
#include span(12);
}
}
this seems like a hack, but hopefully you get something out of this! I added the following to your codepen:
.primary, .secondary {
display: inline-block;
margin: gutter(12);
width: span(12);
width:500px;
}
http://codepen.io/alexG53090/pen/wMWNzR
Related
I'm getting some strange behavior and was wondering if I am using a grid-column-row incorrectly.
I have the following HTML structure:
<div id="homeTop">
<!-- homeTop content such as headings and other nested rows and columns -->
</div>
<div id="homeMain">
<div id="homeMain-left"></div>
<div id="homeMain-right"></div>
</div>
<div id="homeBottom">
<!-- homeBottom content such as headings and other nested rows and columns -->
</div>
I then have the following SCSS to style this content:
#homeTop {
#include grid-column-row;
}
#homeMain {
#include grid-row;
}
#homeMain-left {
#include grid-column(12);
#include breakpoint(medium) {
#include grid-column(8/12);
}
}
#homeMain-right {
#include grid-column(12);
#include breakpoint(medium) {
#include grid-column(4/12);
}
}
#homeBottom {
#include grid-column-row;
}
When I view the page on a desktop-sized screen, there is one line of css that's causing the homeBottom div to float right, which is throwing off the layout. The line of CSS causing the issue is here:
#homeBottom:last-child:not(:first-child) {
float: right;
}
Since a column-row is meant to be a single element acting as a row and a column, in other words, a full width container, I'm confused why I would ever want it to have a float property. It seems that this line of CSS makes sense for columns, but not for column-rows, since the column-row behavior shouldn't depend on whether or not it's the last-child of its parent.
Is this a bug, or am I using the column-row incorrectly? I'm just trying to avoid setting homeBottom as a grid-row, and then including an extra html element inside of it just to act as a full-width grid-column. As you can see, this isn't necessary for homeTop, even though it's also using the grid-column-row mixin. This makes me think I may be using it incorrectly.
I guess another option would be to define my own my-grid-column-row mixin that includes the float declaration:
#mixin my-grid-column-row {
#include grid-column-row;
float: none !important;
}
But this seems like it shouldn't be necessary.
It looks like this is an issue with foundation:
http://github.com/zurb/foundation-sites/issues/8108
My workaround for now is to override the grid-column-row mixin with the following:
#mixin grid-column-row(
$gutter: $grid-column-gutter
) {
#include grid-row;
#include grid-column($gutter: $gutter);
float: none !important;
}
I don't know what is happening with the output of prefix, suffix and pad when using gutter-position: inside. For example:
$susy: (
columns: 12,
gutter-position: inside,
global-box-sizing: border-box
);
body {
#include pad(gutter());
}
The output is:
body {
padding-left: 1.6666666667%;
padding-right: 1.6666666667%;
}
And comparing with the squish mixin:
body {
margin-left: 0.8333333333%;
margin-right: 0.8333333333%;
}
The desired output is 0.8333333333% but pad still doesn't "split".
And they both together - locally should output the same value, but it doesn't:
body {
#include pad(gutter());
#include squish(gutter());
}
The output:
body {
padding-left: 1.6666666667%;
padding-right: 1.6666666667%;
margin-left: 0.8333333333%;
margin-right: 0.8333333333%;
}
What is happening?
These mixins are not meant for applying gutters (use #include gutter() or #include gutter(split) for that) — they are meant for additional margins and padding. In order to do that properly in most cases, they try maintain existing gutters in addition to any padding/margins you ask for. In your case, the gutters are being added to pad and not squish because your gutter-position is inside. You've asked for a gutter width, pad adds a gutter width, and you end up with double. If you want to use either of those mixins without having gutter widths included, use the no-gutters keyword (pad($width no-gutters)).
I am using Suzy for partial re-design of an existing website. In stage 1, I am designing the top part of the page: header, etc. and using the legacy code for the rest.
At this point I need to fit the new headers to the old page content. Unfortunately, the usable space I end up with is smaller than the width of the existing content.
Any idea on how to adjust the content space (the width available for content placed inside the container) of #legacy-content-wrapper to be 1002px wide?
Here's my code:
$total-columns : 12; // a 12-column grid
$column-width : 69px;
$gutter-width : 14px;
$grid-padding : 25px;
$container-style: static;
// the resulting grid is 1032px wide
#header-wrapper {
#include container;
.some-header-content { #include span-columns(3,12); }
.some-other-header-content { #include span-columns(9 omega,12); }
}
#page-wrapper {
#include container;
// legacy item, needs to be 1002px wide!
#legacy-content-wrapper {
#include span-columns(12 omega, 12);
// my children will be 982px at 100% width
// #include bleed($gutter-width) changes the width of the container
// but does not change the size of the usable space within it.
// how can I modify this item to have content swidth of 1002px?
}
}
This is what I am looking for:
<div id="page-wrapper">
<div id="legacy-content-wrapper">
<div>I'd like to be 1002 pixels wide!</div>
</div>
</div>
I ended up with:
#legacy-content-wrapper {
margin: 0 0 -$grid-padding;
padding: 22px 14px;
#include clearfix;
}
You can adjust any of the grid settings to fit within the required space. Probably the most straightforward way to trim 30px off your grid size would be from the grid-padding setting.
$total-columns : 12;
$column-width : 69px;
$gutter-width : 14px;
$grid-padding : 10px;
$container-style: static;
You could alternatively tweak the column-width or gutter-width settings to achieve the same number. It's hard to say the best approach without seeing the design. Either way should get you to 1002px.
I have created a jsFiddle to demonstrate this issue. It's just an example.
What I'm doing
Let's say I'm making a flexible grid. My HTML looks like this:
<div>
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
</div>
Four columns. I have two mixins and a global variable called $gutter. In my mixin, I call this variable to add gutters and change the widths.
$gutter: 1%;
#mixin col($width){
float: left;
width: $width - ($gutter * 2);
margin: 0 $gutter;
}
#mixin row(){
width: 100%;
overflow: hidden;
}
I use it like so:
div { #include row(); }
p { #include col(25%); }
What I want to do
Now let's say I want to add a second, different grid to the page. I create this HTML and give each grid and ID to differentiate them:
<div id="one">
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
</div>
<div id="two">
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
</div>
I want the second grid to have a different gutter width. Or, alternatively, no gutters.
#one { #include row(); }
#two { #include row($gutter: 0); }
This obviously does not work. Because the number of columns can be variable, I cannot add this $gutter:0 declaration to each instance of #include col(). It breaks the DRY principle and eventually (in complicated layouts) becomes unmaintainable.
The question
How can I allow a variable set in one mixin to filter down to another (on a child element)? I am aware that I could simply do this:
#mixin row(){
width: 100%;
overflow: hidden;
.col { etc etc etc }
}
But the class name may not always be .col. Does this make sense? I want the col() mixin to inherit a variable I pass through to the row() mixin. How?
I forked the jsfiddle from Sófka and extended it with the CSS Child selector (">") to target any tags in the row.
// Inside the row mixin
& > * {
#include col($columnWidth, $gutter);
}
Furthermore I added the column width attribute to the mixin and set a default gutter.
$defaultGutter: 1% !default; // Make sure the variable is set
#mixin col($width, $gutter: $defaultGutter){
...
}
See: http://jsfiddle.net/N44LW/12/
PS.:I'm not sure if I fully understood your question, but hopefully this helps.
From the Susy docs: http://susy.oddbird.net/guides/reference/#ref-grid-background
SUSY GRID BACKGROUND
Show the Susy Grid as a background-image on any container.
// susy-grid-background();
.page { #include susy-grid-background; }
If you are using the element as your Container, you need to apply a background to the element in order for this grid-background to size properly.
Snippets of my css:
$total-cols : 16;
$column-width : 4em;
$gutter-width : 1em;
$grid-padding : $gutter-width;
html { background: #fff no-repeat left top; }
.standard {
#include container;
#include susy-grid-background; /* Susy */
and in my Haml:
%body.standard
Whatever I've tried the grid always shows 12 columns. Would anyone be kind enough as to point me in the direction I need to go to get this debug tool to work?
susy (1.0.rc.1)
compass (0.13.alpha.0)
If you have some breakpoints, you also need to address these directly in order to change the number of columns $susy-grid-background shows:
.page {
#include container ($total-columns, $break1, $break2);
#include susy-grid-background;
#include at-breakpoint($break1) {
#include susy-grid-background;
}
#include at-breakpoint($break2) {
#include susy-grid-background;
}
}
$total-cols should be called $total-columns. The name of that variable changed in 1.0. The default setting is 12 columns, and you are not actually overriding that anywhere.