I want to build a grid using the mixins for XY-grid in Zurb Foundation 6.6, but I run into problems when I want to set the negative margins for the grid itself only on specific breakpoints.
Using the mixin xy-gutters() creates margins for each breakpoint, and I cannot choose to use margins just for some of them.
In the example below I want breakpoint(medium) to have a cell without margin gutters.
How is this meant to be done?
.hero {
&__container {
#include xy-grid-container;
}
&__grid {
#include xy-grid();
// This generates gutter margins for all breakpoints so I cannot choose to have without gutters for some breakpoints
#include xy-gutters(
$gutter-type: margin,
$gutter-position: right left,
$negative: true
);
}
&__cell {
#include xy-cell($size: 4, $gutter-type: margin);
#include breakpoint(medium) {
#include xy-cell($size: 6, $gutter-type: none);
}
#include breakpoint(large) {
#include xy-cell($size: 4, $gutter-type: margin);
}
}
}
I would use the
#include xy-cell-gutters($gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
mixin on your .cell
Set gutters to a px or rem value or Sass map;
Related
I've upgraded to Bourbon Neat v2 which includes the addition of gutters on the left and right side of the container grid.
In v1 I could use block-collapse in the span-columns mixin to eat the gutters either side of the element, however, in v2 this mixin has been removed. There is a grid-collapse function in v2 but that doesn't quite work as I expected. My current markup is as below (reduced for brevity):
.wrapper {
#include grid-container; // columns: 12, gutter: 1rem
#include grid-visual(lime);
}
.sidebar {
#include grid-columns(2 of 12);
}
.container {
#include grid-columns(10 of 12);
}
How do I remove the outer gutters, an collapse the gutter between column 2 & 3 so that my sidebar and container sit next to each other?
You were correct in looking at the grid-collapse mixin to take care of this.
To do a flush grid like the one you described, your markup would be:
.wrapper {
#include grid-container;
overflow-x: hidden;
}
.wrapper-inner {
#include grid-collapse;
}
.sidebar {
#include grid-column(2 of 12);
}
.container {
#include grid-column(10 of 12);
}
just expanding on the top answer, you need to also make sure to include grid-collapse within grid-media declarations when using multiple grids due to the fact that grid-collapse is based on your gutter values for each grid.
.wrapper {
#include grid-container;
}
.wrapper-inner {
#include grid-collapse;
#include grid-media($sm-neat-grid, $md-neat-grid, $lg-neat-grid) {
#include grid-collapse;
}
}
.sidebar {
#include grid-column(1 of 1);
#include grid-media($sm-neat-grid, $md-neat-grid) {
#include grid-column(3 of 12)
}
#include grid-media($lg-neat-grid) {
#include grid-column(5 of 15)
}
}
.container {
#include grid-column(1 of 1);
#include grid-media($sm-neat-grid, $md-neat-grid) {
#include grid-column(9 of 12)
}
#include grid-media($lg-neat-grid) {
#include grid-column(10 of 15)
}
}
by the way, my example is using a modified version of grid-media that allows declaring multiple grids that will share the same values but differ in gutter sizes:
// overrides bourbon-neat grid-media to include more than one grid
#mixin grid-media($grids...) {
#each $grid in $grids {
$_media: _retrieve-neat-setting($grid, media);
$_query: _neat-parse-media($_media);
#media #{$_query} {
$_default-neat-grid: $neat-grid;
$neat-grid: map-merge($neat-grid, $grid) !global;
#content;
$neat-grid: $_default-neat-grid !global;
}
}
}
can't for the life of me remember where I got it from but I've used it in all my projects
I've set global settings for susy:
$susy: (
columns: 8,
gutters: 1/4,
);
I want to override the gutters for a couple of span
.tile-left {
#include span(1 of 2 1px);
}
.tile-right {
#include span(1 at 2 of 2 1px);
}
Generated css
.tile-left {
width: 44.44444%;
float: left;
margin-right: 11.11111%;
}
.tile-right {
width: 44.44444%;
float: right;
margin-right: 0;
}
I've also tried these and these don't seem to be working either
#include span(1 of 2 no-gutters);
&
#include span(1 of 2 (gutter-override: 1px));
Looks like the "1px" argument didnt work because gutters can only be defined by a ratio value; Documentation
Furthermore, I've solved my issue of wanting fluid elements and a static gutter by
doing this:
.tile-left {
#include span(1 of 2 (gutter-override: no-gutters, gutter-position: inside-static));
border-right: 1px solid #E5E5E5;
}
.tile-right {
#include span(1 of 2 (gutter-override: no-gutters, gutter-position: inside-static));
}
It looks like when you remove the gutters by passing "gutter-override: no-gutters" it calculates the width with gutters, but then removes the margins; By putting the gutters/margin inside by passing "gutter-position: inside-static" the with is calculated to span to 100% without gutters.
It's not entirely clear in your post what you are trying to achieve. #include span(1 of 2 no-gutters); should remove the gutter output, but won't change the math. If your goal is to change the math so there are no gutters, #include span(50% no-gutters); might be the best option. Or #include span(1 of 2 (gutters: 0)); should give you the same output.
UPDATE: even #include span(1 of 2 0); seems to work. The 0 is understood as a valid gutter ratio.
In following code sample I am trying to define width of .l-branding div to 5 grids on mobile devices and changing the width to 3 grids on breakpoint $tab. With in the breakpoint its working as desired but for mobile devices the grid-span is not making any changes at all. Similar is the case with .l-region--navigation and .l-region--header
Am I doing some thing wrong ?
.l-branding {
#include grid-span(5, 1); //mobile
background:url(../../../images/bg-footer-credits.png) center center;
text-align:center;
#include breakpoint($tab){
#include grid-span(3, 1);
height:104px;
}
}
// end l-branding
.l-region--navigation {
#include grid-span(7, 6); //mobile
#include breakpoint($tab){
#include grid-span(6, 4);
}
}
.l-region--header {
#include grid-span(12, 1); //mobile
clear:both;
#include breakpoint($tab){
#include grid-span(3, 10);
clear:none;
}
}
Until now we have had a post-build step that uses the Sass gem on the command line to generate our global.css.
I'm swapping over to Cassette, which uses Cassette.Sass, which uses SassAndCoffee, which apparently uses Sass 3.2.0 :-)
However when Cassette does the compiling, I get weird nulls in the generated css. Judging by how the page looks, this is invalid css and screwing up the design.
For eg:
.pure-container {
padding: 31px null;
padding: 1.714rem null;
padding-right: 0.9375%; }
I thought it may be down to a version difference of Sass (as we were using the sass gem for 3.2.8), but if I use the Sass gem version 3.2.0 from the command line, I get the same (valid) output as before I started using Cassette, without nulls:
.pure-container {
padding: 31px;
padding: 1.71429 rem;
padding-right: 0.9375%; }
So to summarize, Cassette.Sass using Sass 3.2.0 is not compiling my CSS in the same way as the Sass 3.2.0 Gem from the command line. What should I check?
I am not a front-end dev and not very familiar with scss, but if it's relevant, this is what our global.scss looks like:
// ----- SCSS Helpers -----
#import "imports/_mixins.scss";
#import "imports/_variables.scss";
// ----- Pure Grid -----
#import "imports/_extend-pure.scss";
// ----- Theme -----
#import "imports/_typography.scss";
#import "imports/_helpers.scss";
#import "imports/_buttons.scss";
#import "imports/_forms.scss";
#import "imports/_modules.scss";
// ----- Media Queries -----
#import "imports/_media-phone.scss";
#import "imports/_media-tablet-query.scss";
#import "imports/_media-desktop-query.scss";
And all those imported files exist and there are no SASS compiling exceptions.
The only mentions of 'null' that I can find is in _mixins.scss:
#mixin size($property: null, $units: 4, $importance: null, $mixin: null) {
// This mixin will calculate the rem values defined by design (6px's in mobile and scaled up for desktop)
// Because IE8 and below don't support rem, we insert the px equivalent for the desktop sizes just before.
$pixel-size: round(((6*$units)*((1/$font-size-mobile)*$font-size-desktop))) + px $importance;
$rem-size: ((1/$font-size-mobile)*(6*$units)) + rem $importance;
#if $mixin == min-height {
#include min-height($pixel-size);
#include min-height($rem-size);
}
#else if $mixin == max-height {
#include max-height($pixel-size);
#include max-height($rem-size);
}
#else {
#{$property}: $pixel-size; // This number is rounded to the nearest whole number to avoid issues with IE7
#{$property}: $rem-size;
}
// EXAMPLE OF HOW TO USE
// #include size(line-height, 4, !important); <-- important is optional
// EXAMPLE OF HOW TO USE 2
// #include size($mixin: min-height, $units: 4);
}
Cassette is otherwise quite awesome and I would love to use it, but this is quite a big barrier! Any thoughts appreciated, including where else I could post this in the hopes of an answer that might help! I am aware that there are other options for compiling Sass, and if I don't get much joy here I'll dump Cassette in favour of MS.Web.Optimization in combination with NSass, but I really want to get Cassette working if I can!
Thanks,
Mark.
null is coming from the default value of $importance.
Put that in an if statement and only apply it when the value is not the default null.
Thanks
#mixin size($property: null, $units: 4, $importance: null, $mixin: null) {
// This mixin will calculate the rem values defined by design (6px's in mobile and scaled up for desktop)
// Because IE8 and below don't support rem, we insert the px equivalent for the desktop sizes just before.
$pixel-val: round(((6*$units)*((1/$font-size-mobile)*$font-size-desktop)));
$rem-val: ((1/$font-size-mobile)*(6*$units));
#if $importance == null {
$pixel-size: $pixel-val + px;
$rem-size: $rem-val + rem;
} #else {
$pixel-size: $pixel-val + px $importance;
$rem-size: $rem-val + rem $importance;
}
#if $mixin == min-height {
#include min-height($pixel-size);
#include min-height($rem-size);
} #else if $mixin == max-height {
#include max-height($pixel-size);
#include max-height($rem-size);
} #else {
#{$property}: $pixel-size; // This number is rounded to the nearest whole number to avoid issues with IE7
#{$property}: $rem-size;
}
// EXAMPLE OF HOW TO USE
// #include size(line-height, 4, !important); <-- important is optional
// EXAMPLE OF HOW TO USE 2
// #include size($mixin: min-height, $units: 4);
}
I tried to build the solution above and i had errors. It seems that setting variables in an if statement keeps those variables private.
here is another solution with anotated comments
#mixin size($property: null, $units: 4, $importance: false, $mixin: null) { // change default value of importance to false
$pixel-size: round(((6*$units)*((1/$font-size-mobile)*$font-size-desktop))) + px;
$rem-size: ((1/$font-size-mobile)*(6*$units)) + rem; // remove importance from here
#if $mixin == min-height {
#include min-height($pixel-size);
#include min-height($rem-size);
}
#else if $mixin == max-height {
#include max-height($pixel-size);
#include max-height($rem-size);
}
#else {
#if $importance { // do the test here
#{$property}: $pixel-size $importance;
#{$property}: $rem-size $importance;
} #else {
#{$property}: $pixel-size;
#{$property}: $rem-size;
}
}
}
I'm beggining with singularitygs (and grids systems), and of course I run into problems. Here it is.
I have this HTML markup:
<div id="wrapper">
<div id="main">
<div id="first-column">content</div>
<div id="second-column">content2</div>
</div>
</div>
I have setup this assymetric grid:
$grids : 97px 263px 263px 97px;
$gutters : 70px;
And this scss:
#wrapper {
#include background-grid;
width: 930px;
margin: 0 auto;
}
#main {
//#include background-grid;
#include grid-span(2, 2); //this element is spanned acros two columns in the middle
}
#first-column {
#include grid-span(1, 1); //should be spanned acros first column in #main
}
#second-column {
#include grid-span(1, 2); //this element should be spanned acros second column in #main
}
The question is how can I makes the inner divs be aware of the fact that #main should have only two columns (and one gutter). Instead it looks like that the #main inherit the default grid setup.
I've tryed lots of options like changing #main grid via #include layout. Or tell the columns to adapt to the correct context by adding #include grid-span(1, 1, 2); (the third number should tell the div that it's in the default grids context.
But with no avail.
I suspect that the problem is in my px definition of the default grid. Because the inner divs gets lots of time only 1.356% wide, and this look kind of suscpicious to me. Am I right? What can I do?
Thanks for any suggestion.
EDIT:
I try add the exact px dimension and in combination with adding the nested context its looks like its supossed, but I think thats its not how it should work??
#block-formblock-contact-form {
#include grid-span(1, 2, 2);
width: 263px;
}
#block-system-main {
#include grid-span(1, 1, 2);
width: 263px;
}
The issue that you're running in to is that, while you've changed your grid to a two column symmetric grid, you haven't changed your gutters in proportion. What Singularity is seeing with how you've currently set it up is that you've got a 2 column grid, each column is width 1, and a gutter of width 70. Now, there are two ways you can solve this. The first is to explicitly state what your sub grid is in relation to the main grid. That would look like the following:
#first-column {
#include grid-span(1, 1, 263px 263px);
}
#second-column {
#include grid-span(1, 2, 263px 263px);
}
or, with #include layout
#include layout(263px 263px) {
#first-column {
#include grid-span(1, 1);
}
#second-column {
#include grid-span(1, 2);
}
}
The second option is to set up the correct ratio for columns to gutters when using sub grids. Singularity works best when it's dealing with small ratios instead of large "absolute" values.
#include layout(2, (70px / 263px)) {
#first-column {
#include grid-span(1, 1);
}
#second-column {
#include grid-span(1, 2);
}
}
Hope this helps!