ember-css-modules：提供本地化 CSS 模块功能。需要注意的是在使用 ui-foundation 的时候不要使用 ember-css-modules 实现的 @value 和 composes 功能，这两个功能的替代方案在随后的 PostCSS 部分有进一步说明
PostCSS 插件：
- postcss-import：用于导入其他 CSS 可重用模块。注意：虽然用法和看起来都和传统 CSS 的 @import 非常接近，但它们不是一样的东西。最大的差别在于 postcss-import 可以直接引用到位于 node_modules 下的 npm package，这是我们得以在 addon 之间共享资源的基础所在。
```
/* addon */
@import "./modules"; /* 相当于引用同级路径下的 ./modules.css */

/* dummy */
@import "./modules"; /* 相当于引用同级路径下的 ./modules.css */
@import "modules";  /* 相当于引用 addone/styles/modules.css */

/* addon & dummy */
@import "normalize.css"; /* 相当于 node_modules/normalize.css */
```
  因为 addon 和 dummy 是不同的目录结构，因此解析可以 import 的样式规则也略有区别，ui-foundation 保持了绝大多数的引用规则一致，唯一的区别在于：
```
/* 对于 ui-foundation 自己而言 */
/* dummy */
@import "modules"; /* 相当于引用 addon/styles/modules.css */

/* 而对于其他 addon 或者 app 而言 */
/* addon & dummy */
@import "@choiceform/ui-foundation/addon/styles/modules"; /* 同上 */
```
  因为 postcss-import 不支持 module alias，所以在跨项目引用样式的时候，不得不使用冗长的路径。
  
  此外，尽管 postcss-import 也能像普通的 @import 一样导入各种样式文件，但是 ui-foundation 不推荐这么做。原因是所有的 postcss 插件其实都是 CSS Modules 技术栈的组成部分，往往引用的第三方样式并不希望把类名本地化，因此会出现出乎意料的副作用。对于第三方样式，比如 normalize.css 等，ui-foundation 都是使用 ember-cli-node-assets 导入的，不和 CSS Modules 技术栈牵扯。
  
  简言之，postcss-import 在 ui-foundation 中的作用主要是引用可复用的 extends（下面介绍），尽可能不要用于其他场合。
- postcss-extend：用于实现类似于 sass 的 placeholder 功能。**注意：placeholder 和 mixin 开起来很像，但它们有本质的不同。mixin 是扩展目标选择符的内容，而 placeholder 则是定义了可共享的内容，扩展 placeholder 的选择符会合并在一起，而不是各自分开。**在实践中，placeholder 适用于固定规则的可重用样式片段，由于它不会复制自身所以非常节省最终样式的尺寸；而 mixin 最大的优点是可以传递变量动态生成不同的内容，但并不适合共享固定规则的样式片段，因为它会不断复制自己。
```
/* 对于 ui-foundation 自己而言 */
@import "extends";

/* Example 1 */
.alpha {
  color: seagreen;
  @extend abs-center;
}

/* 结果：*/
._alpha_15x03s {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Example 2 */
.alpha {
  color: seagreen;
  @extend abs-center;
}

.beta {
  @extend abs-center;
  color: skyblue;
}

/* 结果：*/
._alpha_15x03s, ._beta_15x03s {
  display: flex;
  justify-content: center;
  align-items: center;
}

._alpha_15x03s {
  color: seagreen;
}

._beta_15x03s {
  color: skyblue;
}

/* Example 3 - 你也可以像 less 那样直接 extend 一个 class */
.alpha {
  color: seagreen;
  @extend abs-center;
}

.beta {
  @extend .alpha;
  color: skyblue;
}

/* 结果：*/
._alpha_15x03s, ._beta_15x03s {
  display: flex;
  justify-content: center;
  align-items: center;
}

._alpha_15x03s, ._beta_15x03s {
  color: seagreen;
}

._beta_15x03s {
  color: skyblue;
}

/* Example 4 - 利用例 3 的特点，extend 非常适合扩展子选择符 */
.alpha {
  @extend abs-center;
}

.alpha:first-child {
  color: seagreen;
}

.alpha a:active {
  color: skyblue;
}

.beta {
  @extend .alpha;
}

/* 结果 */
._alpha_15x03s, ._beta_15x03s {
  display: flex;
  justify-content: center;
  align-items: center;
}

._alpha_15x03s:first-child, ._beta_15x03s:first-child {
  color: seagreen;
}

._alpha_15x03s a:active, ._beta_15x03s a:active {
  color: skyblue;
}
```
  ui-foundation 包含的 extends.css 是一个定义 placeholder 的例子，有两种定义方法：
```
/* 定义 */
@define-extend placeholder {
  /* css */
}
/* 使用 */
.alpha {
  @extend placeholder;
}

/* 定义 */
%placeholder {
  /* css */
}
/* 使用 */
.alpha {
  @extend %placeholder;
}
```
  它们的区别主要是：后者拥有前者所有的特性，同时，后者可以1）定义可以晚于使用；2）后者可以重复扩展，也就是用 placeholder 去扩展 placeholder，从而构造组合片段；3）定义和引用的时候名字前面必须有 % 符号；4）可以在嵌套规则内定义和使用，比如 @media 内等等。因此，ui-foundation 推荐一般使用第二种定义方法。
- post-css-variables：用于定义 CSS 变量。注意：因为我们需要跨项目的共享／覆盖变量设置，因此 ui-foundation 的 CSS 变量不是写在 .css 文件里，而是写在构建脚本的配置项里。defaults.js 提供的是这些变量的默认值，在其他 addon／app 里增加／覆盖它们的方法在安装说明部分有更具体的描述。
```
/* 假设已有预先定义好的全局变量 --primary: seagreen; */

/* 输入 */
.alpha {
  color: var(--primary);
}

/* 输出 */
.alpha {
  color: seagreen;
}

/* 也可以在局部定义／覆盖／引用，例如：*/
.alpha {
  --primary: skyblue; /* 局部覆盖全局的变量 */
  color: var(--primary);
  
  --secondary: lightgray; /* 局部定义尚未存在的变量 */
  background-color: var(--secondary);
}

/* 结果：*/
.alpha {
  color: skyblue;
  background-color: lightgray;
}
```
- postcss-merge-rules：很多 PostCSS 插件会生成分散的样式规则，比如说：
```
/* 输入 */
.alpha {
  color: seagreen;
  @extend %abs-center;
}

/* 输出 */
._alpha_15x03s {
  display: flex;
  justify-content: center;
  align-items: center;
}

._alpha_15x03s {
  color: seagreen;
}
```
  这个插件的作用就是将这样的结果合并起来，提高可阅读性并减少文件体积。其最终结果是：
```
._alpha_15x03s {
  display: flex;
  justify-content: center;
  align-items: center;
  color: seagreen;
}
```
- postcss-discard-duplicates：这个插件的作用是消除重复的样式声明，比如：
```
/* 输入 */
h1 {
  margin: 0 auto;
  margin: 0 auto
}

h1 {
  margin: 0 auto
}

/* 输出 */
h1 {
  margin: 0 auto;
}
```

资源导入

ember-cli-node-assets：提供针对 npm packages 的静态资源导入功能。几乎所有的第三方插件所携带的静态资源都通过这个 addon 进行统一的导入管理

第三方资源

normalize.css：几乎所有前端项目都会使用的样式一致化／常态化库，它的目的是为了实现默认样式的跨浏览器统一性
device.js：用于探测设备并为 HTML 文档添加识别用的样式命名空间，同时提供了 JavaScript 接口来访问设备的信息 ⚠️ 注意：ui-foundation 没有将 device.js 注册为 ES2015 兼容的模块或者是可用于依赖注入的 service，请直接使用全局对象 window.device 进行引用。如果特定的组件有封装的需求，可以禁止 ui-foundation 加载 device.js 然后自己实现对 device.js 的封装。

UI 基础构件

TODO

安装

ui-foundation 是可以同时用于 addon 和／或 app 的，绝大部分情况下这两者的安装都不会有什么区别（不同的地方在下方会单独说明）。安装时的步骤和注意事项如下：

进入新建的或是已有的 ember addon / ember app 项目下
执行：ember install @choiceform/ui-foundation
- 一定要用 ember install 而不是 yarn add / npm install，因为作为 addon，ui-foundation 会提供蓝本文件（blueprints），这些文件会覆盖默认的同名文件，并提供必要的代码来实现约定的配置
- 如果你用了 yarn add / npm install 来安装 ui-foundation，你可以重新执行 ember install @choiceform/ui-foundation 或者手动执行 ember g ui-foundation 来生成这些蓝本文件

配置

默认约定配置（无须调整的部分）

ui-foundation 提供了一个 defaults.js 文件，里面包含了所有可配置项的默认值。这个文件并不包含在默认蓝本之中，因此你的 addon／app 是不会看见这个配置文件的（除非该 addon 还提供专属的配置文件，其使用方法应参考该 addon 的文档）。

如果要引用这个文件的内容，可以这么做：

// 通常都是项目下的 ember-cli-build.js 文件里：
const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');

// lodash 工具函数，由 ui-foundation 默认蓝本提供
const defaultsDeep = require('lodash.defaultsdeep');

const options = require('@choiceform/ui-foundation/defaults')({
  // 这里编写自定义 PostCSS 插件选项，具体说明可以参考 defaults.js 内的详细注释
});

module.exports = function(defaults) {
  let app = new EmberAddon(defaults, defaultsDeep({
    // 这里编写你需要覆盖的配置，以 useDeviceJS 为例：
    useDeviceJS: true,
  }, options));

  return app.toTree();
};

由于该配置文件保存的是默认值，所以直接修改它的内容是没有意义的。如果你要覆盖默认的配置就使用 lodash.defaultsdeep 模块来合并自定义配置选项和默认选项。默认蓝本生成的 ember-cli-build.js 文件里演示了这个用法。

💡提示：这些配置是在 ember-cli 构建系统启动时被读取和加载的，它们仅针对 node 环境而存在，因此在你的应用程序里引用／修改它们是毫无意义的。

某些 addon 会提供额外的，存放于 config/enviroment.js 文件内的配置选项，这些是用于运行时环境的，是可以随时读取甚至修改的，不要把这二者搞混。

可配置项说明

可用于定制化的配置选项存放在 defaults.js 文件内，内有详细的注释简介，请自行参考并按上文的方法进行定制化配置。

Keywords

FAQs

What is @choiceform/ui-foundation?

Is @choiceform/ui-foundation popular?

Is @choiceform/ui-foundation well maintained?

Package last updated on 03 Apr 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install