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
Related
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'm wondering how the 0 margin on the last child is supposed to come in.
I've got:
body {
#include outer-container;
.content-main.with-sidebar { #include span-columns(8);}
aside { #include span-columns(4); }
}
Body is centered with a max max width -- both .content-main and aside are getting the correct widths, but neither are getting the :last-child { margin-right: 0;} that they're supposed to. There's other stuff in body, but it's the only parent they've got.
Clearly I'm not doing something right -- but the fact that they're getting widths at all seems like it would indicate that everything is #importing correctly.
With thanks --
Without looking at your HTML I can only guess that those aren't actually the last-child. For cases like this there is the omega() mixin to use. Look here for the documentation: http://neat.bourbon.io/docs/#omega
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!
I've finally found some time to test Singularity, and im back to a problem I had before for that I cant find an obvious solution.
My issue is with nested grids.
Let's say i have a simple 12 column grid
$grids: add-grid(12 at $break2);
And my layout uses a main content area that extends for 9 of those 12 columns:
#include breakpoint($break2) {
#include grid-span(9, 3);
border: 1px solid red;
}
The, inside that content area, I need to create a section which is divided in three columns, that means each article inside will span 3 columns of the parent container (which is 9 of 9 columns).
I've tried this with following code, but cant get it to work.
.highlights{
overflow: hidden;
border: 1px solid black;
article{
#include float-span(3);
&:nth-child(3n){
#include float-span(1, 'last');
}
}
}
My goal was to have a simple declaration, where i could have a generic article declaration for every article, passing a rule for the last article in each row like i've done above.
Maybe my confusion its because im so used to the current grid system im using, can you help with this.
What's best and most pratical way to nest grids so they can align with their parent elements?
So the issue you're having is you haven't changed the grid context and are still using your global 12 column grid context at that point. You need to change your grid context to 9 as you're now inside a 9 column grid. The following should fix your problem:
.highlights{
overflow: hidden;
border: 1px solid black;
article{
#include layout(9) {
#include float-span(3);
&:nth-child(3n){
#include float-span(1, 'last');
}
}
}
}
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.