Amazium 技术文档

1. 安装指南

安装 Amazium

在您的应用根目录下运行以下命令来安装 Amazium：

npm install amazium --save-dev

安装 ember-cli 插件以导入 CSS 资源

在您的应用根目录下运行以下命令来安装 ember-cli-node-assets 插件：

ember install ember-cli-node-assets

在应用中导入 Amazium 编译后的 CSS

更新 Ember CLI 构建文件，以包括从节点包中的 Amazium 编译后的 CSS：

// ember-cli-build.js
var app = new EmberApp(defaults, {
  ...
  nodeAssets: {
    'amazium': {
      srcDir: 'dist',
      import: ['amazium.css']
    }
  }
});

2. 项目的使用说明

Amazium 是一个响应式的 CSS 框架，它提供了一套完整的布局和样式解决方案。您可以通过修改 SASS 变量来自定义网格参数，以适应不同的设计需求。

3. 项目 API 使用文档

Amazium 的 API 文档包括了一系列的 CSS 类和变量，您可以通过它们来构建响应式布局。

自定义网格参数

您可以在 _variables.scss 文件中调整网格参数。当 SASS 被编译时，网格值将根据设置的值进行计算。以下是一些可调整的变量：

/***** 定义网格宽度 *****/
$grid-width: 1200px;
$grid-width-smscreen: 960px;
$grid-width-tablet: 768px;

/***** 定义列数 *****/
$grid-columns: 12;

/***** 定义间隔距离 *****/
$grid-gutter: 20px;

/***** 计算断点的间隔距离 / 也可以手动设置 *****/
$grid-gutter-smscreen: $grid-gutter / 1.25;
$grid-gutter-tablet: $grid-gutter-smscreen / 1.1;

变量详细说明

• $grid-width 控制初始网格的宽度。
• $grid-width-smscreen 控制小屏幕上网格的宽度，此值也控制小屏幕断点。
• $grid-width-tablet 控制平板上网格的宽度，此值也控制平板断点。
• $grid-columns 控制列数。
• $grid-gutter 控制列之间的空间。
• $grid-gutter-smscreen 计算小屏幕上列之间的空间，也可以手动设置。
• $grid-gutter-tablet 计算平板上列之间的空间，也可以手动设置。

4. 项目安装方式

Amazium 可以通过 npm 进行安装。在您的项目根目录下运行以下命令：

npm install amazium --save-dev

然后，根据上述指南配置您的 Ember CLI 应用程序以使用 Amazium。