This package contains cleanskin, a skin for Zope/CMF. This README.txt document describes cleanskin: its goals, design, etc. For installation instructions, please refer to INSTALL.txt. For questions about this skin, email Paul Everitt ([email protected]).

To view the layout of cleanskin, simply open cleanskin/skins/cleanskin/main_template.html in a browser. The images and CSS will all load, and the sample text will give a rough idea of the appearance.

The primary goals of this skin:

• Faithful example of ZPT idioms.
• Particularly, templates, graphics, and stylesheets work on filesystem outside of Zope.
• Well-documented and well-commented project to educate potential skin authors about Zope, page templates, and the skin facility.
• Clean out cruft in CMFDecor, including CSS accumulation. There are a bunch of styles in the old stylesheets that are no longer needed.
• Degrade gracefully under NS4, etc. This is pretty painful, so this might get downgraded to a secondary goal.
• Standards-based and standards-compliant (e.g. valid).

Secondary goals and requirements:

• Break out customization points and document how/where people can customize.
• Constrain the Zope/CMF controls/actions to a single part of the page (the Zopebar).
• Anonymous users see no traces of the management interface. For instance, the classic CMF interface puts things in a left margin, whether you want a left margin or not.
• Reinforce demo nature of CMFDemo.
• Increase the speed of CMF through elimination of duplicative processing.

Cleanskin Structure

The cleanskin approach can be summarized as follows:

• The main_template.html is where all the action is located
• Pages are broken into the following regions:
  • Navbar is where the customized site places its navigation features. Thus the contents cleanskin includes are just sampler. Site designers can customize this by creating a template called info_arch containing a macro called navbar.
  • Zopebar is the place where the CMF places all the controls it needs for management.
  • The Zopebar is grouped into three regions of actions: user actions, actions specific to the thing you're looking at, and global actions. The Zopebar's first row contains the subset of important actions and hides the rest.
  • The Zopebar has a second line of context-sensitive extra actions. These become visible by clicking on the down arrow.
  • The Body is the place where the content of the page lives. With cleanskin, the body gets all the width of the page, rather than having margins used for other purposes. The body itself is broken into a number of regions:
    • Status area, where response messages go.
    • Breadcrumbs.
    • A byline containing the title, author, and date of the document.
    • The description for the document, if present.
    • The content of the document.
    • Attached discussion posts.
• There are two stylesheets used. zpt_stylesheet are where most of the styles are located, including the ones that NS4 can handle. css_stylesheet contains styles specific to CSS2 (IE and Mozilla) and doesn't get used by NS4.
• A number of Python scripts provide specific functionality, such as caculating breadcrumbs. However, these scripts do not produce markup (at least they shouldn't!).

Notes

The css_stylesheet.css file is included by main_template.html only for CSS2 browsers, using the @import facility for CSS. This stylesheet has the beginnings of support for media styles. That is, when you print a page from Internet Explorer, the @media print selector kicks in and changes the formatting of the printed output. Currently the only change is to turn off the navbar and zopebar, to focus on the content.

I use id selectors for CSS instead of class selectors. First, I find it more convenient and reliable. Also, by giving regions exact id's, I can later use the DOM to directly manipulate things.

I'm looking into Plone's styleguide, to see if we can agree on some conventions. I'll start accumulating some below, then start a separate doc when ready.

Style Guide

• italics on optional
• make textareas reflow with page