Important:

  • All documentation available below apply to all WYMstyle versions before version 0.3.
  • Development of version 0.3 will begin in october 2006.
  • Version 0.3 will be a complete rewrite, with major changes.
  • With version 0.3, WYMstyle will have some major concepts revisited and will benefit from a new and more powerful general approach.

Documentation

Main concepts

Required HTML structure

WYMstyle can't be used with all existing web pages.

To use WYMstyle, your web pages must comply to this precisely defined HTML structure.

But this limitation can be viewed as positive, because the imposed structure is not arbitrary and the order of the elements can be considered as ideal in terms of search engine optimisation and accessibility: contents are placed first in source order, not navigation.

Approach

WYMstyle favors:

  • Speed of developement
  • Easiness of maintenance
  • Modularity
  • Reuse of work across projects
  • Centralisation of styles related to different projects
  • Ease of understanding of the CSS code.

At the cost of:

  • Optimisation (there can be a lot of independent CSS files to import, which multiplies the number of server requests, and there are lots of comments).
  • Independance of your websites stylesheets (in the case that you adopt the proposed method of hosting only one instance of WYMstyle).

In practice, the loss of performance is rather unnoticeable, and the gain in CSS development effectiveness is considerable.

For these reasons:

  • Multiple imports are used without restrictions. There can be lots of nested stylesheet imports (in fact, MSIE don't support more than 4 levels of nesting, so WYMstyle doesn't use more than 4 levels)
  • You can host WYMstyle at an unique location, rather than making a copy for each project.

Note that if you are not comfortable with the idea of sharing one instance of WYMstyle across many web sites, you can for example use WYMstyle only during development, then merge all CSS into one file which will be specific to your project.

Modules, addons and skins

There are 3 differents types of CSS files in the framework:

  1. Modules
    • These are the essential files which provide essential fonctionnality.
    • You can create various layouts simply by assembling (importing) modules into your main CSS file.
    • Modules are generic, for example they have no color information. You can give birth to various CSS layouts simply by combining modules.
    • You can create your own modules to reuse their functionnality across projects. But you have to know that good modules have to integrate well to the framework and should not cause undesired effects while used with existing modules (that's why creation of new modules is tricky, and needs lots of testing).
  2. Addons
    • Addons allow to extend WYMstyle for specific use.
    • For example, an addon can be made of CSS files prepared for a specific Wiki of Blogging system, and the needed related files (eg. a ready to use xhtml templates)
  3. Skins
    • Skins are sort of already made configurations: they are ready-to-use combinations of modules.
    • Rather than manually import modules when working on a specific project, you can simply load a pre-made skin.
    • Importing a skin gives you a ready to use set of CSS.
    • But a skin is not only a compilation of modules, they extend the limited possibilities given by the only use of modules.
    • A typical skin has styles related to: border-widths, dimensions of layout elements, margins, paddings, font-sizes, ...
    • But skins don't have any color information and remain as neutral as possible. Like Modules, skins are not project-specific.
    • You can create skins to save and reuse your compositions across projects.
    • Don't hesitate to submit your skins for addition to the official release of WYMstyle !

The main CSS file

When I refer to the main CSS file, I talk about the file which is directly linked from your web pages. This file is not part of the framework: it's the file you create for each web site. Note that you can also import the WYMstyle CSS files directly from your web pages but this is generally less practical, because it's easier to change 1 main CSS file than several HTML files.

Typically in this file, you first import the CSS modules you need (or a skin), then you write the styles specific to your project (colors, background images, ...).