BluePrintCSS(Deprecated)
Calvin Xiao edited this page 2014-01-26 19:42:55 -08:00
This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

#BluePrint CSS Framework(Deprecated) (下个迭代将换成 Twitter Bootstrap!!!!!!!!!) Blueprint CSS 提供了最基本的页面/表单美化 和 Layout控制能力。

##1. Layout控制 之前YUI CSS一层包一层,又container又component的太恐怖了,BluePrint简单的将页面设定为950px宽,然后平分了24格,每格30px宽而且margin-right 10px,你的div想要多少格,直接说就是了,比如span-12就要了12格宽。 如果你不是950px,不想分24格,也可以利用一些计算器,重新计算生成。

然后还有.last,.append,.top .bottom 向4个方向顶格, append-4 ,prepend-2 可以在前后增加若干空白格,当然也是每格40px。最后还有prepend-top 和append-bottom,向上下顶1.5em,

##2. 定制化typography部分 Blueprint的typography和form虽然能让你偷不少懒,但有点管得太多了,最明显是一些颜色的部分,比如下面的Table部分,还有链接颜色。 不是快速开发的原型项目,可能要自己逐条Review一下。

thead th {background:#c3d9ff;}
tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}

还有对一些消息Box的控制,如.error, {background:#fbe3e4;color:#8a1f11;border-color:#fbc2c4;} 只要class名是error就生效,像jquery-validate插件,会在出错时把input框和旁边的的错误提示框都搞成.error, 所以我给这个.error加了个div的前缀来暂时规避。