forrest-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From thorsten <>
Subject [RT] Hooks and semantic naming in leather skin
Date Thu, 16 Sep 2004 16:41:20 GMT
Hello devs,

the /leather/ skin should follow naming conventions for css elements.

"A naming convention is an attempt to systematize names in a field so 
they unambiguously convey similar information in a similar manner." [1]

Instead of naming elements e.g. header or top which only represents the 
position of the elements. A semantic name for this elements should be 

One reason to do so should be explained on the following example. 
Imagine you have following site structure.

+  a  +  b  +  c  +
+-----+-----+ ----+

a)  is the left sidebar (#leftCol)
b)  is the main content (#main)
c)  is the right sidebar (#rightCol)

Then one day you decide to switch a + c.
To escape maintenance chaos you will end up changing the names of the 

In the /leather/ skin are now the suggested names [2] incoorperated. I 
hoped to create the following toplevel DOM structure [a]:


I had to learn that the e.g. the /pelt/ style needs another DOM 
structure to look like it looks right now. It needs div-hooks for the 
display. I tried to imitate the /pelt/ style with /leather/. The actual 
DOM structure looks like this [b]:

+-branding (contains search and nav)
+-branding-tagline (published and nav-level2tabs)

My problem with that struture is simple:
e.g. the #branding-tagline contains #siteinfo-published and 
#nav-main-sub. That means that name /branding-tagline/ is missleading. I 
used this container only for design reason.

Then I thought about a hook mechanism in the DOM structure that will 
lead us back where we started.

      |      i intro            |
      |      m main             |
      |      o outro            |

This are the three main areas (design) in /pelt/ and in /leather/. This 
div-hooks enable floating within the hooks.

i +-branding (contains search and nav)
i +-intro-tagline (published and nav-main-sub)
m +-branding-trail-a1
m +-nav-section
m +-content-main
o +-siteinfo

|-->new toplevel structure [c]

If further necessary new graphic divs can be added as e.g 
#intro-tagline. All the elements from [2] have to be at least hooked in 
one of the three design div-hooks. I used the following css-files that 
can be seen as fallback (or default) layout.
|-- base.css
|-- branding.css
|-- navigation.css
|-- print.css
`-- profiling.css.xslt

That makes it easy for css-skin designer to add new designs for 
/leather/. The user can override the default layout by adding 
css-elements in project skinconf.xml or by placing css-files in his css 
dir. Maybe some user even commit their layout based on the leathers 
contracts back.

The only thing is that makes me thing is: Do we really need this hooks? 
Can the /pelt/ design imitate with [a]?


King regards


View raw message