4.8.3 Layout Draft "Flexible Grids"
A "normal" column layout cannot always meet all the demands of current website design. More flexible systems are necessary to divide a web page into smaller units. The term "grids" has become common, as the units are often oriented to a specific matrix of rulers and spacing.
YAML can simply and easily adapt to this concept using subtemplates. They allow space to be divided according to percentages and can simultaneously be nested within each other. The layout example "flexible_grids" demonstrates some of the possibilities of such grid-based layouts.
/examples/06_layouts_advanced/flexible_grids.html
Layout Draft in Detail
The central stylesheet layout_grids.css contains the following CSS components:
/* import core styles | Basis-Stylesheets einbinden*/
@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_draft.css);
First, we link the basic stylesheet base.css from the yaml/core/ folder as well as the unmodified navigation nav_shinybuttons.css.
Then we import the basic version of the screen layout basemod.css, which forms the basis of the layout. For the print layout, we need to link the unchanged print_draft.css from the yaml/print/ folder.
Important: subtemplates are not generally linearized for print, as their use is too variegated to predict. The page creator must regulate any desired linearization individually.
Implementation of the Grid Concept
This draft is implemented by adding the necessary subtemplate containers to the HTML source code. As you can see in the screenshot, the content columns of the basic layout are obviously no longer necessary.
The label "subtemplate" actually implies that these components are meant to be inserted into the content columns. That was indeed the original goal. Yet the nesting possibilities make them particularly interesting for layout development.
Correspondingly, I break here with the standard source code structure and completely replace the content columns #col1 to #col3.
Structure of the Upper 66|33 Block
First, we must ensure that the upper and lower blocks are properly aligned with each other. The upper block uses a division of 66% | 33%, while the lower block divides into 33% | 33% | 33%. The right containers of both blocks duly reach the same width. In the second step, the 33% container of the upper block is divided again with a further subtemplate into two equal areas. The content containers are inserted so that they take up the same vertical space in the upper as in the lower block.
Structure of the Lower 33|33|33 Block
This is a simple subtemplate divided into 33% | 33% | 33%. The only peculiarity compared to the standard structure is that the center content block (.subcl) must be floated left. The reason is simple: the text within should end flush with that of the 66% container above it. If the block were centered, the margins would be different in the upper and lower blocks.
<!-- #main: Beginning of Content Area | Beginn Inhaltsbereich -->
<div id="main">
<a id="content" name="content"></a><!--Skiplink:Content -->
<!-- Subtemplate: 2 Columns with 66/33 Division | 2 Spalten mit 66/33 Teilung -->
<div class="subcolumns">
<div class="c66l">
<div class="subcl">
<h2>Blog</h2>
...
</div>
</div>
<div class="c33r">
<div class="subcolumns">
<div class="c50l">
<div class="subcr">
<h2>Sidebar</h2>
...
</div>
</div>
<div class="c50r">
<div class="subcr">
<h2>Advertisement</h2>
...
</div>
</div>
</div>
</div>
</div>
<!-- Subtemplate: 3 Columns with 33/33/33 Division | 3 Spalten mit 33/33/33 Teilung -->
<div class="subcolumns">
<div class="c33l">
<div class="subcl">
<h3>Article Archive </h3>
...
</div>
</div>
<div class="c33l">
<div class="subcl">
<h3>Latest Comments </h3>
...
</div>
</div>
<div class="c33r">
<div class="subcr">
<h3>Monthly Archive </h3>
...
</div>
</div>
</div>
</div>
<!-- #main: Ende -->
(Kopie 2)
The number of required DIV containers for this layout is naturally relatively large. Nevertheless, it is based completely on flexible widths and adjusts itself optimally to all screen proportions. The complete width is again assigned to the container .page_margins. The spatial divisions within #main are automatically adjusted by the subtemplates themselves. Certainly we could simplify the DIV constructions in this layout by using fixed widths -- but only then.
Adjustments for Internet Explorer
The adjustments for Internet Explorer are collected in the file patch_grids.css in the css/patches folder.
/* LAYOUT-INDEPENDENT ADJUSTMENTS ----------------------------- */
@import url(../../../../yaml/core/iehacks.css);
/* LAYOUT-DEPENDENT ADJUSTMENTS ------------------------------- */
@media screen, projection
{
/* No layout-dependent adjustments necessary */
}
Special adjustments for Internet Explorer are not required in this case, as the subtemplates are a fixed part of the framework. The adjustments are already all built into the file iehacks.css.
