3.3 The Central Stylesheet
YAML's CSS concept is based, as discussed previously, on modules as well as on the cascade principle. The CSS components are composed according to function (positions of the layout elements, formatting of content, etc.)
The following diagram shows the functions and meaning of the YAML framework's individual components.
Every YAML-based layout contains such a central stylesheet, which integrates all the required components for that layout (basic components, screen layout, navigation, print styles). A complete layout always comprises several of these components. This separation according to function makes editing and comprehension easier.
How do we start actually working with YAML?
Integration & Import of the CSS Components
The structure of the central stylesheet -- and thus the use of YAML in your own projects -- is easiest explained through examples.
Note: copy the folder yaml from the download package onto your server, on the same level as your css folder. This separation between your own css files and the files of the framework is necessary to let you update YAML at any time.
The layout is integrated into the (X)HTML source code via a so-called central stylesheet, which is usually reached with the link element in the HTML head of each web page.
<head>
...
<link href="css/layout_3col_standard.css" rel="stylesheet" type="text/css"/>
...
</head>
This central stylesheet contains your layout and should be placed in your css folder. Within this stylesheet, the other necessary CSS components are integrated with the @import rule.
/* import core styles | Basis-Stylesheets */
@import url(../yaml/core/base.css);
/* import screen layout | Screen-Layout einbinden */
@import url(../yaml/navigation/nav_shinybuttons.css);
@import url(screen/basemod.css);
@import url(screen/content.css);
/* import print layout | Druck-Layout einbinden */
@import url(../yaml/print/print_003_draft.css);
As you can see, the first stylesheet is the most basic of the YAML framework: base.css. It is loaded directly from the yaml/core/ folder.
In the second step, the screen layout is put together. A stylesheet for the navigation is loaded: nav_shinybuttons.css. This should remain unchanged, so again, the link is directly to the yaml folder. The screen layout and the content design is up to you: those files should be saved to your own css folder.
The third and last step connects the print layout, also available as YAML prefabricated components. In this example, one of these files (print_003_draft.css) is directly linked from the yaml/print/ folder, without customization.
Important: the basic principle of separation of your custom CSS files from the YAML files has many advantages, borne out by practical use.
If you want to make changes to any files of the framework or use any of the file templates, copy the file to your css folder and do not work with the original.
Unchanged original components should be imported directly from the yaml folder into your layout. When updating the framework, you need then only overwrite the yaml folder.
Adjustments for Internet Explorer
All modern browsers (Firefox, Safari, Opera, etc.) have their CSS needs met with the central stylesheet linked from the (X)HTML source code. Only Internet Explorer needs extra CSS adjustments to be able to display YAML-based CSS layouts. These are integrated into the framework with a so-called conditional comment.
<head>
...
<!--[if lte IE 7]>
<link href="css/patches/patch_3col_standard.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
This is a special comment, which is only understood and interpreted by Internet Explorer. It allows IE to access a specially created stylesheet which no other browser will see. In the example above, this is the file patch_3col_standard.css, which contains all CSS modifications for IE.
More on these functions in Section 3.5: CSS Adjustments for Internet Explorer. For all other browsers, this is a normal HTML comment, and they ignore its content.
