YUI3 CSS框架学习

简介: YUI3的CSS与YUI2的CSS不同改变最大的我觉得是Grids部分,YUI2中以模版的方式提供给我们调用,功能中多选项也很多,而且配合Grid Build Tool,可以快速的生成复杂的页面结构。

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)
Screen Shot 2012 09 01 at 下午2 47 57
 
YUI3 Grids
习惯了YUI2中的Grids System之后,初次转换到YUI3中非常不习惯。因为YUI2提供了一个非常强大的工具( YUI Css Grid Builder)。但同时,YUI2因为其强大,也带了较高的复杂度,曾经因为为了调整页面的宽度,而花费了不少的功夫。YUI3的Grids System却是相当的简单,看看下面这个列表,就能够明白一二。
56deb1c6856f61d654c553abc8d4a94f
在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>
#layout {
    padding-left:300px; /* "left col" width */
    padding-right:150px; /* "right col" width */
}
#nav {
    margin-left:-300px; /* "left col" width */
    width:300px;
}
#extra {
    width:150px;
    margin-right:-150px; /* "right col" width */
}
#main {
    width:100%;
}
</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月前
|
前端开发
【第18期】一文读懂原子CSS框架
【第18期】一文读懂原子CSS框架
118 0
|
1月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
68 0
|
1月前
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
67 0
|
26天前
|
XML 前端开发 JavaScript
学习css
【5月更文挑战第25天】学习css
19 1
|
1月前
|
Java BI 数据库
基于SSM框架实现面向小微企业的简历管理系统企业简历管理系统(分前后台spring+springmvc+mybatis+maven+jsp+css+echarts)
基于SSM框架实现面向小微企业的简历管理系统企业简历管理系统(分前后台spring+springmvc+mybatis+maven+jsp+css+echarts)
|
1月前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS实践篇】CSS框架(Bootstrap/Foundation)快速上手
【4月更文挑战第30天】Bootstrap和Foundation是两种流行的CSS框架,用于构建响应式网页。它们包含预定义的样式、栅格系统和组件,加速开发流程。Bootstrap以其12列栅格系统闻名,而Foundation提供更定制化和模块化选项。了解并熟练运用这些框架的基本概念和组件,结合最佳实践和性能优化,能帮助开发者高效创建符合现代设计趋势的网页项目。
|
1月前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
|
1月前
|
存储 前端开发 JavaScript
《CSS 简易速速上手小册》第7章:CSS 预处理器与框架(2024 最新版)
《CSS 简易速速上手小册》第7章:CSS 预处理器与框架(2024 最新版)
42 2
|
1月前
|
前端开发 JavaScript 搜索推荐
CSS框架是前端开发中不可或缺的工具
【4月更文挑战第12天】CSS框架是前端开发中不可或缺的工具
20 2
|
1月前
|
前端开发
CSS动画知识点学习
【4月更文挑战第2天】CSS动画知识点学习
28 3