forrest-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From thorsten <thors...@apache.org>
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 
choosen.

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 
elements.

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

container
+-branding
+-search
+-nav
+-content
+-siteinfo


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]:

container
+-branding (contains search and nav)
+-branding-tagline (published and nav-level2tabs)
+-branding-trail-a1
+-nav-section
+-content-main
+-siteinfo

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.

container
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]
container
+-intro
+-main
+-outro

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]?

WDYT?

King regards
thorsten

[1] http://www.wordiq.com/definition/Naming_convention
[2] http://marc.theaimsgroup.com/?l=forrest-dev&m=108958890828948&w=2


Mime
View raw message