Responsive Boilerplate 技术文档

1. 安装指南

首先，请确保您的系统中安装了最新的Node.js版本。如果您使用的是Ubuntu 13.04，建议阅读如何使用PPA安装最新版本的Node.js。

接下来，您可以通过以下两种方式安装Responsive Boilerplate：

• 克隆我们的分支：git clone https://github.com/newaeonweb/responsiveboilerplate.git
• 使用Bower安装：bower install responsiveboilerplate

进入项目目录后，执行npm install命令以安装所有依赖项。

我们强烈建议使用index.html作为您的起点。

2. 项目使用说明

Responsive Boilerplate 是一个轻量级的（3kb）微库，拥有优雅且简约的CSS3网格系统，仅包含一个容器和12列。它非常易于使用和理解，预装了一些用于移动设备的额外CSS助手。

要使用 Responsive Boilerplate，请按照以下步骤操作：

• 在容器中放置您的HTML内容：

<!-- 容器类用于集中您的网格 -->
<div class="container">
    <!-- 内容类用于对齐列 -->
    <div class="content">
        <div class="col6"></div>
        <div class="col6"></div>
    </div>
    <div class="content">
        <div class="col4"></div>
        <div class="col4"></div>
        <div class="col4"></div>
    </div>
</div>

注意：

• 上述代码在渲染时显示并排的列，例如您的屏幕顶部有两个相等的列，底部有三个列。

• 您可以根据需要调整列，以适应您自己的设计。

3. 项目API使用文档

目前，Responsive Boilerplate 的API使用主要涉及HTML和CSS的类。以下是一些基本的类：

• container: 用于集中网格的容器。
• content: 用于对齐列的内容类。
• col6: 宽度为6列的列。
• col4: 宽度为4列的列。

4. 项目安装方式

除了通过克隆和Bower安装之外，您还可以使用Grunt.js快速开始：

• 克隆或使用Bower安装后，进入项目根目录并执行以下命令：

npm install

• 要在本地运行演示页面，执行以下命令：

grunt demo

此命令将在默认浏览器中打开演示页面。

注意：

• 如果您在Windows系统上，请使用：grunt.cmd demo

欢迎您测试、使用、分叉、报告错误、提供建议和贡献代码，以改进此工具。

更多相关信息，请访问Responsive Boilerplate官网。

开发者：@newaeonweb 电子邮件：[e-mail] Google Plus：Fernando Monteiro