Zen Grids 项目技术文档

1. 安装指南

1.1 使用 npm 安装

npm install --save-dev zen-grids

1.2 使用 Bower 安装

bower install --save-dev zen-grids

1.3 使用 Ruby Gem 安装

gem install zen-grids

如果使用 Compass，请在 config.rb 文件中添加以下内容：

require "zen-grids"

1.4 使用 Bundler 和 Ruby Gem 安装

bundle inject zen-grids '~> 2.0'

安装完成后，您可以在 Sass 文件中引入 Zen Grids：

@import "zen-grids";

2. 项目使用说明

Zen Grids 是一个直观且灵活的网格系统，利用内容的自然源顺序来简化创建响应式设计的流程。通过易于使用的 Sass mixin 集，Zen Grids 可以应用于多种布局，包括响应式、自适应、流体和固定宽度布局。

2.1 基本示例

以下是一个简单的示例，展示如何在 12 列网格中创建一个内容列和两个侧边栏：

@import "zen-grids";

$zen-gutters: 40px;  // 设置 gutter 大小，每个列的两侧都会使用半个 gutter。

.container {
  @include zen-grid-container();  // 定义网格项的容器。
}

$zen-columns: 12;  // 设置在此媒体查询中使用的网格列数。

@media all and (min-width: 50em) {
  .sidebar1 {
    @include zen-grid-item(3, 1);   // 从第 1 列开始，跨 3 列。
  }
  .content {
    @include zen-grid-item(6, 4);   // 从第 4 列开始，跨 6 列。
  }
  .sidebar2 {
    @include zen-grid-item(3, 10);  // 从第 10 列开始，跨 3 列。
  }
}

在 .container 元素中，.sidebar1、.sidebar2 和 .content 元素可以按任意顺序排列。

3. 项目 API 使用文档

3.1 zen-grid-container()

定义网格项的容器。使用此 mixin 来创建一个包含网格项的容器。

.container {
  @include zen-grid-container();
}

3.2 zen-grid-item($span, $start)

定义网格项的跨度和起始列。$span 参数指定网格项的跨度，$start 参数指定网格项的起始列。

.sidebar1 {
  @include zen-grid-item(3, 1);  // 从第 1 列开始，跨 3 列。
}

3.3 $zen-gutters

设置网格的 gutter 大小。gutter 是列与列之间的间距，每个列的两侧都会使用半个 gutter。

$zen-gutters: 40px;

3.4 $zen-columns

设置网格的列数。此变量用于定义在特定媒体查询中使用的列数。

$zen-columns: 12;

4. 项目安装方式

Zen Grids 可以通过多种方式安装，包括 npm、Bower、Ruby Gem 和 Bundler。安装完成后，您可以在 Sass 文件中引入 Zen Grids 并开始使用其功能。

4.1 使用 npm 安装

npm install --save-dev zen-grids

4.2 使用 Bower 安装

bower install --save-dev zen-grids

4.3 使用 Ruby Gem 安装

gem install zen-grids

4.4 使用 Bundler 和 Ruby Gem 安装

bundle inject zen-grids '~> 2.0'

安装完成后，您可以在 Sass 文件中引入 Zen Grids：

@import "zen-grids";