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.
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 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);
}
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;
}
}
I have a sass mixin that generates the selector name:
#mixin rocks($name){
#{$name}-rocks {
#content;
}
}
called by invoking the mixin:
#include rocks(dave){
color: red;
}
I'd like to create a custom function that calls this mixin for me, to shorten the syntax down to:
rocks(dave){
color: red;
}
Is it possible to 1. call sass #functions outside of a selector? and 2. Invoke mixins from it? Something along the lines of:
#function rocks($name){
#include #rocks($name)
}
I'd prefer custom sass functions over custom ruby functions if possible. Thanks!
No, and no. Functions in Sass can only return values, they cannot be used to create CSS. That is what mixins are for: create mixins to call other mixins.
#function class($name) {
#return $name;
}
#mixin className($classname) {
.#{class($classname)} {
#content;
}
}
#mixin concatinate($classname2) {
&.#{class($classname2)} {
#content;
}
}
#mixin parent($classname1) {
.#{class($classname1)} & {
#content;
}
}
#mixin withparent($classname1) {
#at-root .#{class($classname1)}#{&} {
#content;
}
}
#include className(red) {
color: red;
#include className(check) {
color: green;
#include concatinate(bcd) {
color: green2;
ul {
li {
color: red;
& {
color: blue;
}
#include withparent(colorwe) {
display: none;
}
}
}
#include parent(efg) {
color: green1;
}
}
}
#include className(blue) {
color: blue;
}
}
#DonaldDuck thanks for the feedback. Personally I think that there is no need to call selectors through mixins, if someone try to do that it will be solved by these mixins used.
e.g.:
//call a class
#include className(one) {
properties..
}//o/p .one { properties..}
//add another class with existing one
#include className(one) {
#include concatinate(two) {
#include className(three) {
properties...
}
}
}//o/p .one.two .three { properties...}
//add parent to hierarchy
#include className(one) {
#include parent(two) {
properties..
}
}//o/p .two .one { properties..}
//add class with top of the hierarchy
#include className(one) {
#include className(two) {
#include withparent(three) {
properties...
}
}
} o/p .one.three .two { properties..}
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!