3.1 The CSS Concept
YAML's CSS concept is modular and cascading. The CSS definitions of the basic layout are divided according to function into several separate CSS components (files):
- Positioning of the main areas of the web page (header, footer, columns)
- Screen layout: design of the main areas
- Formatting of the content
- Design of the navigational elements
- Print templates
The finished layout always comprises several of these components. The separation according to function makes editing and organizing easier.
Furthermore, regular CSS is strictly separated from those files necessary for Internet Explorer hacks (bugfixes for CSS bugs). Many of these bugfixes exploit other IE parser bugs, which let IE accept invalid or incorrect CSS declarations.
Only in rare cases can regular CSS be mixed with the IE bugfixes and still validate. The hacks also interfere with the legibility of the stylesheets. A summary of these hacks in one single file allows better comprehension regarding the various IE browser versions, which themselves sometimes need varying hacks.
Cascading
In addition to the thematic organization of the style listings in various CSS components, YAML uses the cascading of CSS quite intensively.
Cascading lets the browser decide, which CSS properties are relevant for the display of any particular element. This cascade is divided into four steps:
- Step 1: origin of the declarations
(browser, author, or user stylesheet). - Step 2: sorting by origin and weight
- Step 3: sorting by selector specificity
- Step 4: sorting by order of appearance
With the CSS basic components (base.css and iehacks.css), the page creator is presented with a three-column basic layout as a basis. These stylesheets are integrated into each YAML-based layout and are never changed.
The basic layout can then be modified by overwriting specific style declarations and expanding other properties. All the page creator's changes should be made in separate stylesheets: only then can YAML remain the stable basis at the lowest level.
3.2 Naming Conventions
Certain terms are used again and again within the documentation, as well as in the naming of files and folders of the framework. A short definition of these:
Basic components (core files)
The core files comprise the core or the foundation of the YAML framework and are in the folder yaml/core/.
They provide the basic functionality of the framework and are necessary for the cross-browser uniform layout presentation. They are necessary for every YAML-based layout.
Complementary components
YAML is based on the cascade principle. The actual layout design is created by modifying YAML's basic layout. In addition, YAML provides several more finished CSS components as well as templates for often-required elements. These modules are organized by function:
- Screen layout - screen/
- Print layout - print/
- Navigation - navigation/
Should these files be used unchanged, they need only be copied directly into the layout from the folder yaml/. Separate, new stylesheets or modification of these components should be maintained in a new css folder.
Patches
A patch file contains all the necessary CSS adjustments for Internet Explorer together in one CSS file. This is integrated into the (X)HTML source code with a conditional comment and ensures a homogeneous layout.
File templates
YAML offers file templates for oft-required components. These templates have names ending in *_draft.*.
To use them with YAML, copy those you need into your css folder and rename them.
