前言

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

Amazium源码分析：(1)基本介绍的更多相关文章

  1. Redis网络库源码分析(1)之介绍篇

    一.前言 Redis网络库是一个单线程EPOLL模型的网络库,和Memcached使用的libevent相比,它没有那么庞大,代码一共2000多行,因此比较容易分析.其实网上已经有非常多有关这个网络库 ...

  2. Heritrix源码分析(一) 包介绍（转）

    本博客属原创文章,欢迎转载!但转载请务必注明出处:http://guoyunsky.iteye.com/blog/613249 本博客已迁移到本人独立博客: http://www.yun5u.com/ ...

  3. spark 源码分析之三 -- LiveListenerBus介绍

    LiveListenerBus 官方说明如下: Asynchronously passes SparkListenerEvents to registered SparkListeners. 即它的功 ...

  4. Redis 专栏(使用介绍、源码分析、常见问题...)

    一.介绍相关 说Redis : 介绍Redis特性,使用场景,使用Jedis操作Redis等. 二.源码分析 1. 数据结构 Redis源码分析(sds):Redis自己封装的C语言字符串类型. Re ...

  5. 详解SpringMVC请求的时候是如何找到正确的Controller[附带源码分析]

    目录 前言 源码分析 重要接口介绍 SpringMVC初始化的时候做了什么 HandlerExecutionChain的获取 实例 资源文件映射 总结 参考资料 前言 SpringMVC是目前主流的W ...

  6. Quartz源码分析

    先简单介绍一下quartz,Quartz是一个功能丰富的开源作业调度库,可以集成到几乎任何Java应用程序中 - 从最小的独立应用程序到最大的电子商务系统.quartz可用于创建执行数十,数百甚至数十 ...

  7. Stack和Vector源码分析

    Stack和Vector源码分析 Stack和Vector源码分析stack源码分析1.Stack是什么2.Stack的结构图3.Stack继承关系4.Stack的主要方法5.Stack源码Vecto ...

  8. quartz2.x源码分析——启动过程

    title: quartz2.x源码分析--启动过程 date: 2017-04-13 14:59:01 categories: quartz tags: [quartz, 源码分析] --- 先简单 ...

  9. spark 源码分析之十九 -- Stage的提交

    引言 上篇 spark 源码分析之十九 -- DAG的生成和Stage的划分 中,主要介绍了下图中的前两个阶段DAG的构建和Stage的划分. 本篇文章主要剖析,Stage是如何提交的. rdd的依赖 ...

随机推荐

  1. 全自动化的 Android 编译管线

    [编者按]Nicolas Frankel 是 hybris 的高级顾问, 在Java / J2EE 领域拥有超过10年的管理经验,本文阐述了他在使用自动化工序去构建 Android 应用程序遇到的一些 ...

  2. Lucene教程--转载

    Lucene教程 1 lucene简介1.1 什么是lucene    Lucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿来 ...

  3. ubuntu第一次设置root密码

    安装ubuntu时,系统让用户创建了一个非root用户,系统启动后使用这个用户,在需要执行超级用户权限的指令时,可以通过sudo来执行.为此我们可以通过这样的方式修改root的密码:dengfei@d ...

  4. c#百分比

    <div class="inner" style="width:@string.Format("{0:P1}", item.Maturitys) ...

  5. 使用 Struts 2 开发 RESTful 服务

    REST 简介 REST 是英文 Representational State Transfer 的缩写,这个术语由 Roy Thomas Fielding 博士在他的论文<Architectu ...

  6. linq 常用语句

    自己练习的 switch (productDataAnalysisQuery.DataType) { : var data = (from hp in GPEcontext.hbl_product j ...

  7. C++ 数组参数

    在C++中数组不是按值传递的,传递的是第1个元素,即第0个元素的指针. 1.数组长度不是参数类型的一部分,函数不知道传递给它的数组的实际长度,因此当编译器对实参类型进行参数类型检查时,并不检查数组的长 ...

  8. java多线程知识点总结

    1.线程调度知识:线程类Thread的了解,几个thread的方法.thread.sleep(),thread.join().(调用join方法的那个线程会立刻执行). object.wait()方法 ...

  9. 一个字典通过dictionaryWithDictionary 他们的内存指针是不同的

    一个字典通过dictionaryWithDictionary 他们的内存指针是不同的  来自为知笔记(Wiz)

  10. windows xp 无法连接wpa无线网络

    其实以前一直是可以的,不知为什么前几天忽然就不能加入原有的无线网了.我的无线网是WPA加密的,采用DHCP分配IP(但针对特定MAC地址分配静态IP). 在网上找了许久,有的网友认为应该把无线网卡(那 ...