npm を使用した Pure のインストール
npm を使用して、Pure をプロジェクトに追加できます。これは、Pure をプロジェクトのビルドプロセスとツールチェーンに統合するための推奨方法です。
$ npm install purecss --saverequire('purecss') は、次のメソッドを持つオブジェクトをロードします。
getFile(name)– Pure モジュールファイルの内容を取得します。getFilePath(name)– Pure ファイルへのフルパスを返します。
Composer を使用した Pure のインストール
Composer を使用して Pure をインストールすることもできます。
$ composer require pure-css/pureGrunt を使用した Pure の拡張
Pure を拡張し、プロジェクトの CSS と統合するのに役立ついくつかのツールを作成しました。これらのツールは、既存の Gruntfile.js に簡単に統合できるGrunt プラグインとして提供されています。
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 タスクを介して必要な設定を追加します。すべての構成可能なプロパティの完全なリストについては、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 セレクター 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 を使用していない場合は、セレクターの変更 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);