Dear Zen creators,
I think a lot of css designers would greatly benefit from a description of how the Border Politics layout method actually works. Is there any documentation out there on the internet that could serve as a starting point?
More specifically, it would be really helpful to explain what all these negative margins do.
Thanks!

Comments

pkiff’s picture

I don't quite understand the "Border Politics" layout method, nor could I find a readily available source on the web to explain it.

However, my impression is that the techniques used are actually quite similar to the methods described in Matthew Levine's classic A List Apart article, "In Search of the Holy Grail":
http://www.alistapart.com/articles/holygrail

The actual Border Politics method seems to have been adapted from Levine and customized with the specific needs and code structure of Drupal in mind.

Some additional explanation of the concept behind negative margins is available in Mike Purvis's explanation of the Jello Mold layout, "Jello Molds & Width Control":
http://www.positioniseverything.net/articles/jello-expo.html

Phil.

yoroy’s picture

Status: Active » Postponed (maintainer needs more info)

I remember John Albin mentioning in IRC he has slides that explain the concept. John, I'd like to help with explaining this if you can give some pointers on where to start.

mdekkers’s picture

This is relevant to my interests... subscribing...

talatnat’s picture

+1 on this core part of documentation.

"The CSS layout method used in the core Zen theme is based on the mostly undocumented “Border Politics” layout method."

This does not lend confidence. And Googling didn't help. I cannot upgrade from Zen Classic because of this -- it just does not make sense to convert an entire "old" sub-theme into what is obviously a well-thought-out solution... but with such little documentation explaining the benefits or pitfalls.

will_i_am’s picture

I agree. I'm trying to figure out how to move the left column to the right of the main content. I don't think it's the holy grail... Holy grail is done with floats I think.

pkiff’s picture

Moving the left column to the right of the main content is something I would call a major layout change in terms of the Zen layout code. You may end up needing multiple changes to the layout-fluid.css file if that is what you are using as a base, and you may also need to make changes to the page.tpl.php template in order to change the source code order.

I'm not sure I follow what you are saying about floats. The Zen "border politics" method is also based on floats which are then moved around using positive and negative margins. You would also need to make multiple code changes if you were using Matthew Levine's Holy Grail code and wanted to move one of the outer fixed sidebars into a different location for viewers.

Have you thought of trying any workarounds? Maybe you could achieve what you wanted by getting rid of the left sidebars and then inserting some kind of columns or 50%-width divs into the right sidebar to make it look like it was two different sidebars...

You might also consider looking for a different theme that is already laid out the way you want and using that as a base.

Phil.

yoroy’s picture

Status: Postponed (maintainer needs more info) » Active

This question keeps coming up in IRC. For a start there are slides about Zen here: http://www.doitwithdrupal.com/files/slides/Designing-with-Drupal.pdf (13 MB!) and a Zen cheatsheet that has a diagram about the layout method here: http://www.palantir.net/sites/default/files/zen_reference.pdf

mjohnq3’s picture

You might want to check out a theme called Layout Studio: http://drupal.org/project/layoutstudio. The developers say it's similar to Zen but offers more layout options, ie. both sidebars (secondary/tertiary regions) to the left or right of the content region.

johnalbin’s picture

Status: Active » Closed (fixed)