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 #doc2. Templates: .yui-t13. Grids: .yui-g .yui-u4. Fills all space 5. Nestable & stackable