通过 npm 安装 Pure
你可以通过 npm 将 Pure 添加到你的项目。这是我们推荐的方式，可以将 Pure 集成到你的项目构建处理和工具链中。
$ npm install purecss --saverequire('purecss') 将加载具有以下方法的对象
getFile(name)– 检索 Pure 模块文件的内容。getFilePath(name)– 返回 Pure 文件的完整路径。
通过 Composer 安装 Pure
你还可以通过 Composer 安装 Pure。
$ composer require pure-css/pure通过 Grunt 扩展 Pure
我们编写的多个工具可以帮助你扩展 Pure 并将其与你项目的 CSS 集成。这些工具可用作 Grunt 插件，可以轻松集成到现有的 Gruntfile.js 中。
通过 Rework 扩展 Pure
我们采用了分层方法来开发 Pure 的工具。大多数工具最初是作为 Rework 插件构建的。这允许你将 Pure 的 Rework 插件与其他 Rework 插件组合在一起。它还允许 Grunt 插件被写成非常轻量级的包装器。
生成自定义响应式网格
Pure 是创建用来帮助开发者构建移动优先的响应式 Web 项目的。然而，由于 CSS 媒体查询不能通过 CSS 进行覆盖，因此你可以使用 Pure 的工具为你的项目自定义 Pure 的响应式网格。
通过 Grunt
通过 npm 安装 Pure Grids Grunt 插件。
$ npm install grunt-pure-grids --save-dev接下来，将其添加到你的 Gruntfile.js 中。
grunt.loadNpmTasks('grunt-pure-grids');最后，通过 pure_grids 任务添加必要的配置。要查看所有可配置属性的完整列表，请查看 自述文件文档。
grunt.initConfig({
pure_grids: {
dest : "build/public/css/main-grid.css",
options: {
units: 12, // 12-column grid
mediaQueries: {
sm: 'screen and (min-width: 35.5em)', // 568px
md: 'screen and (min-width: 48em)', // 768px
lg: 'screen and (min-width: 64em)', // 1024px
xl: 'screen and (min-width: 80em)', // 1280px
xxl: 'screen and (min-width: 120em)', // 1920px
xxxl: 'screen and (min-width: 160em)', // 2560px
x4k: 'screen and (min-width: 240em)' // 3840px
}
}
}
});通过 Rework
如果你未使用 Grunt，你还可以通过使用 Pure Grids Rework 插件 生成自定义响应式网格。它拥有与 Grunt 插件相同的配置选项 — 实际上，这就是 Grunt 插件发挥作用的方式。
你可以通过 npm 安装 Rework 插件。
$ npm install rework rework-pure-grids它可以单独使用，也可以与其他正在使用的 Rework 插件一起使用。
import rework from 'rework';
import pureGrids from 'rework-pure-grids';
const css = rework('').use(pureGrids.units({
mediaQueries: {
sm: 'screen and (min-width: 35.5em)', // 568px
md: 'screen and (min-width: 48em)', // 768px
lg: 'screen and (min-width: 64em)', // 1024px
xl: 'screen and (min-width: 80em)', // 1280px
xxl: 'screen and (min-width: 120em)', // 1920px
xxxl: 'screen and (min-width: 160em)' // 2560px
x4k: 'screen and (min-width: 240em)' // 3840px
}
})).toString();
// This will log-out the grid CSS.
console.log(css);更改选择器
Pure 源代码中定义的所有选择器，都以 .pure- 前缀开头。不过，你可能希望更改此设置。要完成此任务，可以使用 Pure 的工具来更改 CSS 选择器。
通过 Grunt
通过 npm 安装 CSS Selectors Grunt 插件。
$ npm install grunt-css-selectors --save-dev安装后，将此任务添加到 Gruntfile.js 中。
grunt.loadNpmTasks('grunt-css-selectors');最后，通过 css_selectors 任务，添加必要的配置。请查看 自述文档，了解更多详情。
grunt.initConfig({
css_selectors: {
options: {
mutations: [
{prefix: '.foo'}
]
},
files: {
'dest/foo-prefixed.css': ['src/foo.css'],
}
}
});通过 Rework
如果你没有使用 Grunt，还可以使用 Mutate Selectors Rework 插件 来更改 CSS 选择器。它的界面与 Grunt 插件相似，实际上，这是 Grunt 插件的动力。
你可以通过 npm 安装 Rework 插件。
$ npm install rework rework-mutate-selectors它可以单独使用，也可以与其他正在使用的 Rework 插件一起使用。
import rework from 'rework';
import selectors from 'rework-mutate-selectors';
const css = rework(inputCSS)
.use(selectors.prefix('.foo'))
.use(selectors.replace(/^.pure/g, '.bar'))
.toString();
// This will log-out the resulting CSS.
console.log(css);