出家如初,成佛有余

blueprint–css framework研究

Posted in Uncategorized by chuanliang on 2007/09/14

1、介绍

blueprint是一个所谓的css framework,相比较而言blueprint 代码中的注释还是比较详细的。

按照Jeff Croft的Frameworks for Designers(或中文版本 理解Web框架,和如何构建一个CSS框架)描述的如何构建一个css framework的方法:

There are several possible ways to go about building a framework, but the most common and arguably the most useful is to abstract your common CSS into individual stylesheets that each cover a particular part of the whole. For example, you may have a stylesheet that sets up the typography and another that handles the mass reset. The beauty of the approach is the ability to selectively include only the styles that you need. You may end up with six or seven different stylesheets in your framework, but if a particular project doesn’t need one or two of them, they don’t have to be included. The framework we created in our office has five stylesheets:.

  • reset.css—handles the mass reset.
  • type.css—handles the typography.
  • grid.css—handles the layout grid.
  • widgets.css—handles widgets like tabs, drop-down menus, and “read more” buttons.
  • base.css—includes all the other stylesheets, so that we only need to call base.css from our (X)HTML documents to use the entire framework.

blueprint的构建方式也与此类似:

分而治之

buleprint在功能组织上,将诸如布局(layout)、排版(typography)、组件(widget)、重置(reset)、打印(print)等功能分散到不同的css文件中。这样方便使用者只需要导入自己所要使用的功能,不用导入全部文件,提高页面装载性能。目前在组件部分只提供了对button的处理,尚未做到麦肯锡的MECE(”相互独立,完全穷尽”)的道。

统一接口:

尽管功能分散到多个css文件,但是导入时候,仍然只需要包含同样的文件screen.css文件,具体的导入细节在screen.css中再处理,统一了对外接口。

<link rel=”stylesheet” href=”css/blueprint/screen.css” type=”text/css” media=”screen, projection” />

blueprint 所包含的css文件说明:

  • screen.css
    This is the main file of the framework. It imports other CSS
    files from the “lib” directory, and should be included on
    every page.

类似于Jeff Croft的base.css功能,只需要包含此文件,就可以导入

  • print.css
    This file sets some default print rules, so that printed versions
    of your site looks better than they usually would. It should be
    included on every page.

用于处理打印,可以归类为widget。

  • lib/grid.css
    This file sets up the grid (it’s true). It has a lot of classes
    you apply to divs to set up any sort of column-based grid.

用于处理页面的布局(栏目)

  • lib/typography.css
    This file sets some default typography. It also has a few
    methods for some really fancy stuff to do with your text.

用于处理页面元素的排版。

  • lib/reset.css
    This file resets CSS values that browsers tend to set for you.

用于重置页面,对没有指定css属性的页面元素指定缺省值。

  • lib/buttons.css
    Provides some great CSS-only buttons.

用于处理按钮,可以归类为widget

  • lib/compressed.css
    A compressed version of the core files. Use this on every live site.
    See screen.css for instructions

提供压缩过的(包含grid.css,tyopgraphy.css,reset.css,buttons.css)的css文件。

2、各模块用法研究

2.1、grid.css研究

  • 对跨浏览器居中处理的兼容性处理

一般而言,要处理firefox、ie在处理居中时候的不同,采用如下方式:

body
{
text-align: center;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}

摘自:http://www.maxdesign.com.au/presentation/center/

blueprint的处理方式:

body {
  text-align: center; /* IE6 Fix */
  margin:36px 0;
}

/* A container should group all your columns. */
.container {
  text-align: left;
  position: relative;
  padding: 0;
  margin: 0 auto;   /* Centers layout */
  width: 1150px;     /* Total width */
}
  • 分栏(Columns)的实现

blueprint的处理方式:

blueprint定义了.column , .span-x ,.last ,两者结合来实现分栏功能。

其中:.column定义栏目的float属性;.span-x定义栏目宽度;.last将margin-right置为0px,

.column {
  float: left;
  margin-right: 10px;
  padding: 0;
}

/* Use these classes to set how wide a column should be. */
.span-1   { width: 30px; }
.span-2   { width: 70px; }
.span-3   { width: 110px; }
.span-4   { width: 150px; }
...
.span-8   { width: 310px; }
.span-9   { width: 350px; }
.span-10  { width: 390px; }
...
.span-23  { width: 910px; }
.span-24  { width: 950px; margin: 0; }
.span-25  { width: 200px; }
.span-26 { width: 1150px; margin: 0; }
/* The last element in a multi-column block needs this class. */
.last     { margin-right: 0; }

三栏的实现:
<div class="container">
        <div class="column span-24">
                Header
        </div>
        <div class="column span-4">
                Left sidebar
        </div>
        <div class="column span-16">
                Main content
        </div>
        <div class="column span-4 last">
                Right sidebar
        </div>
</div>
     四栏的实现:
<div class="container">
        <div class="column span-26">
                Header
        </div>
        <div class="column span-4">
                Left sidebar
        </div>
        <div class="column span-3 ">
                Main content 0
        </div>
          <div class="column span-25">
               Main content  1
        </div>
        <div class="column span-4 last">
                Right sidebar
        </div>
</div>
注意把.container中的width(定义了整个页面的width)修改为1150px
空白栏目的实现:
   对于多栏目(例如5栏目),其中有空白栏目(例如左右两栏目为空白),可以使用.append-x和.prepend-x来填充。
其中.append-x在栏目后(padding-right)添加空白栏目,.prepend-x在栏目前(padding-left)添加空白栏目。
  • 通用的容器定义
/* A container should group all your columns. */
.container {
  text-align: left;
  position: relative;
  padding: 0;
  margin: 0 auto;   /* Centers layout */
  width: 1150px;     /* Total width */
}

2.2、reset.css研究

reset.css的最初代码应该来自于Eric Meyer,Eric Meyer有两篇关于reset的日志,用于处理跨浏览器缺省值不同的问题。Eric Meyer的文档写得很精彩:

Reset Reasoning:http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/

Reset Reloaded:http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

  • 为何要reset

The basic reason is that all browsers have presentation defaults, but no browsers have the same defaults. (Okay, no two browser families—most Gecko-based browsers do have the same defaults.)
For example, some browsers indent unordered and ordered lists with left margins, whereas others use left padding. In past years, we tackled these inconsistencies on a case-by-case basis;

  • 为何使用reset style,而不是universal selector

所谓universal selector 就是使用* 来代表document所有的元素,例如

* {
    margin: 0;
    padding 0;
}


  • 关于reset style话题的一些资源:

YUI的reset库:http://developer.yahoo.com/yui/reset/

http://leftjustified.net/journal/2004/10/19/global-ws-reset/

以下几篇实际上是讨论css framework或tips的文章,只不过都提到了reset话题。

http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/

http://businesslogs.com/design_and_usability/my_5_css_tips.php

http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/

2.3、typography.css研究

typography.css用于确定页面元素缺省的排版格式(baseline):

Setting Type on the Web to a Baseline Grid:

http://alistapart.com/articles/settingtypeontheweb

2.4、buttons.css研究

Rediscovering the Button Element 讨论了用button元素来替代input元素的种种好处,button元素是提供了较为丰富的功能。

http://particletree.com/features/rediscovering-the-button-element

2.4、print.css研究

Eric Meyer有一篇关于css实现print功能的文章,可以作为理解print.css的参考。

CSS Design: Going to Print

Print Different

2.5、compressed.css

compressed.css是对blueprint几个文件压缩合成包,同时也对css文件进行了压缩,去除了无用的空格、换行、注释等文本。

此种方式用于在上生产系统部署时候使用,避免在页面导入多个css文件,同时也有利于提高页面性能。

按照lib/screen.css中的说明,应该使用了teenage提供的css压缩服务:

http://teenage.cz/acidofil/tools/cssformat.php

另外类似的提供对css、javascript进行优化、压缩的服务还有:

http://csstidy.sourceforge.net/ (开源)

http://www.cssdrive.com/index.php/main/csscompressor/

http://www.cleancss.com/ (基于csstidy)

3、使用例子

4、参考文档

http://code.google.com/p/blueprintcss/wiki/Tutorial

5、相关项目

blueprint-generator: http://kematzy.com/blueprint-generator/

tripoli : http://monc.se/tripoli/

Technorati 标签: , , , ,

css framework?

Posted in Uncategorized by chuanliang on 2007/09/11

我们给“框架”统一一个定义:一套包含工具、函数库、约定,以及尝试从常用任务中抽象出可以复用的通用模块,目标是使设计师和开发人员把重点放在任务项目所特有的方面,避免重复开发。

1、css框架定义篇

对于web开发而言,选择一个好的MVC开发框架、javascript框架的优点是毋庸置疑的:

  • 框架所提供的组件化设计,有助于软件架构的统一
  • 为知识提供持续积累和完善的框架
  • 避免重复发明新轮子,站在前人肩膀上,将有限的精力投入的无限的需求的满足上,保证开发的敏捷性和灵活性

而对于css开发,是否需要类似MVC这样的框架呢?

优点:

  • 重用
  • 页面框架的统一
  • 加快开发
  • 跨浏览器

缺点:

  • 必要性?
  • 学习曲线

关于css framework的评价标准(TBC):

  • 兼容标准
  • 跨浏览器
  • 简洁、简洁、简洁
  • 完整的使用文档和demo

一个css framework需要处理的内容(TBC):

2、css framework

不管度量的标准怎样,css框架对于学习和借鉴别人好的技巧(一个css框架发展史就是技巧史)和开发经验还是大有裨益的,下面是一些值得考察的css框架,有空研究一下:

YUI CSS库:CSS Reset , CSS Base , CSS Grids

YAML(Yet Another Multicolumn Layout):http://www.yaml.de/en/

Content with Style: A CSS Framework : http://www.contentwithstyle.co.uk/Articles/17/

Blueprint:http://code.google.com/p/blueprintcss/

tripoli: http://monc.se/tripoli/

Elements: http://elements.projectdesigns.org/index.html

WYMstyle: a CSS framework:http://www.wymstyle.org/en/
taffy-css-framework:http://code.google.com/p/taffy-css-framework/

3、参考文档

关于css framework的一些文章:

Why I don’t use CSS Frameworks:

http://warpspire.com/features/css-frameworks/

Frameworks for Designers(理解Web框架,和如何构建一个CSS框架):

http://css.chinahtml.com/2007/css-118602092315431.shtml

http://www.alistapart.com/articles/frameworksfordesigners

my-css-framework:

http://www.thatstandardsguy.co.uk/blog/2006/11/23/my-css-framework/

should-we-use-css-frameworks:

http://ajaxian.com/archives/should-we-use-css-frameworks

please-do-not-use-css-frameworks:

http://mondaybynoon.com/2007/08/27/please-do-not-use-css-frameworks/

Technorati 标签: , , , , , ,

加关注

每发布一篇新博文的同时向您的邮箱发送备份。

Join 312 other followers