xhtml code in templates

Author Message

Mikhail Chekanov

Wednesday 17 March 2004 6:50:15 am

I have a suggestion related to xhtml code in templates. It's simple, but...
Look, ez team is going to replace nested tables with nested divs and this way we can control all design-related stuff through CSS. But every package (including admin and standart) has different selectors, id's, etc.
The general idea is to standardize xhtml code within eZ by separating the layout from the design once again. :D
For example for article view:
<div id="content">
<div class="article">
<h3>Header goes here</h3>
<div class="intro">Intro</div>
<div class="body">
<img>
<p>Body text</p>
</div>
</div>
<div class="comments">
<div class="author">Author info</div>
<div class="body">Hello world!</div>
</div>
<div class="comments">
<div class="author">Author 2 info</div>
<div class="body">Hello 2 world!</div>
</div>
</div>
And for dinamic objects like sidebar tree menu:
<div id="sidebar">
<ul>
<li id="active" class="folder">News</li>
<ul>
<li id="active" class"folder">IT</li>
<li class="folder">Sport</li>
</ul>
<li class="infopage">About</li>
<li class="form">Contact us</li>
</ul>
</div>
So, as you can see, I've used unique IDs for the layout/logic and non-unique CLASSes to describe type of objects and their attributes.
H3 for article header was used because it is simple attribute, article body is more complicated (XML field with other tags) - so i've used div for it.
And, finally, for the stylesheet:

#content {float:right;}
#sidebar {float:left;}

#content div.article {background:#fff;}
.article h3 {font-size:120%;}
#sidebar li#active {font-weight:700;color:red;}

This looks complicated, but with weel-formed rules for template xtml code (eZ team already have written rules for PHP and TPL coding) we can gain control over design-related stuff only with CSS stylesheets.
Advantages: simple theming; quick redesign; clear xhtml structure.

--
mike
#6595551

Alex Jones

Wednesday 17 March 2004 7:40:10 am

The eZ team is moving in this direction. Check out the article discussing the new Admin interface (http://ez.no/community/news/the_administration_interface_project) which touches upon the subject of XHTML and CSS usage. There is also a related thread (http://ez.no/community/forum/suggestions/the_administration_interface_project) discussing that article.

Better use of CSS/XHTML is important moving into the future.

Oh, on a side note, I would recommend dropping the term 'sidebar' as it implies placement on the page. IDs and Class names shouldn't imply placement, or for that matter style (like color, font-weight etc.) as future redesigns may not place that object in the same spot, or may choose to use a different method of styling. For example, I may choose to move the contents in the 'sidebar' to display at the top of the page. Perhaps a better term would be along the lines of 'sitemenu'; describing its contents instead of its placement.

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Mikhail Chekanov

Thursday 18 March 2004 1:38:06 am

>...Check out the article discussing the new Admin interface
>...There is also a related thread...
Yes, i've read it - my post was inspired by the article

>...Oh, on a side note, I would recommend dropping the term 'sidebar' as it implies placement on the page...
yea, it implies "sidebar tree menu", not placement :) It can be placed anywhere - within left/right sidebar block, main area and so on.

--
mike
#6595551

Alex Jones

Thursday 18 March 2004 7:16:43 am

A valid point. Ultimately the name of 'sidebar' tree menu should be changed as well then. Separation of content and display (naming conventions included) should be reflected throughout the system.

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Powered by eZ Publish™ CMS Open Source Web Content Management. Copyright © 1999-2014 eZ Systems AS (except where otherwise noted). All rights reserved.