10 09/2014

960gs 笔记

最后更新: Wed Sep 10 2014 12:29:11 GMT+0800

There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

960 gs 包括带格子的草图pdf(打印出来,讨论原型设计的时候可以显得更专业一些),设计模板(带格子的ps,fireworks等作图软件的模板文件)以及一个css grid (格子)排版规范。960gs 推荐用 Adapt.js 检测浏览器宽度,加载响应的 css

  path: 'assets/css/',

  // false = Only run once, when page first loads.
  // true = Change on window resize and page tilt.
  dynamic: true,

  // Optional callback... myCallback(i, width)
  callback: myCallback,

  range: [
    '0px    to 760px  = mobile.css',
    '760px  to 980px  = 720.css',
    '980px  to 1280px = 960.css',
    '1280px to 1600px = 1200.css',
    '1600px to 1920px = 1560.css',
    '1940px to 2540px = 1920.css',
    '2540px           = 2520.css'

960gs css 规范部分

  • 最外面的容器 class=”container_12” 表示12列布局 container_16 表示16列 依次类推 24
  • 用 reset.css 来初始化。但现在最流行的应该是 normalize.css,好处如下:

    • Preserve useful browser defaults rather than erasing them.尽量保留那些有用的浏览器样式
    • Normalize styles for a wide range of HTML elements.支持更多html 标签
    • Correct bugs and common browser inconsistencies.修正了一些bug
    • Improve usability with subtle improvements. 提升了易用性
    • Explain the code using comments and detailed documentation.有详细说明
  • 用 class=”grid_12” 表示自己宽度为 12列;grid_3 为3列 (内部格子数相加 = 外面容器总数)…

  • class=”grid_1 prefix_1 suffix_10” 表示自己1列,前面空出 1 列 ,后面空出 10 列(内容独占一行)
  • 默认都带 10px 左右margin,去掉前面用 alpha 后面 omega
  • push_N 左边距离 N列;pull_M 右边距离 M 列(position:relative 所以内容可重叠)

小结:bootstrap 的 css grid 基于960gs,但更合理一些:相对宽度,responsive 等。