Feasibility Study: Go through the mock and see if there are any unique element which you haven’t tried earlier, if it is there, make a note and do a feasibility study of that element, and speak with mock creators how the mock work. If every thing is fine, Just move on next step.
Basic GRID: It’s recommended to use YUI CSS Grids because they work well with all A grade browsers and well supported and documented. download reset-fonts-grids.css from YUI library, depending on the page width set id of the container div to “doc” to “doc4”, you can use custom width as well, but widths defined in the grids are good enough to cover all most all layouts, so you don’t have to worry too much on custom tweaking layouts. After that depending on the number of columns and left/right column with set class of container div to “yui-t1” to “yui-t6”. Here is list of doc ids and yui-t classes with measurements.
div#doc creates a 750px page width.div#doc2 creates a 950px page width.div#doc3 creates a 100% page width. (Note that the 100% page width also sets 10px of left and right margin so that content had a bit of breathing room between it and the browser chrome.)div#doc4 creates a 974px page width, and is a new addition to Grids in YUI version 2.3.0.
div.yui-t1 creates a narrow column on the left with 160px width.div.yui-t2 creates a narrow column on the left with 180px width.div.yui-t3 creates a narrow column on the left with 300px width.div.yui-t4 creates a narrow column on the right with 180px width.div.yui-t5 creates a narrow column on the right with 240px width.div.yui-t6 creates a narrow column on the right with 300px width.
Start with header: Divide header section using YUI nesting grid structures, you can use “yui-g” to “yui-gf”. Here are the details with partition measurements.
div.yui-g – Standard Nesting Grid – tells two children to each take up half the available space.div.yui-gb – Special Nesting Grid B – tells three children to each take up a third of the available space.div.yui-gc – Special Nesting Grid C – tells the first of two children to take up 66% of the available space.div.yui-gd – Special Nesting Grid D – tells the first of two children to take up 33% of the available space.div.yui-ge – Special Nesting Grid E – tells the first of two children to take up 75% of the available space.div.yui-gf – Special Nesting Grid F – tells the first of two children to take up 25% of the available space.
most popularly used grid partition is “yui-g” which splits given area into 2 equal parts, consider using the grid whichever suits well for you, keep in mind, if you are using YUI grids, you really don’t have to bother about clearing divs etc. But there can be a exception, but handle it case wise.
Follow same kind of partitions for Body and Footer, you will have Basic Grid ready with you now.
Asv3's Blog 