|
AdvancedLayoutModule
Notes on the Advanced Layout Module.
Advanced Layout ModuleLocation/stylesheets/modules/advanced-layout.css Source Codehttp://code.google.com/p/sparkl/source/browse/trunk/stylesheets/modules/advanced-layout.css SummaryThe Advanced Layout Module allows you to create flexible layouts with 1, 2 or 3 content containers by simply changing one class name in the html document. The layout is independent of the order in the markup. HTML Design Pattern<div id="content" class="sppt"> <div id="primaryContent"> Primary content goes here </div> <div id="secondaryContent"> Secondary content goes here </div> <div id="tertiaryContent"> Tertiary content goes here </div> </div> DescriptionThe page is automatically centred. The page is also given maximum-width of 1080px. This would normally be big enough for most web pages and stops the content spreading out too much over a large screen. It also helps when using background images, as it gives an upper-limit for the width. It is a good number to use as it is divisible by 2,3,4,5,6,8,10 and 12, which means that it can be split into different ratios easily. Why It's BulletproofThis module will produce a flexible layout that will allow content to flex with changes in the browser window size and also if the text is resized. It also means that the content order is not compromised by the design - the more important content can be placed first in the markup even if it doesn't come first in the finished web page. This means that people who are using screen readers will get the most important content first. It uses a minimal amount of code to contain the content - just four divs to separate the content into 3 different content blocks. This will make the code much easier to read and maintain. It uses floats that are auto-cleared so the columns of content can become as long as they need to. How it worksThe 'content' div that contains the three content containers is give the CSS property of overflow: hidden;. This makes it contain the floats and automatically clears them, avoiding the need for any awkward empty .clearfix divs. The 'primaryContent', 'secondaryContent' and 'tertiaryContent' divs are all relatively positioned. This allows them to be moved around from where they should be in the markup. This is the method used to change the order of the columns. IE FixesInternet Explorer does not understand the max-width property. Fortunately there is a propriety Microsoft-only solution that is applied in the ie-only.css stylesheet: * html #page
{
width:expression(documentElement.clientWidth > 1079 ? "1080px" : "auto");
}The * html at the beginning ensures that only IE6 and below are targetted. The expression property can be used to say 'if the width goes over 1079px, then set the width to 1080px, if it is not over 1079px then the width is auto (this can be changed to whatever the required width is). IssuesYou can currently only split the columns into 5 parts at most (this will be improved in future versions). Some layouts are not possible, for example tttsp, as it is assumed that the content that comes earlier in the markup will be the larger column. It is impossible to put a content container underneath one that it comes before in the markup. Some layouts seem to wrap in Internet Explorer at certain window sizes. It is not possible to achieve equal height columns without using one of the following techneques:
Further ReadingOther Modules
|
Sign in to add a comment
