YUI3 CSS框架學習

YUI3的CSS與YUI2的CSS不同

改變最大的我覺得是Grids部分，YUI2中以模版的方式提供給我們調用，功能 中多選項也很多，而且配合Grid Build Tool，可以快速的生成復雜的頁面結構。但正因為其復雜，所以在一些需要自定義比較多的場景下使用起來就比較痛苦。YUI3一改以往的復雜性，僅僅是提 供簡單的頁面邏輯結構單元，我們可以自由的定義頁面的寬度，結構單元的分布。非常簡單。當然，目前還處于Beta階段，不知道后續會不會變的越來越強大。

YUI3 CSS Base

Base可以將眾多的HTML元素設置成一個基本的樣式，同樣，提供了全局和局部的選項，可以根據需要使用。

YUI3 Reset

YUI3的Reset同YUI2.8中的Reset有些區別，在YUI3的CSS Reset中，我們可以對所有HTML資源重設其表現，以達到不同瀏覽器下的一致表現（Page Level）。同時，還提供了一個局部的特性（Contextual），通過引用一個 .yui3-cssreset 類，可以針對局部的HTML進行樣式Reset（使用這種方法需要包含cssreset-context/cssreset-context- min.css文件）。這個特性對于開發人員是非常有用的。

YUI3 Fonts

在YUI2的Fonts中，使用em來表示文字的大小。但是在YUI3中，這一規 則被打破了，改為使用百分比來表示文字的大小。如下表，這樣的表達方式對于平時的書寫來說，是不太友好的。對于<pre> 和<code>標簽，會對里面的內容使用等寬字體（monospace）

YUI3 Grids

習慣了YUI2中的Grids System之后，初次轉換到YUI3中非常不習慣。因為YUI2提供了一個非常強大的工具（ YUI Css Grid Builder）。但同時，YUI2因為其強大，也帶了較高的復雜度，曾經因為為了調整頁面的寬度，而花費了不少的功夫。YUI3的Grids System卻是相當的簡單，看看下面這個列表，就能夠明白一二。

在YUI3中，所有的單位都轉換為百分比，因此首先需要為頁面制定一個總的寬度。最基本的方法是設置body的寬度，例如：

body {

     margin: auto;

     width: 960px;

}

在構建自己的頁面之前，我們需要在yui3-u*外面加一個yui3-g的容器。容器內的單元，可以根據自己的需要選擇不同的比例。

<code>

<div class="yui3-g">

     <div class="yui3-u-1-2">

          <div class="content">

          </div>

     </div>

     <div class="yui3-u-1-2">

          <div class="content">

          </div>

     </div>

</div>

</code>

默認情況下，每個位置單元間都是緊挨著的，沒有空間（這一點與YUI2也不同）。但是我們可以手工添加一個Gutter。

<code>

<style>

.yui3-g .content { 

     margin-right:10px;

}

</style>

</code>

流式布局的實現方式

流式布局，是指左右（或者只有一邊）欄寬度固定，中間部分內容可以隨著頁面寬度發生變化的頁面布局形式，可以通過設置Padding的方式來實現。

Dom結構如下：

<div class="yui3-g" id="layout">

     <div class="yui3-u" id="nag"></div>

     <div class="yui3-u" id="main"></div>

     <div class="yui3-u" id="extra"></div>

</div>

Style如下：

<style>

YUI3的項目主頁上提供了配合MenuNav Node Plugin，可以創造出眾多的菜單效果，非常值得一看。

在網上看到了一個 國外的哥們總結的網頁布局的歷史，非常有趣，翻譯一下吧：

• 1990－1993:黎明前的黑暗。黑暗騎士用有限的工具（headings、lists、paragraphs）為了部落的興盛而努力。
• 1994－1997:Table帝國。這一時期有了“Sidebar”這個重要發明。帝國的部落逐漸安定下來，并且開始建造各種復雜的頁面布局。
• 1998－1999:巴洛克時期。Table帝國時期建造的標志開始逐漸的破敗，瀏覽器的戰爭威脅到了文明世界的每個人。同時，大草原上開始不斷的出現使用“div”工具的野蠻人。
• 2000－2002:黑暗時代。經濟衰落了，Table帝國分崩離析，很多人被吸收到了野蠻人部落中，并且開始學習使用他們的工具。黑暗魔法開始流行，在這個時期，只有最偉大的薩滿才能夠建造一切。
• 2003－2005:復興。人們開始分享知識，講授瀏覽器技巧的學校開始不斷涌現。
• 2006－2010:啟蒙時期。CSS Framework出現了，對于瀏覽器的處理開始系統化。知識被寫到了法典中。

參考資料：

1、 YUI3 CSS Reset

2、 YUI3 CSS Fonts

3、 YUI3 CSS Grids

4、 YUI3 Alignment Example Page

5、 YUI3 Grids Are Dead Simple

轉自：http://www.cnblogs.com/cocowool/archive/2012/09/01/2667009.html