Closed (fixed)
Project:
Zen
Version:
6.x-1.x-dev
Component:
Documentation
Priority:
Normal
Category:
Task
Assigned:
Unassigned
Reporter:
Created:
5 Oct 2008 at 15:38 UTC
Updated:
21 Aug 2013 at 08:08 UTC
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
Comment #1
pkiff commentedI 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.
Comment #2
yoroy commentedI 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.
Comment #3
mdekkers commentedThis is relevant to my interests... subscribing...
Comment #4
talatnat commented+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.
Comment #5
will_i_am commentedI 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.
Comment #6
pkiff commentedMoving 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.
Comment #7
yoroy commentedThis 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
Comment #8
mjohnq3 commentedYou 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.
Comment #9
johnalbinhttp://zengrids.com/help