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;
}
}
Related
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;
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 have this susy settings:
$susy: (
columns: 8,
gutters: 1/4,
global-box-sizing: border-box,
);
Sometimes I need different gutters instead 1/4.
See image for example:
And the code:
.wrap {
#include clearfix;
#include container (500px);
.box-1 {
#include span(4 of 8);
}
.box-2 {
#include span(4 of 8 last);
}
.box-3 {
#include span(4 of 8 wide no-gutter);
}
.box-4 {
#include span(4 of 8 last);
}
.box-5 {
#include span(3.95 of 8 wide no-gutter);
}
.box-6 {
#include span(4 of 8 last);
}
}
I tried this without success:
#include span(4 of 8 wide (gutter-override: 2px));
I found a way to fix it but not if it is correct
#include span(3.95 of 8 wide no-gutter);
Thanks
You can change the layout like this
#include with-layout(12 1/8 fluid float after) {
.box-5 {
#include span(2 of 12);
}
.box-6 {
#include span(10 of 12 last);
}
}
Where the 1/8 is the gutter width.
Another solution:
.box-5 {
float:left;
width: span(4 of 8 wide) - 1%;
}
.box-6 {
float:right;
width: span(4 of 8);
}
Can anyone help me with Singularity's isolation-span method? It does not actually clear. I placed an article/div (class .special) with isolation-span(4, 3, 'both') and it is overlaid by the two columns (using grid-spans) which should follow. The 'both' is meant to clear any following divs, but doesn't. I had to add an empty div (id = spacer) after the isolation-span and even then had to give that empty div an isolation-span(1,1, 'both') to make it all clear. I have worked away at this using different positions for the breakpoints and this is the only way to get it to work. I have used 'Bundler' to install Singularity 1.1.2 and the various dependencies as Ruby 2.0 gems. I include the .scss. The .left_inset works fine; it's the .special that won't work without my workaround. The HTML is just a few left and right paragraphs with lorem fillers, with grids of 3, 8($breaktab) and 12($breakdesk). Everything works except the .special isolation-span.
#main {
#special {
border-left: 1px solid white;
border-right: 1px solid white;
padding: 10px;
}
#include breakpoint($breaktab) {
.left {
#include grid-span(4, 1);
}
.right {
#include grid-span(4, 5);
}
.left_inset {
#include isolation-span(3, 2, 'both');
}
.special {
#include isolation-span(4, 3, 'both');
}
}
#include breakpoint($breakdesk) {
.left {
#include grid-span(6, 1);
}
.right {
#include grid-span(6, 7);
}
.left_inset {
#include isolation-span(5, 2, 'both');
}
.special {
#include isolation-span(6, 4, 'both');
}
}
}
#spacer {
#include breakpoint($breaktab) {
#include isolation-span(1, 1, 'both');
}
}
Answer may be to make the .left block into a float-span like this:
#include breakpoint($breaktab) {
.left {
#include float-span(4, 'first');
}
.right {
#include grid-span(4, 5);
}
.left_inset {
#include isolation-span(3, 2, 'both');
}
.special {
#include isolation-span(4, 3, 'both');
}
}
That then compiles correctly and forces the blocks after the isolation-span to clear.
The issue appears to be because you are wrapping both in quotes, which is printing it out as a string. Unquoting them prints them as values and clear works fine. Please file an issue letting us know about the quoting issue and we will take a look at it before Singularity 1.2.0 is released.
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!