How to …
Yaml provides a nice solution for column layout, center layout and fullscreen layout.
The last team-noir project was a fullscreen-design for our customer. I show you how easy it is to code such a template:
Dirk Jesse wrote a very good documentation:
Variations of the Markup
As demonstrated, the two CSS classes .page_margins and .page control the basic appearance of the layout, by setting the total width as well as margins, borders, or backgrounds if necessary.
In the source code described above, the outermost DIV container .page_margins surrounds all the other elements of the webpage. This results in a layout which in its simplest form is a rectangular box against the background of the <body> element. This effect is not always desirable.
So the main ascpect is to order your source by:
<div id="header / col1 / ...">
<div class="page_margins">
<div class="page">
...
</div>
</div>
</div> modify the basemod.css:
/* (en) Centering layout in old IE-versions */
body { text-align:center; }
.page_margins { text-align:left; margin:0 auto; }
/* (en) Layout:width, background, borders */
.page_margins { width: 100%; background: transparent; }
So as you can see – really easy coding -> thank’s to Dirk Jesse!
Related posts:
0 Responses to “How to build a YAML fullscreen layout”
Leave a Reply