The YUI CSS Foundation

Nate Koechley: "The YUI CSS Foundation&quo - Yahoo! Video
components

• Reset - a clean foundation(把所有的樣式取消, 包含h1-h6都同樣size, em.strong的效果也都取消.)
  
• Fonts - typographical control-> for free(1)arial (2)13px font size (3)16px line height
  
• Grids - layout and page control
  
• Base - basic helper/snippets lib (把Reset取消的code放回來, 如果要自己design style, 就不需要include這支, 因為production的css會蓋過Base蓋過Reset不太make sense)

fonts.css (font.css在IE下可以改變字型大小的原因是因為apply到後面的*font-size:small & *font:x-small而不是前面的13px)

body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
table {font-size:inherit;font:100%;}
de,kbd,samp,tt {font-family:monospace;*font-size:108%;line-height:100%;}

grid.css
1. 決定total page width，有下面五種 doc width
(1)#doc 750px, (2)#doc2 950px, (3)#doc3 100%, (4)#doc4 974px, (5)#doc-custom
#doc-custom的作法(1) 決定寬度: ex: 650px (2) 除以13: 46.15em (3) 乘上0.9759: 45.04 em

#custom-doc{
    margin:auto;
    text-align: left;
    width: 46.15em;
    *width: 45.04em;
    min-width: 600px; /* not necessary but recommanded */
}

2. 決定邊欄的位置&寬度，有以下6種template
(1).yui-t1: 160 left, (2).yui-t2: 180 left, (3).yui-t3 300 left, (4).yui-t4 180 right, (5).yui-t5 240 right, (6).yui-t6 300 right
Two content blocks: yui-b for blocks, 一個是比較寬的main，另一個是比較窄的的邊欄

<div id="doc">
    <div class="yui-b"></div>
    <div class="yui-b"></div>
</div>

把主要的main用yui-main包起來: identify the main block:

<div id="doc">
    <div id="yui-main">
        <div class="yui-b"></div>
    </div>
    <div class="yui-b"></div>
</div>

所以整個結構變成

<div id="doc" class="yui-t3">
    <div id="hd"></div>
    <div id="bd"> 
        <div id="yui-main">
            <div class="yui-b"></div>
        </div>
        <div class="yui-b"></div>
    </div>
    <div id="ft"></div>
</div>

3. 建立grid: 第一個yui-u or yui-g要多一個class 'first'，用來決定float方向
.yui-g: grid holder
.yui-u: grid units
兩個column,各佔50%

<div class="yui-g">
    <div class="yui-u"></div>
    <div class="yui-u"></div>
</div>

四個column,各佔25%

<div class="yui-g">
    <div class="yui-g first">
        <div class="yui-u" first>
        <div class="yui-u">
    </div>    
    <div class="yui-g">
        <div class="yui-u" first>
        <div class="yui-u">
    </div>    
</div>

uneven grid holder

.yui-gb 1/3 1/3 1/3
.yui-gc 2/3 1/3
.yui-gd 1/3 2/3
.yui ge 3/4 1/4
.yui-gf 1/4 3/4

review

1. Page width: div #doc
2. Templates: .yui-t1
3. Grids: .yui-g .yui-u
4. Fills all space 
5. Nestable & stackable