forrest-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Scherler, Thorsten" <thors...@apache.org>
Subject [css-style] naming convensions - our css contracts
Date Sun, 11 Jul 2004 22:53:34 GMT
Hello devs,

I am preparing a proposal for OSCOM 4
(http://oscom.org/events/oscom4/rfp).

It will be a practical proposal for a cms skin based on standard naming
convensions for cms-systems. Basicly I want to talk about :

1. Why naming convensions? What are naming convensions?
2. How to implement them? What could be a basic standard for naming
convensions?
3. Example implementations

Ok, nice but what has that to do with forrest ;-)?

Nicola wrote:
3 - the main page areas should be #style like
     '#header' instead of 'header'

I have read the article of Henri Bergius about naming convensions.
He thinks that "if web developers make use of naming conventions for
<div>s too, we can make it easier for regular users to create their own
visual stylesheets that will work across a wide range of sites". [1]

Bottom line I would like to use in the css-style skin standard naming 
convensions. The resulting xhtml-skeleton of the css-style skin I want 
to reuse for the default pub of lenya.

Right now there is no such standard regarding naming convensions for
cms-systems. I am researching the proposals that are out there for 
css-contracts and would implement it in the css-style skin. The result 
will be a css-style skin xhtml-skeleton that supports basic standard 
regarding naming convensions for CMS.

That would mean I will focus now in restructing the <div/>/css elements. 
I see the div names as container. Telling me what I will find there 
(makes searches easier). "Searchbox" for example tells me I will find a 
searchbox. Looking at <div id="top"/> that is not possible.

This container contains now the logos (group/project), the trail and the 
search box. I don't like "top" because it says something (though 
somewhat remotely) about the presentation, which it shouldn't.

For example if the designer wants the e.g. group logo in bottom? Then 
the container name is not representing what it contains because "top" 
contains "grouplogo" which is in the bottom. Resulting that "top" is 
missleading.

Inspired by [2] I came up with the following:

#container
     Page container makes it possible to have an overall sourrounding 
box in the pages. e.g. [1]&[2] have a black sourrounding box.

#branding
Container used for a header and banner to brand the site. That is the 
former "top".

#branding-logo
Contains all logos to brand the site.

#branding-logo-group
Used for the grouplogo.

#branding-logo-group-ax
Used for the grouplogo in alternativ location. x stands for a variable 
that represents the number of the alternativ.

#branding-logo-project
Used for the projectlogo.

#branding-logo-project-ax
Used for the projectlogo in alternativ location. x stands for a variable 
that represents the number of the alternativ.

#branding-tagline
Used for a strapline or tagline to define the site's purpose. Can be as 
well used for site slogans.

#trail
Used for a trail or tagline to define the site's purpose

#search
Related to search interface and search results

#search-input
Search form container

#search-input-ax
Search form container in alternativ location. x stands for a variable 
that represents the number of the alternativ.

#search-output
Search results which could include a <div> or other markup
including definition lists

#nav or #navigation
Used to contain the navigation devices

#nav-main
Main or primary navigation AKA tabs.


#nav-section
Navigation to pages within the current site section AKA menu.

#nav-external
Navigation to pages outside the site

     #nav-supplementary or #nav-supp
         A supplementary list of links, perhaps in a footer. This can
replace the common, but presentational #footer

     #nav-(whatever)
         A list of links named at a designer's descretion


#content
     Used for content rather than for another purpose such as navigation

     #content-main
         The main content area

     #content-news
         News related content

     #content-(whatever)
         Could include any form of content, including #content-related,
#content-quote etc.

#siteinfo
     Used for various site related information

     #siteinfo-legal
         Copyright information etc.

     #siteinfo-credits
         Designer or other credits

[1] http://www.stuffandnonsense.co.uk/archives/whats_in_a_name.html
[2] http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html
-- 
<thorsten>
  <name>Thorsten Scherler</name>
  <country>Spain</country>
  <@mail>thorsten.at.apache.org</@mail>
  <@cocoon-WIKI>
http://wiki.apache.org/cocoon/Scherler
</@cocoon-WIKI>
  <acronymfinder>
http://www.acronymfinder.com/af-query.asp?String=exact&Find=Find&Acronym=
  </acronymfinder>
  <motto>
    "My task which I am trying to achieve is,
     by the power of the written word,
     [...] to make you see."
     *Joseph Conrad (1857-1924)*
  </motto>
</thorsten>






Mime
View raw message