How to set different widths for elements within the same container element in Singularity

Question

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.

• By defining a width in percentage just for the wrapping header element?
• By applying the layout mixin to the header element and set a whole new context?

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

Answer 1

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.