Search code examples
singularitygs

singularitygs mixing pixels and percentages in layout


I want to create a page with singularitygs that shall produce something like in

http://www.foreignpolicy.com/

What i want to achieve is, that the header sections width shall be 100% but the content section shall be centered with a max-width of : 960px. Both shall be responsive when they get smaller, exactly like on the above mentioned page

From what i understood at https://github.com/Team-Sass/Singularity/wiki, i can not create grids which have both px and % sizes.

Is there may be a workaround?

The thing is i am developing a template with the Drupal Omega theme and singularitygs plays very well with it.

I would greatly appreciate it if someone kindly give me some feedback. Thank you

Sorry for my bad english:-)


Solution

  • While you cannot mix fixed and fluid columns without the calc output style, having a fixed max-width section and a fluid section is totally do-able, just have more than one container.

    Singularity is container agnostic, so the column widths will expand to fit into any container you place them. If the container is 100%, it will fill 100%. If the container is only 960px, it will fill 960px. The column widths are simply percentages of a whole, not a specific container.

    Here's a basic container layout that more or less accomplishes what you want