实际上大家对“CSS 框架（CSS Framework）”都并不陌生，CSS框架将帮助我们提高开发效率，并获得更好的浏览器兼容性。

参考：

• 维基百科中的“CSS框架”条目 （英文）

在这儿分享一个轻量级的 CSS 框架 Elements。

项目地址：

• Elements CSS Frameworks

特点：

1. 重置了浏览器默认的样式属性，您含有图片的链接将不再会有丑陋的蓝色边框了。
2. 在外部链接旁增加指示图标（如下图）。
3. 加入了Prototype库（一个 JavaScript 库，提供完整的 Ajax 框架及其他工具）。
4. 加入了Lightbox功能（点击这里查看官方功能演示，请点击该页的图片）。
5. 未定义网格布局结构（grid structure）。

大小：

• 约46K（v2版本）。

文件结构：

• [elements_v2] -> 主文件夹，包含了框架所需的所有文件。
  • [clientFiles] -> 在合作过程中，客户会提供一些文件给你们。比如相关的协议、工作的范围、时间的安排，或者其他的注意事项。这些东西都可以放在这个文件夹中。
  • [concepts] -> 用于放置一些想法或初稿。
  • [copy] -> 用于放置您或客户为网站写的副本。
  • [css] -> 放置CSS文件。
    • externalLinks.css -> 这是控制外部链接图标的css文件，同时还会给PDF文件、email地址加上相应的图标。使用时需将这个文件打开，并替换掉文件中已经设置的默认域名。
    • global.css -> 这是主CSS文件，您可以将自己编写的CSS存入这个文件。里面有一些预先定义好的选择器和一些简单的结构。
    • lightbox.css -> 这是lightbox的相关文件，最好不要修改。
    • reset.css -> 帮助您重置浏览器的默认设置，去掉了多余的margin、padding、border、outline。这可以帮助您的页面在不同的浏览器下显示一致。
  • [images] -> 放置图片的文件夹。
    • [elementsImages] -> 这个文件夹放置了外部链接的图标。
    • [lightbox] -> 这个文件夹属于lightbox的相关图片。
    • [nav] -> 你可以在这里放置导航栏的相关图片。
  • [inc] -> 放置PHP includes或者PHP scripts的地方。
  • [js] -> 放置JavaScript文件。
  • [rawPNG] -> 这里可以放入没有压缩过的PNG图片，保存这些未压缩的图片可以方便未来的修改，避免图片质量损失。压缩过的PNG可以放到images文件夹内。
  • index.html -> 这个文件中包含了需要引用的文件头。里面还有些常用的元素、页头、主体内容、页脚。

启示：

• 作者将文件非常精细地分门别类（尤其是图片的放置非常讲究），这是个好习惯。
• 网格布局会给我们带来方便，但也容易开发丧失部分的灵活性，这个框架没有加入网格布局。