Layout Gala, source order and "What's in a name".

The website http://blog.html.it/layoutgala/ present a simple yet
flexible html structure allowing 40 different visualisations by changing
only CSS.

As of 2.56, ikiwiki use this DIV structure:

	.header
	#sidebar
	#content
	#footer

Layout Gala use the following DIV structure:

	#container
		#header
		#wrapper
			#content
		#navigation
		#extra
		#footer

With this patch (and previous ones) the following DIV structure is used:

	#container
		.header
		#wrapper
			#content
		#sidebar
		#farbar
		#footer

Specifically, the following is changed:

  * container added around whole body
    + needed for Layout Gala
    + allows setting cosmetic outer space/coloring around whole body
  * sidebar moved below content
    + needed for Layout Gala
    + considered by some to improve accessibility
    + considered by some as part of Search Engine Optimization (SEO)
  * farbar added (needs a clone on sidebar plugin to be of any use)
    + no grand benefit - but hurts noone if unused either

The following continues to not match Layout Gala:
  * header is a class, not an id
    + too intrusive to change: many iki sites may rely on current class
    + too ugly to add: technically possible to extend .pageheader to
      also be # header and still preserve .header, but too confusing
      with both .header and #header meaning different things.
  * sidebar instead of navigation
    + too intrusive to change...
  * farbar instead of extra
    + when sidebar is kept, extend it - inspired by
      http://green-beast.com/seabeast/ as mentioned at the discussion at
      http://green-beast.com/blog/?p=117

As a bonus, this fits pretty well with the proposed naming scheme at
http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html
(is it did already with plain ikiwik - thanks for that, Joey!)

1 files changed, 8 insertions, 0 deletions

diff --git a/page.tmpl b/page.tmpl
index 53219f8..571d867 100644
--- a/page.tmpl
+++ b/page.tmpl
@@ -59,9 +59,11 @@
 </TMPL_IF>
 </div> <!-- .pageheader -->
 
+<div id="wrapper">
 <div id="content">
 <TMPL_VAR CONTENT>
 </div>
+</div>
 
 <TMPL_IF SIDEBAR>
 <div id="sidebar">
@@ -69,6 +71,12 @@
 </div>
 </TMPL_IF>
 
+<TMPL_IF FARBAR>
+<div id="farbar">
+<TMPL_VAR FARBAR>
+</div>
+</TMPL_IF>
+
 <div id="footer" class="pagefooter">
 <div id="pageinfo">