Is it possible to nest grids with Singularity?
Here is my setup:
$break: 500px;
$break1: 700px;
$break2: 900px;
$break3: 1200px;
$grids: 3;
$grids: add-grid(6 at $break);
$grids: add-grid(12 at $break1);
$grids: add-grid(2 8 2 at $break2);
$grids: add-grid(3 6 1 1 1 at $break3);
$gutters: 1/3;
$gutters: add-gutter(.25 at 900px);
$output: 'isolation';
The current context I'm asking about is inside $break3.
I would like to have the following grid structure.
I realise the below isn't right it is just there as a demonstration as to the grid structure I'd like to have. I have tried using functions to output the correct widths but have had no luck, but that is probably because I was doing it all wrong.
HTML structure:
<div class="container">
<div class="1">
<div class="1-a"></div>
<div class="1-b"></div>
<div class="1-c"></div>
<div class="1-d"></div>
</div>
<div class="2"></div>
</div>
SCSS
div.1: #include grid-span(4, 2);
div.1-a nested in div1 and span the first column of 4
div.1-b nested in div1 and span the last 3 columns of 4
div.1-c nested in div1 and span the last 3 columns of 4 stacked below 1-b
div.1-d nested in div1 and span the last 3 columns of 4 stacked below 1-c
div.2: #include grid-span(1, 1);
Of course you can! $grids only deals with your main grid context, but if you would like to change your grid context, you can either override your grid context through grid-span or you can do it through the layout mixin.
Also take a look at this related issue and answer.
Related
I'm completely new to SCSS and I'm trying to set a background color to all items of a selector.
My css selector is the following, and returns all items (of two seperate UL lists)
#g-showcase .g-menu-item
I set a color array as:
$colors: #fad941, #ffffff, #e02520, #a6a6a6, #c6c6c6, #e02520;
I would like to iterate over my selector results and set a unique color from my color array (which could be larger than the above).
I started playing with some code, but I tackled it incorrectly, as I'm iterating over colors and not over selector items. (Don't know how to do that :( )
#for $i from 1 through length($colors) {
#g-showcase li:nth-child(#{length($colors)}n+#{$i}) {
background: nth($colors, $i)
}
}
How could I achieve the desired result?
Thank you !
S.
The problem you have is - as far as SASS is concerned - it's ignorant to how many li items your HTML code has, it's a pre-processor that never really see's the DOM, so it wouldn't know when to stop generating CSS
I assume what your looking to do is have the ability to select which color each li item has set as it's background, rather than as you currently have it, which is applying colors in the order they appear in the color array.
To do this you could add some additional markup to you HTML to give the generated CSS and slightly tweak how your creating the array, using a map instead. You might be looking to avoid polluting your HTML will erroneous mark-up, but the below would work.
$colorz: (
foo: #f24162,
bar: #591240,
fee: #4c5573,
fum: #6fa0a6,
eye: #71d9d9
);
#each $pointer, $bgcolor in $colorz
{
#g-showcase li[pointer="#{$pointer}"] {
background: $bgcolor;
}
}
<ul id="g-showcase">
<li class="g-menu-item" pointer='bar'>The quick</li>
<li class="g-menu-item" pointer='foo'>Brown Fox</li>
<li class="g-menu-item" pointer='fee'>Jumped over</li>
<li class="g-menu-item" pointer="bar">the lazy</li>
<li class='g-menu-item' pointer="eye">dog</li>
</ul>
<ul id="g-showcase">
<li class="g-menu-item" pointer="fum">...and other exciting stories</li>
<li class="g-menu-item">that you hear from time-to-time</li>
</ul>
Note The above wont 'run' as it's sass, so there's a working version over on CodePen http://codepen.io/anon/pen/GJLXMq
I want to make a simple 3 columns / 3 rows grid with Susy 2 like :
1 2 3
4 5 6
7 8 9
But the blocks are floating in a buggy and heretic order.
You can have a look :
http://img.spheerys.fr/images/2015/01/05/bug-susy.jpg
Here my HTML Markup :
<article class="block">1</article>
<article class="block">2</article>
<article class="block">3</article>
<article class="block">4</article>
<article class="block">5</article>
<article class="block">6</article>
<article class="block">7</article>
<article class="block">8</article>
<article class="block">9</article>
Here my Susy map :
$susy: (
global-box-sizing: border-box,
use-custom: (
rem: true
),
columns: 12,
column-width: 4em,
gutters: 1/4
);
And finally, my Sass :
.block
+span(4 of 12)
&:nth-child(3n)
+last
+break
What's going wrong ?
:nth-child counts all sibling elements. So :nth-child(3n) doesn't just apply to every 3rd .block, it applies to every 3rd sibling that is also .block. The best solution when using :nth-child is to wrap all your list items in their own parent, without other siblings.
Susy also provides a shortcut to creating this sort of gallery layout...
html:
<!-- wrap all your blocks in a div -->
<div>
<article class="block">1</article>
<article class="block">2</article>
<article class="block">3</article>
<article class="block">4</article>
<!-- more blocks... -->
</div>
sass:
.block
+gallery(4 of 12)
That should be all you need.
I have a small project, where i first tried Zurb Foundation framework, heavily using SASS variables for customization, and i got one problem.
I use their block-grid extensively, and i need to change $block-grid-default-spacing: variable value to rem-calc(2), but only inside a #gallery element, and leave it at default value elsewhere.
If it helps, i use simple code for my gallery (with some irrelevant Smarty templating)
<section id="gallery-container" class="row">
<ul id="gallery" class="clearing-thumbs small-block-grid-2 medium-block-grid-3 large-block-grid-4" data-clearing>
{foreach from=$offer->photos->get() item=photo}
<li>
<img src="{$photo->image->thumb(true, 295, 230, 5)}" alt="{$offer->title->get()}"/>
</li>
{/foreach}
</ul>
</section>
From the docs on the Foudation page, I think they have a mixin that is available to create your own block-grid. The following was take from http://foundation.zurb.com/docs/components/block_grid.html:
.your-class-name {
#include block-grid(
// This controls how many elements will be on each row of the block grid. Set this to whatever number you need, up to the max allowed in the variable.
// Available options: 1-12 by default, and false.
$per-row: 3,
// This controls how much space is between each item in the block grid.
// Use a variable or any pixel or em values.
$spacing: $block-grid-default-spacing,
// This controls whether or not base styles come through, set to false to leave out.
$base-style: true
);
}
Using block-grid mixin turned out to be a great idea that solved my problem. That's how my code looked like in the end:
#gallery
#media #{$small-up}
+block-grid(2, rem-calc(3))
#media #{$medium-up}
+block-grid(3, rem-calc(3))
#media #{$large-up}
+block-grid(4, rem-calc(3))
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');
}
}
}
}