ahoy all,
i have been studying the Singularity grid framework and so far i really like its simplicity and concepts/mental models. however, like others i am still a bit confused about how to do nested grids properly in Singularity. after looking over similar questions:
Still confused with nested grids
Subgrid with floating method and padding
Having to re-declare global context?
i came up with the following examples to created nested grids: one using only grid-span and another using layout and grid-span:
Singularity nested columns using grid-span
Singularity nested columns using layout+grid-span
as you can see they achieve the same end result, though using the layout method feels better. with that in mind, my question is 2 fold:
is there a "best/recommended practice" for creating nested grids with Singularity?
why are the grids drawn bybackground-grid on the same elements different when using grid-span vs. layout? it seems as if the nested columns are being created differently and thus have different "inner" columns? the background grids using layout seem more correct, though even there some of the elements look incorrect (e.g. the "first" element has 10 columns inside it drawn by background-grid while it only spans 8 columns of the parent container, and the "a" & "b" elements have 6 columns drawn inside it by background-grid though they only span 3 columns of the parent container).
i apologize in advance if i am misunderstanding some simple idea of Singularity. in fact, it is probably likely ;)
thanks in advance for any help.
peace
layout is for when you are nesting lots of things. You just specify your context once and then you can nest sub-elements within that nested context.
grid-span offers one-time context assignment. It’s for nesting an individual element.
If you need to use background-grid within a nested context, you should use layout and it should identify the correct context. background-grid is prone to rounding errors, especially in webkit based browsers and the guides may be slightly off.
Related
I've looked at the documentation for Singularity and it seems the recommended way of having multiple grids is to use the layout mixin, but I have been doing it differently.
when I say multiple grids I'm referring to a page that has different number of columns for different page sections, withing the same media query.
My question is, I have been reusing #include add-grid() in my containers to use multiple grids, is that an acceptable way to use sngularitygs? I have found no examples of using it this way, but it seems to work quite well.
.container {
#include add-grid(16);
}
I'm only seeing the add-grid used to set the global grid, is it unwise to use it for adding another grid inside a container as above?
also I have turning on the bg grid in containers to visualize the nested grids.
.container {
#include sgs-change('debug', true);
#include add-grid(16);
#include background-grid();
}
It seems to work great for visualizing the grid in containers, but I see no usage of these mixins in this way in the docs, any reason this is wrong or is there a better way?
thanks.
Singularity stores grid properties in some internal variable.
Whenever you use add-grid(), this variable is updated with new grid properties.
If you use add-grid() once, all Singularity spanning mixins called below will use that definition.
What happens when you use add-grid() again? It will not affect the code above. But the code below will use the new definition of the grid.
Thus, there are two strategies of using add-grid():
Use it once to set one definition all the time.
If you need different grids, use add-grid() every time before calling a Singularity spanning mixin. This will ensure that each mixin uses an appropriate grid definition.
The latter is probably not an intended way of doing things, but if you've got multiple grids to work with, you've got no other option.
I'm using this approach extensively on the good old Singularity 1.1. But it's much simpler there: the variable that stores grid properties is exposed and can be easily and transparently overridden. I'm not sure about the drawbacks of this with the modern version of Singularity. Grid definitions for specific media-queries may stay unresetted and cause trouble. Gotta dig deeper.
UPD1 2014-06-18
Okay, i seem to have figured it out.
How Singularity stores its settings
Singularity 1.2 stores its settings in the $singularity map. It uses the sgs-get() and sgs-set() functions to access those settings. The funny thing with functions is that you can't use them withough assigning a value somewhere, so you can't do:
sgs-set('foo', 'bar')
You have to assign the result of the function to a dummy variable, even if you're not going to reuse that anywhere:
$dummy: sgs-set('foo', 'bar')
How to manually reassign grid definitions
Grids and gutters are stored under 'grids' and 'gutters' keys of the $singularity map. So in order to mix multiple grids on the same page you have to reset those.
Luckily, there is sgs-reset() that exists both in function and mixin forms.
So before declaring a different grid, you have to reset existing grid:
+sgs-reset(grids)
+sgs-reset(gutters)
+add-grid(2 4 2)
+add-gutter(0.2)
A custom mixin to quickly reassign grids
That is a fair amount of work. You can make it easier with a custom mixin:
=reset-grid($grid: 2, $gutter: 0.1)
+sgs-reset(grids)
+sgs-reset(gutters)
+add-grid($grid)
+add-gutter($gutter)
Here's a usage example:
.container-1
+reset-grid()
#foo
+grid-span(1,1)
#bar
+grid-span(1,2)
.container-2
+reset-grid(1 3 2, 0.2)
#baz
+grid-span(1,1)
#quux
+grid-span(2,2)
Resulting CSS: http://sassmeister.com/gist/21249a9dabf745f892cb
Note that if you use the approach of resetting your grids once in your project, you HAVE to use it everywhere in your project. If you don't apply reset prior to every spanning, you might have unpredictable results.
That's because you no longer have a standard site-wide grid and you have to tell Singularity which grid you mean to use every time you ask Singularity to span anything.
Manually using that mixin inside media queries instead of maintaining a complex grid definition
On the other hand, once you're resetting your grids all the time, you no longer need to define media query-aware grids. I find this to be a relief. Managing the consitency of a complex grids hierarchy can be a nuisance.
.container-1
+reset-grid()
#foo
+grid-span(1,1)
#bar
+grid-span(1,2)
+breakpoint(700px)
+reset-grid(3, 0.2)
#foo
+grid-span(2,1)
#bar
+grid-span(1,2)
Resulting CSS: http://sassmeister.com/gist/19f8ad9dab904cfcabba
A custom mixin to quickly span a thumbnail grid
You can save yourself even more time if you're doing a lot of thumbnail grids, as opposed to page layouts. Here's a mixin that generates a thumbnail grid for a given number of columns (works with symmetrical grids only):
=quick-span($cols, $guts: 0.1, $pseudoclass: child, $center-last-row: 20, $proportional-margins: true)
+reset-grid($cols, $guts)
#for $i from 1 through $cols
&:nth-#{$pseudoclass}(#{$cols}n+#{$i})
+float-span(1, $i)
#if $i == 1
clear: both
#if $proportional-margins
&:nth-last-#{$pseudoclass}(#{$i})
margin-bottom: 0
#if $proportional-margins
margin-bottom: $guts / ( $cols + ($cols - 1) * $guts) * 100%
// Centering the last row
#if $center-last-row and $cols < $center-last-row
#for $i from 1 through $center-last-row
$remainder: $i % $cols
&:nth-#{$pseudoclass}(#{$i - $remainder + 1}):nth-last-child(#{$remainder})
margin-left: grid-span(1, 1) * ($cols - $remainder) / 2
Demo: http://sassmeister.com/gist/62f44e02a2fbb3bd4296
A custom mixin to set up a responsive thumbnail grid with a snap of fingers
Finally, you can put this looping mixin in a one more loop to generate responsive thumbnail grids. Here's an example leveraging Breakpoint Slicer, a syntactic sugar for Breakpoint:
=responsive-span($start-cols: 1, $start-slice: 1, $guts: 0.1)
#for $i from 1 through (total-slices() - $start-slice + 1)
$slice: $start-slice + $i - 1
$cols: $start-cols + $i - 1
+at($slice)
+quick-span($cols, $guts)
A single call of this mixin results in a full-fledged responsive thumbnail grid!
.column
+responsive-span
Demo: http://sassmeister.com/gist/acef490deb922535ef19
ahoy all,
i have a simple example that mixes float-span and grid-span mixins within the same grid context (i.e. the same number of columns in the same row)
http://sassbin.com/gist/7812502/
as you can see, i have 3 items that i want to space out evenly in a row. i use float-span with first and last options on items 1 and 3 to make them sit at the beginning and end of the row respectively, and this works as expected. for the middle item, which i want centered, i assumed i could use grid-span with the correct location to have the 2nd item in the middle. however, what is happening is that the counting of location for grid-span is started after the column taken up by the first floated item. is this expected behavior? in other words, is it allowable to mix float-span and grid-span in the same grid context/row? and if not, what is the preferred way in Singularity for accomplishing the same thing?
i have been searching the documentation wiki, in particular the section on spanning the grid, but have found no statements either way. and the demos do not seem to be using float-span and grid-span together.
thanks as usual for Singularity and for any help.
peace
PS. i have already tried using the isolation-span mixin in place of grid-span with the same results.
It is not advisable to mix output styles like float and isolation in the same grid. You should pick either isolation or floats and stick with it.
Here is your sassbin tweaked a bit: http://sassbin.com/gist/7815953/
I'm using singularitygs as my grid system and am really like the flexibility but I have come across a fairly unique situation and I'm not sure if singularity (or any other grid system) addresses
I have a row that span the entire column width, that breaks up the header portion and the content portion of the document. There is an element, div.b, that sits within above the full column bars next to div.a in larger layout. But on a medium sized layout and below, that element falls below the full span row. Here is the source order and the desired output, showed using a 10 column layout for simplicity.
Source Order
div.a
div.b
div.c
div.d
div.e
div.f
div.g
div.h
Large Layout
Medium Layout
Thanks in advance for any help and ++ to the creators of the grid system
Interesting use case. Honestly it’s going to be pretty hard until CSS grid layout comes out. While Singularity can handle any order horizontally, the vertical reordering like "D" and "G" stacked is going to be tricky. There might be a clever use of floats to get this working but it will probably be more hand manipulation of elements than pure Singularity magic.
I'm using jQuery isotope from there: http://isotope.metafizzy.co/
There is a way to sort with multiple types?
For example: moving all green and blue boxes to the top of the container?
Thanks
You can sort for multiple types, see this sample fiddle. The documentation for sorting is here. All you need is to make green or blue a data-category on each div. Or, you could use a class also. See it here how to use the data-category for sorting. It's that simple. And another one is well explained here. Now, you need just a bit of programming to adapt it for your case. But, again, it's all in the original's sorting documentation.
I would like to ask which controls can be used to create a design similar to the built-in Weather app - that means different sets of data (tables, lists, etc.) that stretch horizontally and can be scrolled and can use the semantic zoom (which just shows the names of individual sections). I was trying to find some ways, but I have always found only examples using a list of same-type items, that are grouped somehow and shown in a GridView, but nothing similar to those built-in apps.
Thank you very, very much
You can achieve your goal using ItemTemplateSelector.
See here for more information: http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.itemtemplateselector.aspx