4.3 Basic Variations
YAML offers you many ways to customize the basic layout to your wishes. I will explain these possibilities in this and the following sections. First let us examine the (X)HTML source code structure and the column order within.
The order of the column containers in the (X)HTML source code is fixed and should not be changed: all CSS components, in particular the adjustments for Internet Explorer, depend on this structure.
The basic layout can be varied and yet retain its full functionality in all browsers -- in particular the IE clearing, which ensures that #col3 even in IE remains the longest column and permits graphic-free column separators.
Accessible layouts often demand that the actual content of a page be at the very beginning of the source code. The idea is to allow text browsers or screen readers easy access to the main subject matter. Other page elements (sidebars, advertising, etc.) should then follow further down.
Note: for the three-column layouts, Section 4.4 thoroughly describes the means for YAML to fulfil this concept absolutely. This involves the completely free ordering of the individual columns on the screen, independent of their position in the source code.
The disadvantage of the independent column order is that four of the six possible variations are incompatible with the IE clearing, and thus can no longer utilize graphic-free column separators.
3-Column Layouts
The basic layout uses the column order 1-3-2. The static column #col3 is surrounded by the two float containers #col1 and #col2. To switch to column order 2-3-1, you must merely change the float direction.
#col1 {float:right }
#col2 {float:left }
Switching the property allows you to change the layout order of the content in your side columns. You can use this method to layout a subnavigation on either the left or the right and yet still have it directly follow on the main navigation in the source code. The subnavigation need merely be placed in the column #col1 and one of the two column orders to locate it either on the right or the left.
In both cases, #col3 is meant for the main content and is in last place in the source code. This is certainly not ideal for accessibility purposes, but is easy enough to compensate for via the skip-links built in to the standard layout.
That is certainly the most often-used column arrangement -- but it is by no means the only one. An alternative layout can use one of the side columns for the main content. In this case, navigation, sidebars, and extras can appear in two narrow columns next to each other.
#col1 {width: 60%}
#col2 {width: 20%}
#col3 {margin: 0 60% 0 20%}
This variation also allows the switching of the float direction of the two columns #col1 and #col2, depending on the location of the main content, left or right. The advantage here is that the static column #col3 is still between the two side columns and the use of graphic-free column separators presents no problems.
2-Column Layouts
Two columns also allow an optimal placement of content in the source code while yet retaining full control of its position in the layout. Usually a narrow column will contain the navigation, and a wide column holds the content.
In our example, the navigation should appear on the left. There are two ways to accomplish this.
These images demonstrate the possibilities for column arrangement. Generally one uses one floating container (#col1) and one static container (#col3).
All these combinations provide full framework functionality: by this we mean the graphic-free column separators or backgrounds. Simultaneously, the content can be placed in the source code in a location optimized for search engines.
The required changes in the basic layout are minimal. The CSS must change the left / right orientation of the container #col1 and the corresponding margins for #col3. The width of the column alone determines which will perform which function within the layout.
Note: in the samples of the download package, there are four varieties of two-column layouts, each realized with containers #col1 and #col3. All the possible combinations for the container order have been included.
Further Alternatives for Sorting the Containers
But wait, there's more! The previous two-column layouts merely hid one of the two float columns. Yet a two-column layout can be built from #col2 and #col3, leaving #col1 available for other purposes.
The standard layout treats the three containers as columns of a multi-column layout. Of course - only you decide which container is used for what purpose and in which order.
The example to the right needs an additional container in full width between the page header and the two-column main area. In this case, it is simple to place #col1 directly above the two other columns #col2 and #col3.
#col1 {float: none; width: auto; }
#col2 {float: left; width: 25%; }
#col3 {margin-left: 25%; margin-right: 0 }
There are few restrictions in the placement of the column containers on the screen. As the source code itself remains unchanged, it is quite easy to recognize and work around possible stumbling blocks in the known IE CSS bugs.
Generic CSS Classes for Layout Design
Besides the possibility of alternative layout options through the integration of alternative stylesheets, taking advantage of the CSS cascade, you can now use the following standard classes to hide and display the columns.
/**
* @section generic classes for layout switching
* @see www.yaml.de/en/documentation/practice/basic-variations.html
*
* .hidecol1 -> 2-column-layout (using #col2 and #col3)
* .hidecol2 -> 2-column-layout (using #col1 and #col3)
* .hideboth -> single-column-layout (using #col3)
*/
.hideboth #col3 { margin-left: 0; margin-right: 0; }
.hideboth #col3_content{ padding-left: 20px; padding-right: 20px; }
.hidecol1 #col3 { margin-left: 0; margin-right: 25%; }
.hidecol1 #col3_content{ padding-left: 20px; }
.hidecol2 #col3 { margin-left: 25%; margin-right: 0; }
.hidecol2 #col3_content{ padding-right: 20px; }
.hideboth #col1, .hideboth #col2, .hidecol1 #col1, .hidecol2 #col2 { display:none; }
The relevant class should be assigned either to the body element or any other parent container of your columns (e.g. #main).
These classes must of course be adjusted to the desired column widths of the screen layout. Here they are meant as orientation tools and have only the standard values.
Note: the use of these classes for modifying the layout is particulary useful in the context of Content Management Systems. Many CMS do not offer access to the HTML header, so that exchanging stylesheets for layout modification is difficult to impossible. Alternate versions of the basic layout often require separate templates.
Manipulating the HTML elements within the body, on the other hand, is generally simple. By using these generic classes, a template can yet be easily modified.
The following example demonstrates the usage of these generic CSS classes:
examples/04_layouts_styling/dynamic_layout_switching.html
