For some reason my grid is only showing the mobile (3 column) grid at all screen sizes. I am using the values below and don't understand what I am doing wrong. Any suggestions would be most welcome
#include add-grid(3);
#include add-grid(6 at 320px);
#include add-grid(12 at 740px);
#include add-gutter(1/3);
I am using the gems below
Using sass 3.3.14
Using breakpoint 2.5.0
Using singularitygs 1.2.1
It is not enough to define grid context.
In order for your responsive grids to work, you have to explicitly use them, e. g.:
#import "breakpoint";
#import "singularitygs";
#include add-grid(3);
#include add-grid(6 at 320px);
#include add-grid(12 at 740px);
#include add-gutter(1/3);
#include add-gutter(0.25);
.foo {
background-color: deeppink;
min-height: 10em;
// Mobile grid
#include float-span(1);
// Medium grid
#include breakpoint(320px) {
#include float-span(1);
}
// Large grid
#include breakpoint(740px) {
#include float-span(1);
}
}
Note that spans leak from smaller breakpoints into larger ones, and, unless overridden, they will mess your layout. In order to avoid that, set media queries with both min-width and max-width. Refer to Breakpoint documentation for details.
Related
How can i use SGS without every nested div spawning it’s own smaller grid? I get that it’s more powerful than that but for this case, specifically I’d like to set the width of deeply buried paragraph container to span 5 columns of the original .main-wrap div container’s grid.
for example if i do this to my paragraph which is nested 4 containers deep,
p.mynested_para {
#include grid-span(5, 1) /* i want this to refer to the .main container’s grid */
}
it comes out tiny! i’ve been looking through documentation but haven’t found how to do this yet.
You have to provide a context: how many columns are available for this element.
There are two ways:
1. In the grid-span mixin
The grid-span mixin accepts up to four arguments:
Number of columns to occupy.
Index of the column to start with.
Number of columns in the context.
Gutter ratio of the context.
So what you need to do is:
#include grid-span(5, 1, 8)
...where 8 is the number of columns available in the current context.
2. Using the layout mixin
If you have multiple elements to span in one context, it is tedious to mention the context for every of them.
So instead of this:
.foo { #include grid-span(5, 1, 8); }
.bar { #include grid-span(1, 6, 8); }
.baz { #include grid-span(2, 7, 8); }
You can do this:
#include layout(8) {
.foo { #include grid-span(5, 1); }
.bar { #include grid-span(1, 6); }
.baz { #include grid-span(2, 7); }
}
Documentation
Read about these features in more detail here:
https://github.com/at-import/Singularity/wiki/Spanning-The-Grid#context-overrides
So I've got my _grid-settings.css.scss defined as per the docs and in it, among some of the other default overrides is $max-width: 1200px;.
Part of the contents of my override:
$visual-grid: true;
$visual-grid-color: green;
$visual-grid-index: front;
$visual-grid-opacity: 0.2;
$column: 90px;
$gutter: 30px;
$grid-columns: 8;
$max-width: 1200px;
I know this is working because I'm using the visual grid as well and when I change $max-width to 100% I see that change occur.
The problem I'm having is that my #include outer-container on my body is not being respectful of this value, contrary to the docs, it seems not to notice it.
body {
#include outer-container;
}
When I change this to #include outer-container(1200px); the content then falls into place alongside the rest of the grid.
The problem was that I was also using Bitters and did not know that it has its own grid settings as well. I had to make sure that I uncomment #import "grid-settings"; from base/_base.css.scss as per the docs' instructions.
I have a 2 column grid and two divs which I both want to span a single column starting in the first column. I want these to stack on top of each other but they are being overlayed on top of each other. Here is the scss:
#first {
background: red;
height: 30px;
#include grid-span(1, 1);
}
#second {
background: red;
height: 30px;
#include grid-span(1, 1);
}
I've fixed it by inserting an additional div between these two divs and using #include clearfix; or alternatively I can fix it by using #include isolate-span(2,1,'both'); on the second div.
Is there a more 'best practice' way of clearing a row like this?
As discussed in this similar question, Singularity doesn't clear your floats for you when you're using Isolation output (isolation being when each float is isolated from one another's position, as opposed to float where they are not).
The short version of that answer is to use the CSS clear property, as explained very well in the Mozilla Developer Docs
This question already has an answer here:
Customizing the output of Compass sprites
(1 answer)
Closed 7 years ago.
Now if we generate sprite image using compass
#import "imgs/*.png";
#include all-imgs-sprites;
we ill gate in our .css classes like this
.imgs-<imagename>
is it possible to delete "imgs" part? I need only .<imagename>
In that case don't use the magical all. It's not as convenient, but works fine. Just #import the sprite and #include the individual images in custom classes:
#import "imgs/*.png";
.circle {
#include imgs-sprite('circle');
}
.square {
#include imgs-sprite('square');
}
Make your life simpler by DRYing it up:
#each $file in circle, square {
.#{$file} {
#include imgs-sprite($file);
}
}
Is it possible to override the default gutter value for a container with base values e.g. like that:
$total-columns: 12;
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: 10px;
So that you would be able to minimize the gutter from 20px to e.g. only 5px, or any other desired value, on demand.
.example{
#include squish(1,1);
li{
#include span-columns(2,10);
#include nth-omega(5n);
}
}
Is it possible via a mixin, would i have to place another container/layout or should i stick with plain CSS to solve that task? Thanks
Update:
To be more specific, i don't look for an exact sizing of the gutter (as far as i read so far, due to rounding, it would be difficult anyway), i just want to minimize the gutter and enlarge the column width indirectly.
https://dl.dropbox.com/u/8578/Boxes.png
At the moment i have squished 3 columns before and after the contained 7 columns and their gutters. So far the columns and its images are too small in width. Therefor i wanted to size down the gutter width and enlarge the column width indirectly.
The Susy settings look that way:
$total-columns: 24;
$column-width: 3%;
$gutter-width: 1%;
$grid-padding: 0;
A container width i haven't set so far since the container is inside a wrapper for the whole page.
.wrapper {
#include container;
overflow-x: hidden;
width:100%;
max-width: 100%;
}
The specific selector for the image matrix shown in the screenshot is the following:
.projects {
#include squish(3,3);
li {
#include span-columns(2,14);
#include nth-omega(7n);
}
}
You need any more details? So would you still recommend to use the with-grid-settings mixin to solve that problem? And is the set-container-width mixin really necessary? Thought if i set up things relative no absolute values should be necessary? Thanks Ralf
Update 2:
Ufff i tried the suggested little secret's approach mentioned in the comments beneath. But so far i was unable get a clean display, more like a messy chaotic "patchwork"... ;) Kind of confusing over all. Basically the articles author recommended 2 steps. First he added -100% margin-right for the content containing element and in the next step pushed the objects back into their places. My last setup in a long line of tries looks like that right now but still no solution in sight.
.example{
#include squish(3,3);
#include with-grid-settings($gutter: 0.1%){
margin-right: -100%;
li{
#include span-columns(6,18);
#include nth-omega(3n);
#include pre(9);
}
}
}
The margin-right i've placed within the with-grid-settings mixin in the containing element for "li" like suggested. But the question is where to place the pre mixin and especially which numbers it should contain (has the number to take the squish number in consideration too)? Is it the same value for all li or is a for loop necessary to push the images to individually to their horizontal positions ? And is the mixin order within the li element correct? Does it matter where it is placed? At the end or inbetween span-columns and nth-omega? Over all i am still confused. Grids, image matrices and Susy still keep my brain spinning. :/
Update 3:
Thanks! I finally got it working. In the end i would have two questions about my solution:
.test{
#include with-grid-settings($gutter: 0.1%){
li{
margin-right: -100%;
float:left;
#include span-columns(6,18);
#include nth-omega(3n);
$count:0;
#for $i from 1 through 9 {
&:nth-child(#{$i}) {
$count: $count + 1;
#include push($count);
#if $count == 2{ $count: 0;}
}
}
}
}
}
Would there be a more elegant way for the layout of the for loop? And second why is it possible that this version as well as a version when i comment out the $count: $count + 1; statement lead to the same visual result? Actually commented out there isn't a second and third count up for the push variable. Any idea why that works anyway without the $count: $count + 1;? Thanks!
Update 4:
I played around a little bit more and as it turns out the following version works like a charm. It seems the $count variable isn't necessary at all, as well as the incremental growing of the value contained within the push/pre mixin. A simple 0 did the trick.Thanks again for the help!!!
.test{
#include with-grid-settings($gutter: 0.5%){
li{
margin-right: -100%;
#include span-columns(6,18);
#include nth-omega(3n);
#for $i from 1 through 9
{
&:nth-child(#{$i})
{
#include push(0);
}
}
}
}
}
Update 5
I already mentioned in my last comment beneath that the example shown in update 4 hasn't worked as good as it supposed to work at the first look. I tried now to completely rebuild the suggestion from the Palantir article. Underneath is the scss parts for the 7x4 as well as the 3x3 matrix shown in the video: https://dl.dropbox.com/u/8578/matrix.mov
.7x3{
#include with-grid-settings($gutter: 0.25%){
li{
margin-right: -100%;
#include trailer(1);
#include span-columns(2,14);
#include nth-omega(7n);
$y: 0;
#for $x from 1 through 28
{
&:nth-child(#{$x}){
margin-left: ($y * columns(2,14)) + ($y * gutter(14));
$y: $y + 1;
#if $y > 6{
$y: 0;
}
}
}
}
}
}
.3x3{
#include with-grid-settings($gutter: 1%){
li{
margin-right: -100%;
#include trailer(1);
#include span-columns(6,18);
#include nth-omega(3n);
$j: 0;
#for $i from 1 through 9
{
&:nth-child(#{$i}){
margin-left: ($j * columns(6,18)) + ($j * gutter(18));
$j: $j + 1;
#if $j > 2{
$j: 0;
}
}
}
}
}
}
At the first look the matrices look broken but if you take a closer look at the inspector within the video, it appears that each element is pushed to its correct horizontal position in both matrices. Only problem is that each li is contained in separate lines. This is the closest version i was able to get. :/ Right now i am out of ideas how to put those pieces together to get to a proper matrix. I tried more or less ever possibility with float as well as display properties. But no luck. Anyone has a hint perhaps?
You can use with-grid-settings() (reference docs) to wrap your code:
Since you don't want to change the actual container width, we can leave that alone. It's up to you if you want the .projects padding (from squish()) to be influenced, but I'm going to assume you don't. Here it is, just changing the $gutter-width for the lis:
#include with-grid-settings($gutter: .5%) {
li {
#include span-columns(2,14);
#include nth-omega(7n);
}
}
That's it. If you do want anything else to use the adjusted settings, simply move them inside the mixin.