960 Grid System:简化Web开发工作流程

960 Grid System致力于简化web开发流程,通过提供基于960px的常用尺寸(dimension)达成简化目标

960_gs

尺寸

通过网格(Grid)将整个显示分为12列宽度为60px的部分。也可以设置为16列,网格宽度为40px。每列的左右离边缘分别有10px的,列于列之间有20px的宽度。查看demo

目标

使用90 Grid的前提是假设系统可以很好地进行快速原型,即便如此将90 Grid集成到生产环境中也可以正常工作。打印的素描页、设计布局与CSS文件完全一致。

更多列设置

对那些更适应于24列网格的设计,90 Grid也提供了另外的支持版本。列宽为30px、栏距为10px、容器的各边预留了5px缓冲。这样的设计非常适合在手机浏览器上进行文字处理——小写的”i”或”l”在iPhone上用传统的模式处理得不够好。查看demo

资源顺序

通过push_XX 和pull_XX 类,可以将元素根据设置而非在脚本中标记的顺序进行排列。这样可以在不牺牲页面精确布局的基础上确保HTML中可以保留更合适的信息。例如,可以查看当前页面源代码,看看H1标记是否被重定位。

使用说明

下载的文件中包含了可打印的素描页和模板文件,提供了Adobe Fireworks和Photoshop、OmniGraffle和Visio多种版本。

文件中还包含了轻量级CSS文件,提供多种网格。使用这个文件,只要在HTML页面的<head>标签中包含960.css。也可以使用 reset.css 和text.css,这两个是可选项。下面是配合CSS文件展示的XHTML示例代码:

注意:引入这些风格不会自动完成网站设计,它们只是设计的开始。然而,它们是理想的快速原型基础,可以借此快速创建你自己的设计。当然,在设计中不必拘泥于这些初始代码。如果对这里的设计有不同看法,请根据自己站点的需要进行修改。

960 Grid System是免费的,遵循MIT/GPL协议发布。

如果站点中文字的阅读顺序是从右向左,使用在结尾使用_rtl.css。表示语言信息:

请确保将 lang="..." 设置为网站对应的语言缩写(2个字母)。例如,lang=”he” 表示希伯来语,lang=”ar” 代表阿拉伯语。

官方网站:http://960.gs/
开源地址:https://github.com/nathansmith/960-grid-system/

打赏支持我整理更多优质资源,谢谢!

打赏编辑

打赏支持我整理更多优质资源,谢谢!

任选一种支付方式

1 收藏

资源整理者简介:唐尤华

做自己喜欢的,编程、喝茶、看世界 个人主页 · 贡献了108个资源 · 18 ·    


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1439 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer