这篇文章很早之前就看了，不过没翻译，为了详细记录工作学习，翻译下，以便下次翻阅。(ps，看完以后，觉得使用YUI css框架来进行页面布局这种n简单。似乎下次翻阅就是深入css源处了)。
YUI推出的css框架很不错，reset.css消除各个浏览器对元素的默认值的处理， fonts.css是统一浏览器的字体属性，最最有意思的grids.css，符合yui模板开发就可以达到布局的效果，减轻工作。如果深入学习的话，也有很多宝藏可以挖掘，比如浏览器的兼容性问题。
原文：
http://www.thewebsqueeze.com/web-design-tutorials/yui-css-framework-tutorial.html
其实和YUI 提供的doc没什么差别，推荐还是YUI官方文档，YUI提供的文档还是很详细的。
(ps,翻译的可能不是很完整，大概意思到了。有错误欢迎大家指正)
What is YUI？
Yahoo User Interface 库是由一系列javascript特性和控件组成，用来帮助前端开发者开发丰富的用户界面。
YUI同样提供了一个很不错的CSS框架来帮组用户开发。这个CSS框架是很轻量的(当缩小了以后仅6KB),使用简单。
更加重要的是，它能有效运行在所有的A-grade级别的浏览器。
Why use it？
每一个好的UED都会告诉你制作一个好的网站的关键在于使用的是一致性。你的目标就是让用户尽可能少的用脑然后能
得知每一处的使用方法。人们看到网站按照一种特定的方式浏览，而YUICSS则覆盖这些常规的设计模式并且当使用的时候需要很少的学习时间。这种方式双赢。
但是，这个不是说Yahoo在试图让所有人按照他们的方式来设计网站。他们提供足够的空间来进行个性化的设置。
Reset
如果准备使用reset css 文件。非常推荐你深入的看看reset css 即使不使用YUI。每一个浏览器都有自己默认的设置。
当浏览器在元素的margins,line-heights,padding这些赋值的时候。如果时刻都写入布局中，网站会显得很粗糙。
这个reset方式很简单，并且极其的好用。它覆盖了所有浏览器的默认值，并且使各个浏览器都使用同样的数值。大量的使用 *{margin:0;padding:0}的时代已经过去了。使用reset可以更加的深入程序逻辑中。
Font
font这个部分让浏览器中的所有的元素的单位为em。font所作也是一样，覆盖掉浏览器中无关紧要的默认的font设置。这个 意味着YAHOO 提供了推荐的方式方便定义你的font数值大小。
Grids
YUI提供了一个很简单的方法来布局所有的元素，而且不是用笨重的table
YUI在页面分割的方面提供了常用的模式提供给设计者。当获取wrapper div的时候，就可以定义网站的宽度。且这些同样可以
定义其头部、body以及footer，很简单是吧？ 下面就是详细的看看
<!DOCTYPE html>
<html>
<head>
<title>My first YUI Layout</title>
<link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css
" />
</head>
<body>
<div id="doc2"><!--Wrapper div -> doc, doc2, doc3, doc4, or doc-custom-->
<!--当定义好wrapper div 以后 header body foot的宽度也已经定义好了。-->
<div id="hd"></div>
<div id="bd"></div>
<div id="ft"></div>
</div>
</body>
</html>
现在仔细的看看wrapper 的div。YUI所提供的四种不同的宽度
doc-750px; doc2=950px; doc3=100% doc4=974px
当然也同样可以自定义自己的所设置的宽度。
Templates
现在已经有页面的基本的布局了，增加的是YUI提供的模板页面了。关于模板的观念是非常的简单的。可以在body(bd)
中设置两个主要的模块的内容。且将内容放在这两个模块之中任意一个。可以通过设置div的class为"yui-b"来设置
块结构。一旦这样设置后，你就需要告知YUI这个块重要的一块。通过设置其div的id为"yui-main"。为何这样设置，是
因为有些的浏览器不支持":first-child"这样的伪类。
...
<div id="bd">
<div id="yui-main">
<div class="yui-b">
...some content here...
</div>
</div>
<div class="yui-b">
...some content here...
</div>
</div>
...
这个就告知YUI哪一块的内容是网站中重点。不管这块内容是在左边还是右边。(最好是将重要的数据放在不重要的数据
的前头，这个就保证了页面的数据在顶部，这个同样帮助SEO)
现在已经定义内容块。但是需要告知YUI如何进行展示。仅仅只需要在wrapper div上面添加class声明。YUI提供了6种
class值，说明如下：
.yui-t1 两列，窄的在左边，160px
.yui-t2 两列，窄的在左边，180px
.yui-t3 两列，窄的在左边，300px
.yui-t4 两列，窄的在右边，180px
.yui-t5 两列，窄的在右边，240px
.yui-t6 两列，窄的在右边，300px
在wrapper 的div上面添加设置class为yui-t6为常见的布局
<div id="doc2" class="yui-t6">
Special Grids
如果不想使用之前那种定制的模板，想使用3列这样取代两列。或者想添加其他的东西到区域块中。没有问题，
YUI有个很不错的布局机制，包含了各种个性化定制的布局。而不用使用table来布局。
Grids.css在这个方面的工作方式和上面的模板也类似。对于grid有一个外包含的div(grid)，和单元cell div (yui-u)工作的方式，和yui-b很相似。参考代码：
<div class="yui-g">
<div class="yui-u first"
>
...some content here...
</div>
<div class="yui-u">
...some content here...
</div>
</div>
上面的代码会创建布局有两个块平均分配占用容器。而这里真正需要注意的是想让哪一个div在左边出现。只需要
在那个div的class属性里面添加 first
和yui-g的平均分配两列相似，有下面6种布局方式可以使用：
yui-g 标准布局 1/2-1/2
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
现在来看看关于布局的内嵌的方式。如果想要一个gird展现为4列。则代码如下：
<div class="yui-g">
<div class="yui-g first">
<div class="yui-u first">
...some content here...
</div>
<div class="yui-u">
...some content here...
</div>
</div>
<div class="yui-g">
<div class="yui-u first">
...some content here...
</div>
<div class="yui-u">
...some content here...
</div>
</div>
</div>
需要注意的是：当yui-g
被嵌套到父yui-g
中的时候，这个yui-g
就如同unit一样。就没有必要再添加一个yui-u来包裹
关于在线进行YUI CSS排版
http://developer.yahoo.com/yui/grids/builder/
这个很不错哦~
分享到：
相关推荐
9. yui_2.9.0[雅虎CSS框架]：雅虎的YUI（Yahoo! User Interface Library）是一个完整的前端开发库，包括CSS框架、JavaScript库和一些实用工具，特别适用于大型复杂项目。 10. blueprint-css-v1.0.1-8-g9bf9513.zip...
**YUI（Yahoo! User Interface Library）框架API详解** YUI是雅虎公司推出的一款开源JavaScript库，旨在帮助开发者...在实际开发过程中，查阅YUI的API文档将是非常有益的，它将解答你在使用过程中遇到的大部分问题。
文档中提到的这15个CSS框架代表了前端开发中广泛使用的一系列工具和方法。开发者可以根据项目需求、个人偏好、以及框架特点来选择合适的框架。一些框架专注于布局和组件，而其他框架则更加注重于一致性和可访问性。...
标题中的“精选国外15个CSS框架整理.pdf”指的是一个包含15个流行且在国外广泛使用的CSS框架的资源集合。这些框架旨在简化网页设计过程，提高开发效率，并确保跨浏览器的兼容性。以下是对其中一些框架的详细说明： ...
CSS框架是网页设计中的一种工具，它集合了一系列预先编写的CSS文件，旨在简化网页布局、样式设计和跨浏览器兼容性的处理。这些框架包含了基础布局、表单样式、网格系统、样式重置等常见元素，帮助开发者快速构建网页...
YUI框架包含了许多模块，如DOM操作、事件处理、动画效果、CSS样式管理、Ajax通信、数据存储以及图表绘制等，使得开发者能够更加高效地构建复杂且可扩展的Web应用程序。 1. **DOM操作**：YUI提供了一套强大的DOM操作...
本框架名为"css reset框架"，是作者结合YUI等优秀框架的精华部分，经过三年工作经验的积累和提炼而成，旨在提供一个统一的基础样式，让HTML5开发变得更加高效和顺畅。 首先，我们来了解一下CSS Reset的核心概念。...
下面是一些不错的CSS框架，推荐学习使用。 Elements CSS Frameworks Elements 是一个基础CSS框架，它用来帮助设计者书写CSS更加快捷简单。它不仅是一个框架，它拥有自己的工作流。它拥有你需要完成项目的各种...
下面给你推荐了27款优秀的CSS框架，你可以选用。 1. 960gs 960 像素的页面宽度似乎成为了一种设计标准，在当前各种分辨率下，能够很好地展现网页内容。提供较为常用的尺寸来简化网页设计过程，使工作简单高效。 2. ...
最近做了一个项目，使用了Ext框架，项目做好了，结果客户一试用，打开一个页面要6秒，这个页面是用户经常要用的，要频繁打开的，这样用户就受不了了，怎么办？怎么办？怎么提升打开速度？想了各种办法，只能看看压缩...
本教程将深入探讨Jquery、YUI和ExtJs这三大JavaScript框架在表单验证和提示功能方面的应用。 **jQuery** jQuery是一款轻量级、高性能的JavaScript库，以其简洁的API和跨浏览器兼容性闻名。在表单验证方面，jQuery...
在Web开发中，布局设计是至关重要的，YUI提供了一套完整的布局解决方案，如Grids CSS框架，可以轻松实现响应式设计，适应不同屏幕尺寸和设备。在这个例子中，左中右三个模块的划分，正是通过YUI的Container组件和...
**YUI 2.7：一个全面的JavaScript和CSS框架** YUI（Yahoo! User Interface Library）是雅虎公司开发的一个开源的JavaScript和CSS库，它为构建高性能、跨平台的Web应用程序提供了丰富的工具和资源。YUI 2.7是这个库...
Yahoo用户界面库（YUI）是一款由Yahoo开发的开源JavaScript和CSS框架，旨在帮助Web开发者构建高性能、易用且可扩展的网页应用。YUI 2.5.2是该框架的一个重要版本，包含了丰富的组件和工具，为开发人员提供了强大的...
UI Library (YUI) 3.0版本的一个实例集合，旨在帮助开发者理解和应用这一强大的JavaScript和CSS框架。YUI是一个开源的前端开发工具集，用于构建高性能、可扩展的Web应用程序。这个压缩包很可能是包含了一系列的代码...
Yahoo UI 是一个开源的JavaScript库和CSS框架，由Yahoo公司开发，旨在简化Web应用的构建过程。YUI 包含了多种模块，如事件处理、动画效果、DOM操作、以及CSS组件等，为开发者提供了一套完整的工具集。其CSS部分提供...
3. **CSS样式和布局**：YUI包含一套响应式设计的CSS框架，如Grids布局系统，帮助开发者快速创建响应式的网页布局。 4. **数据管理**：YUI提供了Model、ModelList和Store等组件，用于数据的存储、管理和同步，与...