thinkcq’s blog

一些有用的链接:

• Subtraction: Grid Computing… and Design
• TutorialBlog - Web Design Grid System Links
• Design Grid Systems by Mark Boulton
• Smashing Magazine - Designing with Grid-Based Approach
• Mezzoblue - Columns and Grids
• Design by Grid (gallery site)

CSS Grid Framework

CSS Frameworks and Tools

下面是一些流行的CSS栅格布局框架.

1. Blueprint CSS Grid Framework. 版本尽管只有0.7,但它非常强壮. 由许多的设计师与大量的工具生成CSS代码（超出标准的24栏950px框架). 也支持使用Blueprint插件.

2.Yahoo! YUI Grids CSS, Grids Builder. 这个框架早于Blueprint的CSS Grid Framework. 附带预置的6个模板和4个框架宽度，并且布局可以兼容IAB广告单元规范. YUI Grids CSS还整合了Yahoo! UI (User Interface) Library.

3. YAML, YAML Builder. YAML (Yet Another Multicolumn Layout), 一个快速分栏布局并生成符合Web标准的CSS代码工具，看起来比较易于使用。

4. Grid Designer.  这是一个生成CSS化栅格系统的Web 工具，使用自己的CSS类，可以成为CSS框架，虽然它不能很好支持设计团体中的其他一些人。但它的优点在于栅格布局功能非常强大，设置灵活，可以设置栏数、宽度、分割条、页边空白的数值，生成合理的框架布局，对于需要高度自定义栅格系统的设计师非常有用。

5. 960 CSS Grid System, 这个系统是基于页面宽度为960px之上的 ，只有12栏与16栏的栅格划分，当页面宽度为960px时非常适用，但对于其他页面宽度就无能为力了。

6. CSS Boilerplate, 剥离于Blueprint的一个css框架，比较简单，下载直接得到CSS代码.

7. Sparkl, 文档说可以创建1栏、2栏、3栏页面布局，然后从范例与其结构来看灵活性太低。

W3C起草的 CSS Grid Positioning Module Level 3(作者是微软的员工）。

相关工具：

1. Blueprint CSS AIR Grid Tool.
2. Blueprint CSS Quick Reference (PDF, 1 page).
3. CSS Grid Calculator.
4. Diagnostic CSS.
5. Reset CSS.

一些有关CSS Grid Frameworks的文章与网站

Here are links to a few of the many great articles out there about CSS Grids.

1. 456 Berea Street - Grids, Tables, CSS.
2. A List Apart - Thinking Outside the Grid, Setting Type on the Web to a Baseline Grid.
3. Olav Bjørkøy - Launch: Blueprint, a CSS Framework.
4. Mark Boulton’s 5-part series, Five Simple Steps to Designing Grid Systems.
5. Jeff Croft - What’s Not to Love About CSS Frameworks?
6. CSS Demos - Hands on With Blueprint, a CSS Framework.
7. CSS Tricks - GridControl.
8. Design by Grid.
9. Cameron Moll - Gridding the 960.
10. Smashing Magazine - Design With Grid-Based Approach, Six Creative Column Techniques.
11. Stone Mind - First Impressions of the Blueprint CSS Framework.
12. Subtraction - Oh Yeeaahh! (or How to Use Grid in a Layout)
13. Tutorial Blog.
14. Vandelay Design - 65 Resources for Grid-Based Design.
15. W3 - CSS and Grid Layout.
16. Web Designer Wall - Grid and Column Designs.

栅格系统相关书籍：

1. Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung (Hardcover)
   

2. Making and Breaking the Grid: A Graphic Design Layout Workshop
   

3. Grid Systems: Principles of Organizing Type
   

4. 栅格系统与版式设计
   

Htaccess Editor是一个在线的.htaccess文件编辑器，你可以在其网站上通过一些选择操作，方便快速地创建.htaccess文件，对于我们不是很熟悉.htaccess人来说很是有用，而且是多国语言版的哦，有简体中文支持。

Yahoo网站Performance主要负责人Steve Souders写的《High Performance Web Sites》，这本书是在9月份出版的，目前还没有中文版本，不过11月末0day放出了High Performance Web sites的PDF版本。从目录看来这本书非常值得期待，不管是对于设计师、前端技术coder、还是后台人员都是非常有用的，甚至PM也值得了解一下（呵呵，多看看，别一上来就叫嚷实现这效果那效果的）。

Yahoo Developer Blog上已经放出了此书的部分章节，以下目录供参考：

The Importance of Front-End Performance 网站前端性能的重要性
Rule 1：Make Fewer HTTP Requests 减少HTTP请求
Rule 2：Use a Content Delivery Network 采用CDN
Rule 3：Add an Expires Header
Rule 4：Gzip Components 采用GZIP压缩
Rule 5：Put Stylesheets at the Top CSS 样式放顶部
Rule 6：Move Scripts to the Bottom scripts放后面
Rule 7：Avoid CSS Expressions 避免CSS Expression
Rule 8：Make JavaScript and CSS External 使用外部javascript和CSS文件
Rule 9：Reduce DNS Lookups 减少域名DNS的查询时间
Rule 10：Minify JavaScript 缩减javascript
Rule 11：Avoid Redirects
Rule 12：Remove Duplicate Scripts
Rule 13：Turn Off ETags
Rule 14：Make AJAX Cacheable and Small

具体的例子可以参见：http://stevesouders.com/hpws/

下载High Performance Web sites的PDF版本

平时工作除了设计，就和W3C这块联系得最紧密，为了以后更规范、更合理去做页面架构，也想纪录一下实际工作中所遇到的问题和解决问题的经验，所以记录了如下的条条款款，希望能给自己加深印象，也希望给更多人参考的意见。陆续更新！

1. id与class采用英文命名方式，提取本区块的英文关键词，采用第一个词小写，第二个词开始第一个字母大写的写作风格，这样的好处是：方便阅读理解页面结构和CSS结构,避免由于使用中划线或下划线所带来的增大CSS文件的问题。如：subMenu、homeLeft、mostPopular等；
2. XHTML代码中，区块的的布局结构标签尽量统一，并要清晰合理；
3. 在XHTML代码中，同一级区块的的标题尽量采用统一的布局结构，如：同一级的标题统一用<h4 id=”mostPopularTitle”></h4>;
4. 在XHTML代码中，给主要布局结构或重要的区块标签加上注释，并注释的风格要统一。如：<!– Begin Content –><!– End Content –>
5. 在导航菜单中，当前选择的栏目用一个类区分，如：
   <ul>
   <li><a href=”">3D Modeling & CAD</a></li>
   <li><a href=”">Animation</a></li>
   <li class=”selected”><a href=”">Authoring Tools</a></li>
   <li><a href=”">Desktop Publishing</a></li>
   <li><a href=”">Flash Design Tools</a></li>
   <li><a href=”">Font Tools</a></li>
   <li><a href=”">Fonts</a></li>
   <li><a href=”">Illustration</a></li>
   </ul>
   其中，selected就是当前所选择的项目，当然你也可以定义到<a>标签中。
6. CSS的命名尽量不用缩写，除非一看就能明白的缩写词；
7. 所有的xhtml标签全小写，属性加双引号,并且值不能为空；
8. <h1>到<h5>的使用，应遵循从大到小的原则、从高到低的优先级原则，较好体现文档的结构。
9. 给每一个表格和表单加上一个唯一的、结构标记id，给table加上一个信息摘要的属性summary；
10. 给图片加上alt标签；
11. 根元素前必须有<!DOCTYPE>声明，宣告使用何种DTD；

Technorati : css, 规范化，w3c
Del.icio.us : css, xhtml, 规范化，w3c

XHTML：

1.所有的xhtml代码小写
2.属性的值一定要用双引号(”")括起来，且一定要有值
3.每个标签都要有开始和结束，且要有正确的层次
4.空元素要有结束的tag或于开始的tag后加上”/”
5.表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
6.<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。
7.给每一个表格和表单加上一个唯一的、结构标记id
8.给重要的区块加上注释,如：<!– Begin Last news –> <!– End Last news –>
9.给图片加上alt标签
10.所有的标签必须进行合理的嵌套
11.根元素前必须有<!DOCTYPE>元素，宣告使用那一种DTD
12.根元素必须有xmlns属性来指定使用http://www.w3.org/1999/xhtml
的namespace

CSS样式表规范：
1.id和class命名采用该版块的英文单词或组合命名，并第一个单词小写，第二个单词首个字母大写，如:newRelease（最新产品/new+Release)
2.CSS样式表各区块用注释说明
3.尽量使用英文命名原则
4.不用加中杠和下划线
5.尽量不缩写，除非一看就明白的单词

Technorati : xhtml css 规范