How do I get nested grid with Singularity?
I've made a simple grid and need nested grids with floating method.
My sample: http://sassmeister.com/gist/7326030
You should understand two things:
Singularity applies relative widths to columns.
All it does is generating CSS, completely unaware of your HTML structure.
So, if you apply a float span to a class, it will get width: 33%, for example. Every element with that class will have width: 33%, regardless of its nesting. This means that you can't create nested grids with a single level of non-semantic classes. You'll need two or more levels:
span1, span2, span3...
grid1-span1, grid1-span2, grid1-span3 ... grid2-span1, grid2-span2, grid2-span3...
This results in bloated CSS. That's why the non-semantic approach should never be used when your environment allows you use the semantic approach (and Sass does lets you do that with little effort):
Structure:
#page
#foo.container
.subcontainer
.column Foo
.subcontainer
.column Bar
#bar.container
.column Baz
.column Quux
Styles:
$grids: 12
$gutters: 0.2
#foo
.subcontainer
+float-span(6)
&:nth-child(2n)
+float-span(6, last)
.column
+layout(6)
+float-span(3)
&:nth-child(2n)
+float-span(3, last)
#bar
.column
+float-span(6)
&:nth-child(2n)
+float-span(6, last)
Demo: http://sassmeister.com/gist/7360259
Also note two things:
You don't need to span the first-level container, it's already 100% wide.
You should be very careful with fixed margins in nested grids.
Related
I have elements throughout my application that can have one of three colors.
Right now I put a class on each element .color1, .color2 or .color3.
And then in the css declerations I do like the following (depending on element):
.color1 .special_element {background-color: $color1;}
.color2 .special_element {background-color: $color2;}
.color3 .special_element {background-color: $color3;}
The above pattern is repeated many times.
Is there any way to make the code above more dense, e.g. with some sort of conditional and argument?
Please look at this gist:
http://sassmeister.com/gist/6d575ec85663865fa567
There you can see a placehold.it thumbnail grid realized via float-span
What i need now is:
The padding-left of the first .item in each row should be 0
The padding-right of the last .item in each row should be 0
this would then end up in the thumbnail grid perfectly aligning with the rest of the content (e.g. the lorem ipsum text)
What is the beast way to achieve this with singularitygs?
UPD 2014-07-21
what i need can be seen in this screen:
i don't need another padding style, i need the padding from the first and last item in each row removed. this can't be done via css, because the sass calculations would be wrong.
UPD 2014-07-30
based on various sources, i managed to establish this mixin:
#mixin thegrid($layout, $cols, $el: "div", $thegutter: .1){
#include layout($layout, $gutter: $thegutter) {
#for $i from 1 through $cols {
#if $i == 1 {
#{$el}:nth-child(#{$cols}n+#{$i}) {
#include isolation-span(1, $i, left);
}
}
#else if $i < $cols {
#{$el}:nth-child(#{$cols}n+#{$i}) {
#include isolation-span(1, $i, none);
}
}
#else {
#{$el}:nth-child(#{$cols}n+#{$i}) {
#include isolation-span(1, $i, right);
}
}
}
}
}
which can be called e.g. via:
$layout: 1 1 1;
#include thegrid($layout, 3, $el: ".item");
an example can be seen here: http://sassmeister.com/gist/7a45960747ad3d4bbf56
Not sure what you mean.
You're applying gutters with an absolute value. This is what Singularity calls fixed gutters.
Singularity realizes fixed gutters by applying padding to grid elements.
Padding can be applied in two styles:
split: the gutter size is divided by two and the resulting value is applied as left and right padding to every grid item.
opposite: the value of gutter size is applied as right padding to every item except items occupying the last column.
So if you are unhappy with split gutters, switch to opposite gutters. That's the default behavior, so you can simply comment out #include add-gutter-style('split');.
If you are unhappy with either gutter style, well, you can manually remove padding that you don't need. This doesn't make a lot of sense because if you apply zero padding to items other than occupying the first and the last columns, you will distort your grid. And if you apply them only to the items occupying the first and the last columns, you basically get the same setup as with opposite gutter styles.
You might get better help if you make a pencil drawing of desired layout.
UPD 2014-07-21
OK, now it's clear what you mean.
So you basically want split gutters for the outer level and opposite gutters for the inner level. You're already using the layout() mixin required to override grid settings, so you could just tell it to override gutter styles, e. g.:
#mixin layout(2, $gutter-style: 'opposite') {
Unfortunately, due to the fact that Singularity creates fixed gutters via padding, they only play nice in split mode. In opposite mode fixed gutters produce uneven columns.
So you'll have to use relative gutters:
#mixin layout(2, 0.1, $gutter-style: 'opposite') {
There are a couple of things you have to keep in mind:
Spanning the last item in each row separately.
With the opposite gutter style, the last item in each row is special: it contains no right gutter. So you will have to tell Singularity which item is the last one in row.
To do this, we will use the :nth-child(Xn + Y) selector, where X is the number of items in the row and Y is the number of target item in the row. As we're targeting the last item, X and Y will be equal:
#include float-span(1);
&:nth-child(4n + 4) {
#include float-span(1, last);
}
Isolating media queries.
Once you do that for each breakpoint, you'll end up with styles applied to different items in different breakpoints. Those styles will not be overridden and thus will leak from smaller to larger breakpoints, breaking the layout.
You could override them manually, but that's a lot of thankless job. Instead, isolate your media queries so that styles don't leak:
$beforeMediumBreakpoint: max-width 799px;
$mediumBreakpoint: 800px;
// Mobile view (formerly without a media query)
#include breakpoint($beforeMediumBreakpoint) {
Demo: http://sassmeister.com/gist/dd9f1af025900d7e63db
PS A piece of advice from me: don't use fixed gutters and split mode. Use fluid gutters and the default opposite mode. This will save you from a lot of trouble! You can always simulate split gutters by applying padding to the outermost container.
You can do some math to calculate relative padding for the container that will be equal to the gutter between grid items! With the magic of math, you can even apply bottom margins to grid items equal to grid gutters, producing a beautiful uniform thumbnail grid.
I've created a nifty extension Singularity Quick Spanner that can reduce the amount of work you need to do to set up thumbnail grids. See it in action (note vertical gutters equal to horizontal gutters).
Using the Singularity Grid System:
I have a nested grid. Nothing fancy, just 2 column. Code is like this:
main-content { #include grid-span(8,1); }
sidebar { #include grid-span(4,9); }
It renders fine, but I keep getting undesired margins. The main content has a small margin-left and the sidebar has a small margin-right. I want these to have zero margins on the edge, similar to declaring main-content as "alpha" and sidebar as "omega."
Here is the CSS (at full desktop width):
main-content { width: 65%;float: left;margin-right: -100%;margin-left: 0.83333%;clear: none;}
sidebar-first {width: 31.66667%;float: right;margin-left: 0;margin-right: 0.83333%;clear:none;}
I didn't think this was default Singularity behavior, to add those small margins on the outer edges of my grid. Or is it? Can I get around it somehow? (besides just manually adding margin-left:0 and margin-right:0). Of course if there's margin on the outer edges, the total width of each DIV should increase as well (e.g. - for the main-content, instead of 65%, it'd be 65.83333)
Given the following HTML structure:
<div id="a">
A
<div id="b">
B
</div>
</div>
...and the following Singularity SCSS:
$grids: 6;
$gutters: .1;
$gutter-styles: 'split';
div#a {
#include grid-span(5,2)
}
div#b {
// #todo: position and width.
}
...I want to create a layout like this, where B is pulled left, out of its container A, by 1 column, and spans the 2 leftmost columns:
-----------
| A |
----- |
| B | |
----- |
| |
-----------
Of course I can do the math myself, but I feel like this should be possible using Singularity mixins and functions (after all, that's why I'm using a grid framework :-)) However, I can't get the dimensions and positioning of B correct.
Which Singularity mixins and/or functions do I use to set the width (column span) and position (negative margin-left) of div#b?
The answer highly depends on what flow you want inside the #A block.
Keeping the flow
The simpliest thing to do is to pull the #B block outside with a negative margin.
To do that, you should not use the grid-span() mixin. Instead, use the width and margin CSS properties. Values for those properties can be calculated with the column-span() and gutter-span() helper functions.
Those helper functions accept the $grid argument which stands for grid context. You should provide the grid context of the #A block, which is one column less than the main grid.
$grids: 6
$gutters: .1
$gutter-styles: 'split'
$a-columns-width: 5
#a
+grid-span($a-columns-width,2)
overflow: visible
#b
width: column-span(2, 1, $grid: $a-columns-width)
margin-left: - column-span(1, 1, $grid: $a-columns-width) - gutter-span($grid: $a-columns-width)
Please have a look at the demo: http://sassbin.com/gist/6676220/
Removing #B out of the flow
But the #B block is not taken out of the flow. It still occupies the whole width of the #A block, so you can't put anything to the right of #B.
If you need to put some text and stuff to the right of #B, you should consider using another approach. Absolute positioning is what comes to my mind.
The solution will be more complicated. If you want me to come up with one, please explain your task in more detail. Provide a graphical template, maybe.
You will also have to use some trick to prevent #A's content from being covered by #B.
Flat HTML structure makes things simple
Also, why do you need the nested structure (#B inside #A) in the first place? If you make the structure flat, it becomes plain simple to position the blocks:
#a
+grid-span(5,2)
#b
+grid-span(2,1)
margin-top: 4em
Demo: http://sassbin.com/gist/6676193/
#A's content appearing under #B is still an issue though.
PS If you're not satisfied with the answer, please explain the task in more detail and provide a graphical illustration of the desired page with all #A's contents.
Something like this seems like what you are looking for: http://sassmeister.com/gist/6663743
Im trying singularity for the first time, and I'm trying to recreate a grid I have. Simple one.
This is a simple structure, for the test:
<header>
header
</header>
<main>
main content
</main>
<aside>
aside
</aside>
<footer>footer, nav, social icons etc</footer>
So in a 12 col grid, the header is full width, the main is 9 cols width, the aside is 3 cols width and the footer is full 12 cols.
Anyway, the inconsistency is this: the header, the aside, and the footer have float:right, but the main is float:left, so it gets out of the flow of the document.
This is the grid:
/* grid */
$grids: 3;
$grids: add-grid(5 at 500px);
$grids: add-grid(7 at 768px);
$grids: add-grid(12 at 1024px);
$gutters: 1/3;
This is the rest:
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #e1e1e1;
color: #333;
}
.container {
min-height: 100%;
margin: 0 auto;
#include background-grid;
}
/* main layout */
header {
#include grid-span(3, 1);
background: red;
#include breakpoint(1024px) {
#include grid-span(12, 1);
}
}
main {
#include grid-span(3, 1);
background: green;
#include breakpoint(1024px) {
#include grid-span(7, 2);
}
}
So the issue is that, it does not respect the flow and it overlaps with the header, like this http://imageupload.maxmendez.net/images/incon.png. The green main, should be below the header.
In order to fix that, I had to do this:
main {
#include grid-span(3, 1);
background: green;
#include breakpoint(1024px) {
#include grid-span(7, 2, $options: 'right');
}
}
Adding options right, seems to clear to the right and fix my issue. Is there a reason that im overlooking as to why the mai is floating left?
Still havent tested in IE, but im worried about compatibility.
It seems as if you are unfamiliar with what the clear property does or how it works. When using the Isolation output method, you need to clear your own floats, something you may not have been exposed to with more traditional Float output method based grid systems/frameworks. A good place to read up on them is MDN's Clear section.
In the example you've provided, header spans the whole grid width. Because the last item in a grid is floated right, the header is likewise floated right. This is to hide any percentage rounding issues with the last item in a row and have them all line up to the right edge. Otherwise, all grid items are floated to the left. Because this item is floated right, in order to clear it's border edge (not have it overlap), we need to tell the next item in the DOM (your main element) to clear items floated right. This will push it below header, creating a new row. Because footer is full width and is therefore floated right, and your aside is also floated right, there is only enough room on the main/aside row for an item of width 100%-width(aside). Because footer is too wide for that remaining area, it drops to the next row without needing to clear its float. That being said, this will only not overlap with main because main and aside are the same height; if main becomes taller than aside, footer will overlap it. To prevent this, you should tell footer to clear things floated to the left, which main is.
While this all sounds fairly complicated, don't be worried about cross-browser compatibility. We have tested Singularity extensively across all browsers, including IE, and it works fine.
If after all of this you are still uncomfortable with the Isolation output method, you can switch to the Float output method. The two have very different mental models; Isolation is about discretely positioning elements in relation to each other whereas Float is more akin to walking across a row on your grid. Keep in mind that if you switch to Float you will then need to use the push and pull mixins to nudge things around the grid.
Hope this helps!