3.6 Creating the Screen Layout
The real work for the site creator begins with the actual building of the screen layout. The basic CSS components base.css und iehacks.css provide the consistent basic layout in all browsers, yet does not supply a unique graphic design.
Your CSS declarations should be kept in a separate stylesheet so as not to interfere with the basic structure. YAML furnishes suitable structures for you, but their use is not mandatory.
Components of the Screen Layout
The construction of the screen layout can be divided into three relatively independent sections:
- Design of the layout elements (header, footer, content area)
- Design of the navigational elements
- Design of the content
The YAML framework provides file templates and preformatted CSS components to create your own design in all three areas.
Avoid jumping in centered layouts
In pages that fit entirely within the browser's viewport, Firefox and Safari both hide the vertical scrollbar. Should the website suddenly become taller than the size of the viewport, vertical scrollbars appear. This disappearing act is irritating in centered layouts, as the center "jumps" from side to side.
This is not really about a bug as such, but something that simply annoys many users in centered layouts. This workaround is placed at the beginning of basemod.css and can be used or removed as desired.
/**
* (en) Forcing vertical scrollbars in IE8, Firefox, Webkit & Opera
*
* @workaround
* @affected IE8, FF, Webkit, Opera
* @css-for all
* @valid CSS3
*/
body { overflow-y:scroll; }
The CSS-3 standard property overflow-y forces the display of a vertical scrollbar, independent of the size of the corresponding element, and is fully supported by all the usual browsers.
Note: when validating your stylesheets as CSS 2, you will be warned that the property overflow-y is part of CSS 3: you can ignore this warning.
Design of the Layout Elements
The file basemod_draft.css in the yaml/screen/ folder is an empty design template to be used for the basic layout resulting from the source code structure of the framework.
@media screen, projection
{
...
/**
* Design of the Basic Layout
*
* @section layout-basics
*/
/* Page margins and background */
body { ... }
/* Layout: Width, Background, Border */
.page_margins { ... }
.page{ ... }
/* Design of the Main Layout Elements */
#header { ... }
#tovnav { ... }
#main { ... }
#footer { ... }
/*-------------------------------------------------------------*/
/**
* Formatting of the Content Area
*
* @section layout-main
*/
#col1 { }
#col1_content { }
#col2 { }
#col2_content { }
#col3 { }
#col3_content { }
/*-------------------------------------------------------------*/
/**
* Design of Additional Layout Elements
*
* @section layout-misc
*/
...
}
This template contains all the elements of a basic layout. You can copy this template and begin to desing the various containers as you wish. Additional elements should be integrated at the end of the file.
Here too, YAML provides examples and sample applications for your use: categorized and organized according to topic within the examples/ folder of the download package. All the examples use the same basic screen layout, found in the corresponding css/screen/ folder within each example topic in the CSS file basemod.css.
These numerous examples demonstrate how the basic YAML layout can be variously modified. This file is always the starting point for all customizations and adjustments.
Note: for now we will only discuss the basic method for creating a screen layout. Chapter 4 is dedicated to the thorough presentation of the wide-ranging modifications possible with the framework and intense analysis of many of the accompanying examples.
Desiging the Navigational Elements and the Content
These two points leave the site creator the most freedom. You can build them all completely from scratch or use YAML's many CSS components as a starting point for your designs. Due to their range and importance, each deserves its own section in the documentation: Section 3.7: Navigational Components and Section 3.8: Designing the Content.
Putting the Layout Together
So far, we have discussed the individual CSS components of the framework as well as the basic methods for creating a screen layout. The parts must now become a whole: the central stylesheet comes into play.
In Section 3.3: The Central Stylesheet, the layout's assembly is illustrated with the example of 3col_standard.html from the examples/01_layouts_basics/ folder of the download package.
Put all the CSS components of your layout together and link your central stylesheet to your webpage. Don't forget to set up your IE adjustments stylesheet, so that Internet Explorer has access to the iehacks.css stylesheet: it is absolutely necessary for the correct display of the layout.
As soon as the screen layout is finished, you can take care of any necessary CSS adjustments for Internet Explorer in your IE adjustments stylesheet.
