4.8 Selected Application Examples
The following three sections explain example layouts for specific demands, all created with YAML. The structure of the examples will help you understand the various ways to design the basic layout and how to manipulate the framework. All the samples contained in the download package examples/ folder are based on a simple screen layout, explained below. Here's an overview:
The Screen Layout of the Examples
The basis is a flexible three-column layout with the column order 1-3-2 (the standard order) and the columns divided into 25% | 50% | 25% of the screen. This layout is in the examples/01_layouts_basics/ folder.
01_layouts_basics/layout_3col_standard.html
The minimum width is fixed at 740 pixels, orienting itself to a desktop resolution of 800x600 pixels, and allowing a display at that resolution without horizontal scrollbars. The maximum width of the layout is set at 80em, which in combination with the standard font size of 75% (16px*0,75=12px, set in content.css) results in a width of 960 pixels.
The screen layout is included via the CSS file basemod.css, which is found in every theme folder within the respective css/screen/ folder. Below is a code excerpt:
/* (en) Marginal areas & page background */
body { background: #9999a0; padding: 10px 0; }
/* (en) Layout: width, background, borders */
.page_margins {
min-width: 740px; max-width: 80em;
margin: 0 auto; border: 1px #889 solid; }
.page{ background: #fff; border: 1px #667 solid; }
/* (en) Centering layout in old IE-versions */
body { text-align: center }
.page_margins { text-align:left }
/* (en) Designing main layout elements */
#header {
color: #fff;
background: #000 url("../../../images/bg_gradient.gif") repeat-x bottom left;
padding: 45px 2em 1em 20px;
}
#tovnav { color: #aaa; background: transparent; }
#main { background: #fff }
#footer {
color:#fff;
background: #336 url("../../../images/bg_gradient.gif") repeat-x bottom left;
padding: 15px;
}
/* (en) adjustment of main navigation */
#nav ul { margin-left: 20px; }
#nav_main {background-color: #336}
/**
* (en) Formatting content container
*
* |-------------------------------|
* | #header |
* |-------------------------------|
* | #col1 | #col3 | #col2 |
* | 25% | flexible | 25% |
* |-------------------------------|
* | #footer |
* |-------------------------------|
*/
#col1 { width: 25% }
#col1_content { padding: 10px 10px 10px 20px; }
#col2 { width: 25% }
#col2_content { padding: 10px 20px 10px 10px; }
#col3 { margin: 0 25% }
#col3_content { padding: 10px }
Note: the structure of the file is based on the template basemod_draft.css from the yaml/screen/ folder, which was explained in Section 3.6: Creating the Screen Layout.
The file nav_shinybuttons.css from the yaml/navigation/ folder has been linked unchanged. The only adjustment was in the distance of the first menu item from the left edge of the layout (#nav ul { margin-left: 20px }).
Adjustments of the Screen Layout for Internet Explorer
The basic layout still needs two special adjustments for an error-free display in Internet Explorer 5.x and 6.0. The 3 Pixel Bug must be fixed and minimum and maximum layout widths set. The JS-expressions used are explained in Section 4.7.
The adjustments for Internet Explorer are kept in the patch file patch_3col_standard.css, corresponding to the basic layout, in the css/patches/ folder.
/* IE 3 Pixel Bug | Bug: 3-Pixel-Jog des Internet Explorers */
* html #col3 { height: 1%; }
* html #col1 {margin-right: -3px;}
* html #col2 {margin-left: -3px;}
* html #col3 { margin-left: 24%; margin-right: 24%; }
/* min-width / max-width for IE
* html #page_margins {
width: 80em;
width: expression( ... );
}
That finishes the most basic version of the screen layout.
