Amazium源码分析：(1)基本介绍

前言

Amazium是一个网格系统的框架，分析该源码的目的是了解网格系统的实现。

网格系统

• 定义：设计美观页面布局的方式，上图能够很直观的了解什么是网格系统。
• 基本概念
  • column: 列。
  • gutter: 两列之间的槽。
• 优势：界面更美观、统一。
• 劣势：有人认为他局限了创造力。
• 常用网格系统：960.gs, Golden Grid System, Gridsetapp（很好用，但是只有30天）, Amazium.
• 宽度为960px是因为以前屏幕大多数是1024*768，由于现在屏幕越来越大，因此出现了很多宽度更大的网格系统。
• 建议：(1)首先使用gridsetapp将网格布局设计出来，并保存成png，在photoshop中打开。(2)在photoshop进一步设计。
• 网格的分类
  • 固定网格(fixed grid)：每列的宽度是固定的长度。在Amazium中采用了固定网格，但是由于使用了Media Query，因此在960px~1199px时一列的宽度是48px，在768px~959px时一列的宽度是36px...
  • 流式网格(fluid grid)：每列的宽度是百分比，而不是固定的。

Amazium

主要目录结构介绍

• CSS
  • base.css:
    • CSS Reset(基本标签的重置)
    • 定义较美观的按钮样式
    • 预定义一些class类，比如 .inline{display:inline}，以后只要class="inline"即可
  • form.css: 定义表单元素相关的标签的样式
  • amazium.css: 定义网格
• example.html: 入门的demo
• forms.html: 表单的demo

参考文献

[1] 介绍网格系统的综述：http://webdesign.tutsplus.com/articles/all-about-grid-systems--webdesign-14471

[2] 网格系统的演讲PPT：http://www.subtraction.com/pics/0703/grids_are_good.pdf