• next
• previous |
• ZTM »
• Documentation »
• Styleguides »

CSS style guidelines

Readability is the most important aspect and trumps these guidelines when necessary.

Graceful degradation

Degradation generally means that a system continues to operate but provides a reduced level of service rather than failing completely.

In a web-context graceful degradation tend to mean that your Web site continues to operate even when viewed in less-capable browsers where advanced CSS-features are not supported. Particularly a problem with mobile phone browsers and early, but still widely deployed, versions of Microsoft Internet Explorer.

In the publishing framework we sometimes use CSS3 , without providing fallbacks in the form of CSS-hacks or other cumbersome workarounds. Particularly rounded-corners and drop-shadows are employed without fallbacks for browsers that do not support them.

No functionality should be lost, but things might not be as “delicate-looking” as in modern browsers.

How to include the styles sheets

Stylesheets are most easily served through the built-in web server. During development the number of stylesheets grows quickly. We therefore use a simple convention for serving static files like stylesheets, images and scripts. This tradition makes it fairly simple to guess where you can find files when including them and figuring out where they came from when debugging a year later.

All browser related files (views, templates etc.) should be put inside the browser module/sub folder of the package you are developing, giving you a folder structure like this:

ztm.packagename/src/ztm/packagename/browser

The static resources (images, stylesheets, scripts etc.) are kept in folder called resources:

ztm.packagename/src/ztm/packagename/browser/resources

(No need to make the resources folder into a Python module by creating a file:__init__.py file, but make sure that the version control system notices the folder.)

Now you need to tell the web server to load the resources folder and the path you want it to respond to. This is done by adding the following ZCML to the configuration inside the browser folder. (Make sure you include the browser folder in the main package ZCML):

<configure xmlns="http://namespaces.zope.org/zope"
           xmlns:browser="http://namespaces.zope.org/browser"
           i18n_domain="ztm.packagename">
  <browser:resourceDirectory directory="resources" name="ztm.packagename" />
</configure>

All stylesheets, images, scripts and other static content inside the resources folder can now be retrieved like this /@@/ztm.packagename/filename.ext. Which means that you can include CSS in markup by inserting the following in your markup:

<link rel="stylesheet" type="text/css" href="/@@/ztm.packagename/simple.css" media="screen">

Note

This convention makes it somewhat harder to override the stylesheets directly, forcing you to modify the markup include directly.

Note

There are some frameworks in ZTM, for instance the ztm.contenteditor widgets, that collect scripts and styles directly from classes.

CSS-order

We just sort the properties alphabetically like this:

h1 {
  background-color: red;
  color: white;
  font-weight: bold;
  font-size: 12px;
  line-height: 14px;
  width: 100%;
  }

If you insist on a more logical grouping, that is fine as well.

Supported browsers

For the publishing framework, meaning the parts of the application that are used by authors and contributors, we support Yahoo’s A-Grade browsers minus Microsoft’s Internet Explorer 6.

Demonstration templates and end-user facing pages will continue too support IE6 for some time.