I am still puzzled about a few certain aspects in the application of Singularity. I wonder for example about one thing. In the following gist i have set up a few simple elements. The blue at the bottom is the footer, the yellow in the middle the content and the upper three cells (red, green fuchsia - built by grid-span) build the header. All three parts are build by the same container.
http://sassmeister.com/gist/8010028
I wonder what would be the cleanest approach to make the header broader than the other two.
Or is it even impossible to have different width for one of the three if they all rely onto the same container settings and context? Best regards Ralf
Singularity is container-agnostic, so you can position your header container in any way that you prefer.
There are many ways to make one of containers larger, and this problem is not related to Singularity.
My favorite method is negative margins. It is not applicable to your styles because you set margin: 0 auto
on your containers. I suggest that you use margin: 0 auto
on body
instead. This will require some refactoring.
What does relate to Singularity though is the problem of maintaining a consistent grid throughout containers of different widths. You'll need to do some math and spend some time fiddling with values.
Here's what i managed to achieve: http://sassbin.com/gist/8030219/
Note that i'm not using the layout
mixin but simply redefine $grids
. This method is not recommended but is acceptable when there are several different grids and none of them can be called the main one.
PS Note that SassMeister is on Sass 3.3 whereas Singularity and Breakpoint aren't behaving properly on Sass 3.3. Use SassBin.com instead which stays on Sass 3.2.