Golden Grid System 技术文档

1. 安装指南

Golden Grid System（以下简称GGS）的安装非常简单，您只需要将以下文件下载到您的本地或者服务器上：

• GGS.html：包含必要的标记（即meta视口标签）和一个简单的演示。
• GGS.css：包含GGS的核心样式，其中包含了一些示例代码。关于其内容的详细信息遍布整个文件的CSS注释中。
• GGS.less：是GGS.css的LESS源码。它为高级用户提供了自定义选项，对于使用LESS的用户来说是一个很好的起点。
• GGS.scss：与GGS.less相同，但是使用SCSS编写。由mikker贡献。
• GGS.js：包含Golden Gridlet脚本，该脚本将GGS网格和1.5em基线网格覆盖到页面上。可以在文件的顶部附近进行自定义。由Ender库提供支持。

2. 项目的使用说明

GGS是一个流动宽度的网格系统，由18个均匀的列组成，其中两个用作外边距，留下16个列供设计使用。这些列可以根据需要组合成8列或4列。它们也可以加倍成32列，但开发者认为没有人需要一个宽达5000 CSS-px的网站的网格。

• GGS.html：可以作为您网站的模板，其中包含了示例的标记和样式。
• GGS.css：包含了Golden Grid System的所有样式规则。您可以直接将其引入到HTML文件中。
• GGS.less 或 GGS.scss：如果您熟悉LESS或SCSS，可以使用这些文件来进行更高级的自定义。
• GGS.js：这个脚本可以在页面上显示网格和基线，方便开发者进行页面设计。

3. 项目API使用文档

由于GGS是一个CSS网格系统，它并没有提供传统意义上的API。但是，GGS.js脚本提供了一些自定义选项：

• 您可以在GGS.js文件的顶部找到自定义选项，例如设置网格的显示和隐藏。

// 显示或隐藏网格
GoldenGridlet.grid.show();
GoldenGridlet.grid.hide();

• 设置基线网格的行高：

// 设置基线网格的行高
GoldenGridlet.baseline.set('1.5em');

请参考GGS.js文件中的注释以了解更多自定义选项。

4. 项目安装方式

安装GGS的方法如下：

1. 将上述文件下载到您的本地或服务器。
2. 在您的HTML文件中引入GGS.css：

<link rel="stylesheet" href="path/to/GGS.css">

3. 如果您需要使用JavaScript功能，同样在HTML文件中引入GGS.js：

<script src="path/to/GGS.js"></script>

4. 可以根据需要自定义GGS.less或GGS.scss文件，然后编译为CSS。
5. 调整GGS.js的配置以适应您的页面设计需求。

现在，您可以开始使用Golden Grid System进行页面布局设计了。