使用 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 的目的是協助開發人員建置行動優先的回應式網頁專案。但是，由於 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 任務新增必要的設定。若要查看所有可設定屬性的完整清單，請參閱 README 文件。
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 任務新增必要的設定。請參考 README 文件，取得更多詳細資訊。
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);