`
txf2004
  • 浏览: 7043171 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

【zz】BluePrint and YUI CSS 框架

阅读更多

http://www.ibm.com/developerworks/cn/web/wa-htmlcss/?ca=drs-tp4608

[my word] 这是一篇介绍CSS框架的文章,虽然短,却比我以前看过的css框架的东西覆盖了更广的方面,每一方面都是一掠而过,也许在看过那些tutorial之后再来这么一篇高屋建瓴的文章,有助于你对CSS框架具体如何使用认识的升华

编写更优美的网页

Cascading Style Sheets (CSS) 框架可以加速和简化网页的设计和开发。此外,CSS 框架可以在所有浏览器中生成更加标准化的结果。本文将介绍两种独特的 CSS 框架。

大约在 1950,在构建了 L 型 Usonian 房屋之后,建筑师 Frank Lloyd Wright 引入了 Usonian Automatic —— 一种全新的成品部件系统和一系列简单的技巧,允许外行建造大多数新房屋的结构。对于 Wright 而言,Usonian Automatic 房屋非常经济、实用、有吸引力,并且将改变房屋的格局。

Wright 系统的核是一个标准化的 4x12x24 英寸的带凹面的混凝土或玻璃砖块。举例来说,建一堵墙需要花三个步骤。首先,砖块的堆砌不需要灰泥。接下来,横向及垂直钢筋插入在砖块中以形成框架。最后,灰泥填充到边缘间隙中以固定钢筋和砖块,以及凝固结构。因此,除了搭建根基之外,大部分工作都可以由任何有决心的、动手能力强的人独立完成。

虽然灵活,但 Usonian Automatic 系统在实践中被证明难以实现且费用昂贵,这让 Wright 感到异常沮丧。与 Wright 的目标相反,许多房主都开始找专业承包人来建房。尽管如此,为了转换搭建舒适房屋的经济局面,Wright 的系统尝试提供了完整的基础设施 — 材料、技巧和底蕴 — 其价值是不可忽视的。Usonian Automatic 简直就是一个框架。

软件开发框架

软件开发也可以从框架中受益。与 Usonian Automatic 相似,软件框架可以简化代码的构建,从而允许开发人员将精力更多地集中于软件用途上,而不是简单组装工作。

举例来说,Apple® 的知名框架 Cocoa 提供了各种工具、类库、技术以及体现公司应用程序开发方法。通过采用 Cocoa,Mac 开发人员不需要完全重新设计。他们可以将时间花在一些独特、有价值、有市场的特性上。

除了 Cocoa 之外,还有许多其他的软件框架可用。Zend 提供了同名的 Zend Framework 用于 PHP 开发。Django、Rails 和 Catalyst 分别对应于 Python、Ruby 和 Perl 应用程序提供了一个基于 Model-View-Controller (MVC) 的框架。Nokia 的 Qt 是一种跨平台的(包括 Mac OS® X、Linux® 和 Microsoft® Windows® 等)图形应用程序开发框架。

确实,几乎软件开发的每个方面都提供了至少一个框架。这对于任何编程技术的第二代及更后代尤为正确。早期的试验和错误有助于形成更好的实践,并能启发创新,从而在下一代框架中加以利用。

Django 和 Rails 已经证明,服务器端 Web 开发已经日益成熟。以浏览器为中心的应用程序开发也是如此。SproutCore 是一种针对基于浏览器的应用程序的富 JavaScript 框架,并且 Flex 和 Silverlight 分别提供了一个完整的应用程序栈。

但奇怪的是,网页开发 —— 对于任何在线工作都是一项重要、基本的任务 —— 始终保持着较慢的发展步伐。或者说是在原地踏步。在过去两年中出现了许多网页框架,它们使 Hypertext Markup Language (HTML) 和 CSS 在各种浏览器中的构建更加简单、速度更快且可预测性更高,甚至实现了标准化。

本文将介绍两个用于网页构建的框架:Blueprint 和 Yahoo!® User Interface (YUI) Grid。两个框架都是可以免费使用和互换的,分别遵照 Massachusetts Institute of Technology (MIT) License 和 Berkeley Software Distribution (BSD) License 的条款。本文将分别介绍两者的创新之处和功能,并指导大家完成一系列示例。您可以选择最适合自己的框架。



回页首

Blueprint 简介

由于 HTML 是一种标准,并且所描述的是结构而非样式,因此 Blueprint 框架是完全作为 CSS 实现的。要使用 Blueprint,您在设计网页时要以 Blueprint 为指导,然后再设计或生成 HTML,以便将 Blueprint CSS 样式应用于 HTML 元素。实际上,由于 Blueprint 提供了强大的 CSS,因此您可以在 HTML 中设计网页,而不必使用图像设计程序来模拟最终页面,比如说 photoshop。从一定意义上说,Blueprint 提供了真正的所见即所得的(WYSIWYG)网页设计,因为您的原型将使用与最终站点相同的代码。

此外,由于 Blueprint 的主要作用是模拟打印页的外观,因此使用 Blueprint 进行交互式的设计的感觉更像是在使用 QuarkXPress 或 Adobe InDesign。Blueprint 样式基于像素和一个 18 像素的基线网格。借助设计天赋和努力,您可以创建具有专业外观的页面。

Blueprint 的 CSS 样式(大约 250 种)可划分为三类功能,如 表 1 所示。

表 1. Blueprint 的 CSS 样式类别

类别
描述

重置
清除浏览器关于填充、类型样式以及其他特性所有假定。可以将重置看作一个干净的面板:您只能看到 Blueprint 或自己明确定义的样式和效果。
清单 1 的 Blueprint 用于重置的 CSS 代码。

网格
定义了一个最高容器、各种固定列宽,以及其他许多用于左右移动各列、添加边框和构建优美表单的修饰符。一种网格样式甚至还能为基本列填充颜色,以简化设计和调试。大多数 Blueprint 样式都是作为 CSS 类实现的,因此您可以通过向某个 HTML 元素分配一个或多个类来混合效果。

版式
控制页面文字的外观。HTML 的 type 元素用 em 定义,从而允许页面外观在文字大小改变时保持一致和有序。版式 CSS 还将所有元素的垂直对齐设置为 baseline(清单 1 中 CSS 代码的最后一行),这样所有框中的文字,不论嵌入有多深,都可以保持对齐。

清单 1. Blueprint 用于重置的 CSS 代码

				
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;

图 1 展示了 Blueprint 的一种用途。网络上提供了该示例(见 参考资料)。

图 1. Blueprint 样式的 HTML 页面的一个例子
Blueprint 样式的 HTML 页面示例,显示了标题、子标题和各种标头框(左侧是大块内容区域,右侧是侧栏)。

图 2 显示了相同的页面,只是字体变得更大了。网格仍然紧凑且相同,因为尺寸是使用像素指定的。

图 2. 与图 1 相同的 HTML 页面,但通过浏览器首选项增加了字体大小
与图 1 相同的 HTML 页面,具有相同的布局,但通过浏览器首选项增加了字体大小。

Blueprint 的默认网格是 950 像素宽,分为 24 个由 10 像素分隔线隔开的 30 像素宽的列:[(24 列 * 30 像素/列) + (23 分隔线 * 10 像素/分隔线) = 950 像素]。如果您偏好或者需要更宽或更窄的网格或不同的列宽,Blueprint 提供了一个 Ruby 工具用于将 Blueprint 重新生成到您的 规范中。Ruby 工具还创建了一个网格图像,您可以在 Photoshop 中引用它,并且它压缩了最终的 CSS 以减小文件大小,从而缩短了传输时间和带宽。

使用 Blueprint 创建网页

为了帮助您熟悉 Blueprint,本文将创建示例页面的一部分,如 图 1 所示。

第一步是在您的 HTML 页面中包括 Blueprint 的 CSS 文件,如 清单 2 所示。这段 HTML 代码假定您将 Blueprint 文件保存在 Web 根目录 css/blueprint 的某个子目录下。

清单 2. 将 Blueprint 的 CSS 文件包括在 HTML 页面中

				

<!--[if IE]>
<link media="screen" rel="stylesheet" type="text/css"
   href="css/blueprint/ie.css" />
<![endif]-->
<link media="screen" rel="stylesheet" type="text/css" href="css/blueprint/screen.css"><link media="print" rel="stylesheet" type="text/css" href="css/blueprint/print.css"><link rel="stylesheet" type="text/css" href="css/custom.css">
   ...

共有三种标准的 Blueprint 文件,如 表 2 所示。

表 2. 标准 Blueprint CSS 文件

文件
描述

ie.css
专门用于重置 Internet Explorer 的代码

screen.css
保存用于屏幕显示的样式

print.css
声明一组用于打印的默认样式

通常,您不应该编辑 Blueprint CSS 文件。而是应该在一个单独的文件定义您自己的样式,并根据需要覆盖 Blueprint 代码。这是最后一个文件 css/custom.css 的作用,这个文件是作为您自己代码的一部分创建和维护的。

首先,所有的 Blueprint 页面必须包含在一个适当标记的 divclass="container"。如果您希望查看页面的底层网格,可以添加 showgrid 类,如 清单 3 所示。

清单 3. 添加 showgrid

				

  

图 3 显示了默认的 Blueprint 网格。

图 3. 默认的 Blueprint 网格
空白 Blueprint 网格显示了一个空白页面,其中包含一些平均分布的列。

在使用 Blueprint 进行设计时遵循两个简单的规则:

  1. 将网格放在脑海中。
    Blueprint 预先定义了大量基于多个列的样式。举例来说,.span-4 样式的宽度包括分隔线在内达到了 4 列,或者 150 像素。您可以将此样式添加到任何种类的 HTML 元素中 —— 比如说 textarea —— 来将它的宽度扩展到 4 列。显然,您可以将 .span-4 应用于 div,但需要留意 div.span-n,其中 n 的范围是从 1 到 24,居于在左侧并且右边距为一条分割线的宽度。
  2. 将基线谨记于心。
    Blueprint 将整个页面的线高度设置为 18 像素,因此每个图像和文本都必须是 18 像素的倍数。

要继续此示例(回顾 图 1),页面的第一段和第二段是通过 alt 类轻松完成的,如 清单 4 所示。alt 类是 custom.css 中定义的一种自定义样式。

清单 4. alt

				

A simple sample page

This sample page demonstrates a tiny fraction of what you get with Blueprint.


页面的下一部分,即三个文本框所在的行,也是由 Blueprint 预先定义的一些 span 实现的,如 清单 5 所示。

清单 5. Blueprint 预先定义的 span

				
Here's a box

Lorem ...

And another box

Lorem ...

This box is aligned with the sidebar

Lorem ...



如前所述,带 span-n 标记的 div 横跨 n 列,位于左侧,并且右边距为一个分割线宽度。last 样式应该应用于任何序列的最后一列。令人惊讶的是,last 并未明确强制重新配置其后的任何元素;它仅仅将右边距设置为 0,这将覆盖 span-n 中 10 像素的默认右边距设置。而 hr 会强制清空,排除换行之后的任何元素。hr class="space" 将绘制一条白线,从而有效地呈现不可见的规则,但需要提供一个标准的垂直空白空间。

colborder 样式将在第一与第二以及第二与第三个框之间创建灰色线条。为了实现这条线,样式将右侧填充扩展至 24 像素,绘制了一条单像素线条(在列的中部),并将右边距扩展至 25 像素。由于 Blueprint 是基于像素的,因此保持网格对齐是非常必要的。

下一行内容与之前相类似,但第一列通过 prepend-1 修饰符稍微与网格有所远离,如 清单 6 所示。

清单 6. prepend-1 修饰符

				

testLorem ...

Integer cursus ornare mauris. ...

...
This is a nested column

Lorem ipsum ...

This is another nested column

Lorem ipsum ...

prepend-v 样式,其中 v 的范围是从 1 到 23,用于使用 padding-leftv 列和 v-1 分隔线预留足够的像素。

小狗图像的高度是 180 像素。由于它的高度是 18 的倍数,因此图像右侧和下方的文本在指定基线上仍然是等距的。

发现所有 Blueprint 技巧最好的方式是从上至下读取 screen.css 文件。下面给出了一些要点和技巧:

  • hide 样式类使用 display: none; 隐藏任何元素。
  • addedremoved 样式类在 Asynchronous JavaScript + XML (Ajax) 应用程序中用于突出显示页面中添加或删除的元素。还有一个名称为 highlight 的类,它可以将任何元素的背景置为黄色。
  • 您可以使用 push-ipull-j 来将某个列向右移动 i 列,或向左移动 j 列。

再说一次,Blueprint 的方法是独一无二的。它强制使用通常在打印设计中出现的网格。但是,这并不一定有坏处。这项决策允许您很好地控制自己的站点在任何浏览器中的显示效果。

YUI Grids 简介

相反,YUI Grids 为 CSS 提供了固定宽度的页面和可变宽度的页面,并且它提供了任意深度的列嵌套。您还可以任意定位或移动各列,因此可以使用 CSS 简单快捷地对页面上的内容进行排序。举例来说,您可以将导航从左侧移至右侧,而只需要一处 CSS 修改。此外,您使用 Yahoo 自己的 JavaScript 库来扩充 YUI Grids,以提高交互性。您可以另外了解关于 YUI JavaScript 库的更多信息。本文侧重介绍 Grids 的样式表,它可以独立于 JavaScript 库运行。

YUI Grids 在许多方面都与 Blueprint 相似:

  • 它使用一组可预测的基线样式来简化版面。
  • 它定义了版式样式。
  • 它提供了许多预定定义的、适用于大多数 Web 应用程序的页面布局。

YUI Grids 还定义了一组列式网格,您可以通过嵌入来创建任意复杂的页面。

大约种 100 YUI Grids CSS 样式可以划分为三个类别,如 表 3 所示。

表 3. YUI Grids CSS 样式类别

类别
描述

文档
定义页面的宽度。

模板
描述各种流行的、双列页面格式。通常,一列比另一列宽,分别提供主要内容和导航功能。模板样式还提供了一些变量来交换两列的顺序。

网格
控制两个或多个 div 元素在一行中的显示方式。内嵌网格设置每个嵌入 div 的宽度,启用浮动,以及控制何时开始和结束一行。
与 Blueprint 不同,内嵌的网格样式使用百分比来描述各组件的宽度。因此,当页面的宽度增加时,整个网格以及网格中的各个元素也在随之增加。但是,网络的组件始终维持相对大小,比如说 66% 和 33%。

图 4 展示了一个通过嵌套实现的列布局。它的顶部和底部分别有一个页眉和脚注。内容区本身是一个含两列的网格,每个列又划分为一个两列网格。

图 4. 内嵌网格的 YUI Grids 布局
内嵌网格的 YUI Grids 布局屏幕截图。页眉后面是 4 列内容,底部有一个脚注。

使用 YUI Grids 构建网页

要使用 YUI Grids,Yahoo 推荐在 Web 浏览器中以严格的行为提供多个呈现模式。您可以在 HTML 文件的第一行中请求严格模式:


接下来,您必须包括 YUI Grids CSS。为了您的方便,Yahoo 提供了一个最简化的样式表。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css">

(您还可以下载文件,并将它保存在自己的 Web 根目录中,或者,如果只希望使用它的一部分特性,则可以下载它的各个组件。一个部分实现了重置(reset);另一个部分描述版式(typography);第三个部分定义网格元素(grid))。

与 Blueprint 相似,使用 YUI Grids 构建的页面必须拥有标准的组件,如 清单 7 所示。

清单 7. YUI Grids 的标准页面组件

				
<!-- header -->
<!-- body -->
<!-- footer -->

最外面的 div 的 ID 用于确定页面的宽度。共有四种样式,从 doc1doc4id="doc1" 用于指定 750 像素的页面;id="doc2" 用于指定 950 像素的页面;id="doc4" 用于指定更宽且越来越常用的 974 像素的页面。id="doc3" 是不固定的宽度。所有页面宽度样式都将内容居中。

站点内容应该放置在 ID 为 bddiv 中。

内容进一步划分为两个 “块”,一主一次,如 清单 8 所示。(可以根据需要再对块进行划分,如 图 4 所示)。

清单 8. 主块和从块

				

yui-b 表示 “块”,并且一个 YUI Grids 页面中应该始终有两个块。根据习惯,yui-main 一般显示在左侧,除非您向最外面的 div 添加了一个类样式以更改两个列的顺序。举例来说,

将 180 像素的区域置于左侧(否则应位于最右侧)。

每个块中都嵌入了一个风格。每个网格可以包含一个或多个子网格,或者一个或多个 “单元”。清单 9 是用于构建如 图 4 所示的四列布局的 HTML 和相关的 CSS。

清单 9. 用于构建如图 4 所示的四列布局的 HTML 和相关的 CSS

				

yui-g 代表 “网格”,而 yui-u 代表 “单元”。此处,outermost 网格(其名称仅仅是为了在讨论中便于区别)包括另外两个网格:firstgridsecondgridfirst 样式指示新 “行” 的开始,或者网络及单元的顺序。实际的内容将显示在各个单元中。

默认情况下,网格 —— 也就是 yui-g —— 在两个单元之间是平均分配的。您可以修改它,方法是使用一个特殊的类来替换 yui-g。举例来说,如果您希望将之前清单中的两个网格继续划分为两个单元,其中一个单元是另一个单元的两倍宽度,可以编写如 清单 10 所示的代码。

清单 10. 将两个网格继续划分为两个单元,其中一个单元是另一个单元的两倍宽度

				

yui-gc 将两个单元分别设置为可用宽度的 66% 和 33%。结果如 图 5 所示。其他的变量请参见 YUI Grids 文档。一个有趣的例外是网格样式 yui-gb,它可以平均划分三个 嵌入单元的空间。

图 5. 修改 YUI Grids CSS 网格中的单元的布局
与图 4 相同的 YUI CSS Grid,包含一个页眉、4 个列和一个脚注,但列宽已被改变,第 1 列和第 3 列比第 2 列和第 4 列宽。

YUI Grids 有些麻烦,但是它在所有的浏览器的都能正常运行,并且适用于移动设备。Yahoo 声称 YUI Grids 在它自己的站点中得到了广泛应用。如果是这样的话,它应该能兼容所有流行的浏览器。

结束语

除了 Blueprint 和 YUI Grids 之外,您还可以在网络上找到 10 到 12 种可用于加速网页设计及开发的框架。一些框架是 “重量级的”,详细指定了项目的组织和其他约定。其他一些则是 “轻量级的”。事实上,它们只是一系列带有解释的 CSS 代码。要找到所有的选项,在搜索引擎中输入 CSS 框架,细读结果并衡量您的项目是否能从中受益。

无论您选择哪种框架(如果您还没有框架,则应该选择一个),它绝对可以节省您的时间和工作。

Wright 的 Usonian Automatic 可能谈不上成功,但它的精神永存。

分享到:
评论

相关推荐

    blueprint——CSS框架

    由于 HTML 是一种标准,并且所描述的是结构而非样式,因此 Blueprint 框架是完全作为 CSS 实现的。要使用 Blueprint,您在设计网页时要以 Blueprint 为指导,然后再设计或生成 HTML,以便将 Blueprint CSS 样式应用...

    css框架Blueprint CSS

    总结起来,Blueprint CSS 是一个强大且实用的CSS框架,能够帮助开发者快速构建响应式的、视觉统一的网页。其网格系统、预定义样式和打印优化等功能,大大提高了开发效率,同时也降低了维护成本。对于任何希望提升...

    blueprint-css框架

    国外很好用的CSS框架.Blueprint 是一个 CSS 框架,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,BP由一个易用的网格、合理的布局和一个打印样式。自我感觉好用。故推荐于此

    Blueprint css框架2013年最新可视化操作工具-boks-v0.5.8

    最新版div+css可视化开发工具,boks-v0.5.8,适用于blueprint css框架的开发,拖拉拽即可导出漂亮的网页架构。

    CSS框架集合

    10. blueprint-css-v1.0.1-8-g9bf9513.zip:Blueprint CSS是一个流行的早期框架,以其网格系统闻名,帮助开发者快速创建响应式的页面布局。 11. yaml_331_110618[CSS框架]: YAML(Yet Another Multicolumn Layout...

    可视化 Blueprint 框架 CSS 生成工具

    《可视化Blueprint框架CSS生成工具详解》 在现代Web开发中,高效的前端布局和样式管理是提升项目质量和开发效率的关键。Blueprint框架就是这样一个旨在简化CSS样式的工具,它提供了一种结构化的方法来组织和构建可...

    Blueprint是一个CSS框架它的目的是减少你的css开发时间

    Blueprint CSS框架是一个高效且实用的设计工具,专为前端开发者设计,旨在简化CSS(层叠样式表)的编写过程,从而大幅度提高开发效率。这个框架以其强大的功能和易用性,深受许多开发者的喜爱。在本文中,我们将深入...

    Boks – 可视化 Blueprint 框架 CSS 生成工具[AIR]

    而"Boks – 可视化 Blueprint 框架 CSS 生成工具[AIR]"则是一款基于Adobe AIR平台的可视化应用程序,专门用于生成和定制Blueprint框架的CSS样式。 首先,让我们深入了解Blueprint框架。Blueprint框架包含以下几个...

    Blueprint CSS Framework 学习笔记

    这个框架提供了标准化的CSS规则,帮助开发者快速构建响应式和易于维护的网页设计。以下是对Blueprint CSS Framework主要特性的详细说明: 1. **重置CSS**:Blueprint首先对常见的43个HTML标签进行了统一的样式重置...

    blueprint CSS

    **Blueprint CSS** 是一个流行的 CSS 框架,它提供了一套预先定义好的样式规则,帮助开发者快速构建响应式的网页布局。该框架的主要特点包括网格系统、字体重置以及一系列实用的类名,使得 HTML 元素能够保持一致性...

    精选国外15个CSS框架.pdf

    从给出的文件【部分内容】中,我们能够提取出一系列与CSS框架相关的知识点,以下是对这些信息的详细解读。 ### CSS框架概览 CSS框架是一种为了快速、标准化地设计网页而提供的预设样式和类的集合。在现代网页设计...

    blueprint-css-v1.0.1-8

    "blueprint-css-v1.0.1-8" 是一个基于CSS的框架,它旨在帮助开发者快速构建具有统一风格和高效布局的Web页面。Blueprint CSS是流行的设计框架之一,尤其在2007年推出后受到了广泛的关注。这个版本1.0.1-8代表了该...

    blueprint-css

    蓝图(Blueprint)CSS 是一个开源的前端框架,专为简化网页设计流程而创建。这个框架的主要目标是提供一套完整的、可扩展的基础样式,帮助开发者快速构建具有专业外观和一致性的网页应用。它的核心理念是通过预定义...

    推荐10款CSS框架.docx

    6. **Blueprint CSS**:与ThinkCSS类似,Blueprint也是为了减少CSS开发时间而设计的框架,它提供了网格系统、布局样式以及打印样式,便于快速构建响应式和一致的界面。 7. **CSScaffold**:这是一款基于PHP的CSS...

    精品CSS软件包八款之3——frameworkThreev1.0116.03.2009 改编自 BlueprintCSS的CSS框架

    标题提及的是“精品CSS软件包八款之3——frameworkThreev1.0116.03.2009 改编自 BlueprintCSS的CSS框架”,这表明我们讨论的是一个名为“frameworkThree”的CSS框架,它是基于Blueprint CSS的改编版。这个版本是v...

    精选国外15个CSS框架整理.pdf

    这些CSS框架各有特色,有的专注于网格系统,如960 Grid System和YUI Grids CSS,有的强调简洁性和可读性,如CleverCSS,还有些如Emastic和Elements,提供更加全面的解决方案,涵盖工作流程和设计元素。选择合适的CSS...

    优秀的CSS 框架整理

    4. **Blueprint CSS**:Blueprint是一个旨在缩短CSS开发时间的框架,提供了一个强大的网格系统、字体排版规则和打印样式表,使得创建一致的设计变得容易。 5. **Schema Web Design Framework**:Schema专注于展示层...

    27款经典的CSS框架小结 网页制作必备

    作为最著名的 CSS 框架之一,YUI Grids CSS 提供了四种预设页面宽度,六种预设模板。其中的负 Margin 技术,使用度量单位 em,清除布局浮动等技术非常值得学习和借鉴。 3. Blueprint Blueprint 是一款成熟

Global site tag (gtag.js) - Google Analytics