利用rails与blueprint进行迅敏开发(第一部分)

blueprint

这是我的新宠。曾经960也是这么风光一段时间,不过是时候见异思迁了!没办法,这是活在前沿的ruby人的生活态度。用古人的一名话讲,这叫做“流水不腐,户枢不螻”!

当然并不是960不好,但其内蕴就是这么多,再深挖也挖不出什么!YUI看来也只个很好的选择,什么负边距,液体布局,可变字体都是值得借镜的。然后能力有限,想一口吃成胖子是不可能。因此我的目光还是停留在blueprint吧,下个驿站再选YUI。

  • blueprint/src/reset.css: 基本已经总结出最佳实践的reset方案,为页面元素重置默认值,消除各游览器的差异。
  • blueprint/src/grid.css: 使用网格设计能提升可用性和可访问性。目前960与blueprint都是固态网格,缺乏像Veerle's Blog能自适应宽度的液体效果,不过这也足够支撑起最复杂的布局。
  • blueprint/src/typography.css: 关于排版的css,包含了一些非常精妙的文字排版样式。
  • blueprint/src/forms.css: 包含了一些表单样式。
  • blueprint/src/print.css: 很多时候我们没有考虑到用户的打印样式,很多无用的图片,广告都是用户所不希望打印,所以需要重新设置打印样式。
  • blueprint/src/ie.css: 包含了ie6和ie7的许多css hack。

下面遂个介绍一下。

reset.css

重置。

没有什么好说的。

默认行高为1.5。表格的border是分开的。

typography.css

排版。基本是用于块元素。进行大手笔的设计。

字体的单位是em,这比960有进步。其实里面许多样式都是属于重置范畴,只不过大把大把地运用em这个相对单位。

强制背景为白色,这点令我很不爽!

提供了几个好用的类。
基于表格的斑马线tr.even td {background:#e5ecf9;}灰蓝色。
缩小.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
放大.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
隐藏.hide {display:none;}
恬静.quiet {color:#666;}近似薄纱的浅黑色。
喧哗.loud {color:#000;}深黑色。
高亮.highlight {background:#ff0;}不用说都是黄色(黄褪技术源远流长啊)!
增加.added {background:#060;color:#fff;}草绿色,可以联想一下春天到来时万物复苏。
移除.removed {background:#900;color:#fff;}砖红色,秋天的颜色,野火烧后的硬泥。
.first {margin-left:0;padding-left:0;}清除左边的空隙。
.last {margin-right:0;padding-right:0;}清除右边的空隙。
.top {margin-top:0;padding-top:0;}清除上边的空隙。
.bottom {margin-bottom:0;padding-bottom:0;}清除下边的空隙。

forms.css

组件(widget),多务于内联元素,对细节处进行精雕细琢。

对表单的文本域,按钮,下拉选择框,单选铵扭等元素进行设置。

还提供了三种样式:.error.notice.success,恰恰是flash的三种状态。


grid.css

网格,真正用于布局的东西

首先提供了个container类把所有东西都包起来,为950px。

从span-1到span-24,宽度依次递增40px,最小的span为30px,最大的span-24为950,都向左浮动,换言之,他们即是块元素也能并列放置。最大能把页面分割成24列。除了span-24,其他的都有右边界,为10px。

以上是全局范围,在文本域与多行文本框中,也一样分为24列。最小为18px(十八周岁,成年的年龄),然后又40px往上加就是!与上面的.column类不同,它们左右都有空隙,边框为1px,内补丁为5px,即为12px。

还提供了23个后缀(append),让它的可见区往右边增加40*(2-x)px!23个前缀(prepend),从左边扩大可见区。24的pull,利用负边距技术,将目标整体往屏幕左边移动。功能相仿的24个push,移到右边,但保留原来移到的空间。

既然有column,便有gutter,可惜这是CSS3的。blueprint是统一把右边界,右边框与右补丁并成一条槽。


div.border {padding-right:4px;margin-right:5px;border-right:1px solid #eee;}

div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}

最后提供了一盒子类与两个经典清除浮动类。


ie.css

大量的hack,主要为IE5的怪异盒子模型擦屁股!


img { -ms-interpolation-mode: bicubic; }

IE7的私有属性-ms-interpolation-mode,用于解决缩放图片失真问题

其实IE的BUG挺多的,这个CSS也不全面,比起YUI差很多。如高度自适应问题(外围的div不能完全把里面的div框住),光一个height:1%显然是不够的。


.self_adaption { 

overflow:auto;/*非IE与IE7*/

 _height:1%;/*IE6*/

}

跨游览器的最小高度实现

.min_height{

 background:#ccc;

 min-height:100px; 

 height:auto !important; 

 height:100px; 

 overflow:visible;

}

在IE6下的最小宽度及最大宽度最好使用expression解决,例如: #id{_width:expression(document.body.clientWidth>1024?"700px":"auto");} li 元素中包含img 元素时,IE下img会多出5像素空白(现在发现,只要包含块级样式元素都出现这问题)。
  • 解决方法 一:使 li 浮动,并设置 img 为块级元素;
  • 解决方法 一:设置 ul 的 font-size:0;
  • 解决方法 一:设置 img 的 vertical-align: bottom;
  • 解决方法 一:设置 img 的 margin-bottom: -5px。

个人推荐方法三。

在表格中实现折行。


#table {

table-layout: fixed; /*相关资料*/

}

#table td{

word-break:break-all; /*相关资料*/

word-wrap: break-word;/*相关资料*/

}

一个在IE和Firefox都可以完美解决页面强制换行问题的解决方案,用到nowrap属性。

IE浮动边界BUG,也就是著名的双倍margin BUG。

出现条件:在一个容器中,如其内部的一系列容器以浮动形式排列,当我为这一浮动容器设置佐边距(margin-left)时,该死IE6竟然会将第一个浮动容器的左边距自动double(双倍),真是匪夷所思。

解决方法:将浮动容器的display属性定为inline。

引51js.com超版aoao的一句话

我现在一般只要出现float 后面就一定跟display:inline;

在YUI会将虚线框outline设成none,说是影响美观。最近看了一篇《页面的易用性:为什么要去掉链接周围的虚线框?》,决定再也不做这种傻事了!


button.css

按钮

这里所说的铵钮可不是<input type="button" value="普通按钮"/>,<input type="submit" value="提交"/>,<input type="reset" value="重置"/>这三种由input元素生成的按钮,而是被遗忘了的button元素所生成的按钮。想实现上述三个的功能,只需要把button type设置成相应属性就成了!

html的button标签和input type="button|submit|reset"起的作用是一样的,button标签在ie6,ie7下默认不写type属性的行为相当于<button type="button" >,即不会造成form 提交;而在ie8和firefox下不写type默认相当于<button type="submit" >, 即会提交表单。

为什么需要button元素呢?根据W3C的定义,button元素就是为了解决跨浏览器表现上的差异才应运而生。

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content.

而且button元素在css的制定上远远比input人性化多了!

用法


	<button type="submit" class="button positive">

	  <img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/> Save

	</button>



	<a class="button" href="/password/reset/">

	  <img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Change Password

	</a>



	<a href="#" class="button negative">

	  <img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel

	</a>

link-icons.css

顾名思义,为链接提供icon

用了CSS2的属性选择符,一看IE6就没戏。如:


/* External links */

a[href^="http:"]          { background-image: url(icons/external.png); } /*href^="http:"指以"http:"开头*/

a[href^="mailto:"]        { background-image: url(icons/email.png); }

a[href^="http:"]:visited  { background-image: url(icons/visited.png); }



/* Files */

a[href$=".pdf"] { background-image: url(icons/pdf.png); }  /*href$="http:"指以".pdf"结尾。*/

a[href$=".doc"] { background-image: url(icons/doc.png); }  

a[href$=".xls"] { background-image: url(icons/xls.png); }  

 

/* Misc */

a[href$=".rss"], 

a[href$=".rdf"]  { background-image: url(icons/feed.png); }

a[href^="aim:"] { background-image: url(icons/im.png); }

顺便一提,这部分东西完全就抄Elements(另一个CSS框架)!


fancy_type.css

一些漂亮的字体段落设定。偶是中文,没戏!

rtl.css

从右到左的阅读风格!没用!

一些实践!

分栏(Columns)的实现

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; }/*自定义的类,但违背原blueprint的计算公式*/

.span-26 { width: 1150px; margin: 0; }/*自定义的类,用于宽屏,显然950px实在太小气了一些!*/

/* The last element in a multi-column block needs this class. */

.last     { margin-right: 0; }

 

三栏的实现:1+16+4.last=24这种通过简单的计算就可以设计出分栏布局的思想是来自960的!


<divclass="container">

<divclass="column span-24">

Header

</div>

<divclass="column span-4">

Left sidebar

</div>

<divclass="column span-16">

Main content

</div>

<divclass="column span-4 last">

Right sidebar

</div>

</div>

 

四栏的实现:4+3+15+4.last=26


<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-15">

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 */

}

另一个例子




<div class="container showgrid">

    <div class="span-24">

        头部页眉

    </div>

    <div class="span-4">

        左边侧栏

    </div>



    <div class="span-16">

        <div class="span-8">

            居中行1-1

        </div>

        <div class="span-4">

            居中行1-2

        </div>

        <div class="span-4 last">

            居中行1-3

        </div>

        <div class="span-16 last">

            正文内容

        </div>

    </div>



    <div class="span-4 last">

        右边侧栏

    </div>

    <div class="span-24">

        页脚

    </div>

</div>

下一部分将讲述如何结合rails进行迅敏开发!

posted on 2009-07-08 00:55 司徒正美 阅读(...) 评论(...) 编辑 收藏

你可能感兴趣的:(blueprint)