By freyquency on

I'm just brainstorming here... Perhaps a site for theme development similar to http://drupaldocs.org could be made for theming? The basic idea would be a repository of classes and themes that are called by the drupal core and modules, with theming examples, editable by the community. Drupal is so customizable that a simple theme isn't going to get all of the nuances of what makes a good site design. For example, to theme a user profile there is some work to be done with adding user profile fields. Once one does that it's not something that can simply be themed, it's reliant upon the user to add those fields, with the same names, or thus alter the theme to fit their own context. So maybe by creating a reference site that documents all of the different div's and id's would be the way to go. This is more of an elaboration on discussions past, where a lot of people have been in support of a reference of some sort. Here would be an example:

VOC (class)
used by taxonomy_dhtml to enclose the category lists.

used within (or see also or something):

.dhtml_node
.menuList
LI.menubar
.submenu
.menuList LI, .submenu LI
A.actuator
A.actuator:hover
.menuList LI A, .submenu LI A 
submenu LI A:hover, SPAN.key
ul.menuList a
li.menubar 
li.menubar a
ul.submenu a

... I just quickly cut and paste those from the css that came with the module (ok, plus a little more from a feature req.) but I think it shows what I am describing here.

Comments

menesis’s picture

menesis commented

What else can you document that is not seen in page's you want to modify source? Also, each theme can use it's own divs and ids... Documentation would be incorrect or get outdated, and won't tell anything else than you see in rendered html or template/module source.

freyquency’s picture

freyquency commented

True, while different themes have different enclosures, there is a lot of class and id information tossed out by the drupal core and by various modules. The example I posted is from a module, and there isn't any way to control what it spits out without hacking the module code. If there were a reference to things like this it would facilitate tight integration into existing site designs. Event module has an even more complex structure that requires a bit of css to overwrite it's default behaviour. So I'm proposing that we put aside themes for now and focus on all the constants; the things in drupal.css, the drupal core output, the modules. These things are decided by sometimes different users than the people who customize drupal sites, and I think it would be a great boon to themers and users in general to have a repository of 'static' drupal classes and ids. Another hope would be that it would be of minimal hassle to drupal developers, that somewhere in the line it could be automated. Perhaps a script that detected output divs and printed the results?

finch’s picture

finch commented

I agree with what chromatic suggested here, it is similar concept what was discussed here http://drupal.org/node/9779 on design taxonomies. But I feel before reaching a good set of taxonomies for high end design, cataloging what we have today and setting some "Drupal standards" on naming convention of classes, ids will be very helpful.

The other day I just digged out that I am able to customize the style on a specific block instance by definition the #block-block-, this information is embedded in one of the thousands threads on drupal.org, I will not even know to search for it if i haven't came across this idea.
These information should all be harvested into a central and visible place for all designers.

Some concrete suggestions are: for example on the template markups, we can define some Drupal standards so that all mark-ups will contain a certain structure such as:

<div id="canvasWrapper"><div id="canvas">
  <div id="bannerWrapper"><div id="banner">
  <div id="pageBodyWrapper"><div id="pageBody">
  <div id="sidebarWrapper"><div id="sidebar">
  <div id="contentWrapper"><div id="content">
.....

then a reference style sheet, which will have the minimum -- to be defined Drupal standards-- markup tags as examples shown above, as well as other not so obvious themeable tags defined or documented. Better yet, we should organize in such way so that the inheritance of one tag from the other is easily understood by novice designer.

I think this will help greatly for someone who is new to Drupal template design to know what is available, as well as to re-use parts of the styles sheets or markups from different existing templates. As I have been trying to do this and it has been like pulling teeth to get 'em sorted out.

thoughts? perhaps a thread for everyone to toss in "known drupal ids, classes that are used by various modules etc" then someone can get this catalogued as a first step?