purecss
Version:
Pure is a ridiculously tiny CSS library you can use to start any web project.
215 lines (163 loc) • 8.1 kB
JavaScript
import Link from '@docusaurus/Link';
import React from 'react';
import Layout from '../../theme/Layout';
import Header from '../../../components/Header';
import CodeBlock from '../../../components/CodeBlock';
import SectionHeader from '../../../components/SectionHeader';
const title = 'Tools';
const description = 'Write, manipulate, and do more with CSS.';
function Tools() {
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
<div className="content">
<SectionHeader heading="Installing Pure with npm" />
<p>
You can add Pure to your project through <a href="https://www.npmjs.com/">npm</a>. This is our recommended way to to integrate Pure into your project's build process and tool chain.
</p>
<CodeBlock>$ npm install purecss --save</CodeBlock>
<p>
<code>require('purecss')</code> will load an object with the following methods:
</p>
<ul>
<li><code>getFile(name)</code></li>
– Retrieve contents of a Pure module file.
<li><code>getFilePath(name)</code></li>
– Return full path to a Pure file.
</ul>
<SectionHeader heading="Installing Pure with Composer" />
<p>
You can also install Pure with <a href="https://getcomposer.org/">Composer</a>.
</p>
<CodeBlock>$ composer require pure-css/purecss</CodeBlock>
<SectionHeader heading="Extending Pure with Grunt" />
<p>
We've written several tools that help you extend Pure and integrate it with your project's CSS. These tools are available as <b><a href="http://gruntjs.com">Grunt</a></b> plugins that can easily be integrated into your existing <code>Gruntfile.js</code>.
</p>
<aside>
<p>
If you haven't used Grunt before, it's very easy to set up. Just head over to the <a href="http://gruntjs.com/getting-started">Getting Started</a> page to learn more.
</p>
</aside>
<SectionHeader heading="Extending Pure with Rework" />
<p>
We've taken a layered approach to developing Pure's tooling. Most of the tools are first built as <b><a href="https://github.com/reworkcss/rework">Rework</a></b> plugins. This allows you to compose Pure's Rework plugins together with other Rework plugins. It also allows the Grunt plugins to be written as <em>very thin</em> wrappers.
</p>
<SectionHeader heading="Generating Custom Responsive Grids" />
<p>
Pure was created to help developer's build mobile-first responsive web projects. However, since CSS Media Queries cannot be over-written via CSS, you can use Pure's tooling to customize Pure's Responsive Grids for your project.
</p>
<h3>Via Grunt</h3>
<p>
Install the <a href="https://www.npmjs.org/package/grunt-pure-grids">Pure Grids Grunt Plugin</a> through npm.
</p>
<CodeBlock>$ npm install grunt-pure-grids --save-dev</CodeBlock>
<p>
Next, add it to your <code>Gruntfile.js</code>.
</p>
<CodeBlock>grunt.loadNpmTasks('grunt-pure-grids');</CodeBlock>
<p>
Finally, add the necessary configuration through the <code>pure_grids</code> task. To see a full list of all configurable properties, check out the <a href="https://www.npmjs.org/package/grunt-pure-grids#readme">README documentation</a>.
</p>
<CodeBlock>
{`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
}
}
}
});`}
</CodeBlock>
<h3>Via Rework</h3>
<p>
If you're not using Grunt, you can also generate your custom responsive grids through using the <a href="https://www.npmjs.org/package/rework-pure-grids">Pure Grids Rework Plugin</a>. It has the same configuration options as the Grunt plugin — in fact, this is what powers the Grunt plugin.
</p>
<p>
You can install the Rework plugin through npm.
</p>
<CodeBlock>$ npm install rework rework-pure-grids</CodeBlock>
<p>
And it can be used on it's own like this, or along side other Rework plugins you might be using.
</p>
<CodeBlock>
{`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
}
})).toString();
// This will log-out the grid CSS.
console.log(css);`}
</CodeBlock>
<SectionHeader heading="Mutating Selectors" />
<p>
All selectors defined in Pure's source code begin with the <code>.pure-</code> prefix. However, you may want to change this. To accomplish this task, you can use Pure's tooling to mutate CSS selectors.
</p>
<h3>Via Grunt</h3>
<p>
Install the <a href="https://www.npmjs.org/package/grunt-css-selectors">CSS Selectors Grunt Plugin</a> through npm.
</p>
<CodeBlock>$ npm install grunt-css-selectors --save-dev</CodeBlock>
<p>
Once it's installed, add the task to your <code>Gruntfile.js</code>
</p>
<CodeBlock>grunt.loadNpmTasks('grunt-css-selectors');</CodeBlock>
<p>
Finally, add the necessary configuration through the <code>css_selectors</code> task. Check out the <a href="https://www.npmjs.org/package/grunt-css-selectors#readme">README documentation</a> for more details.
</p>
<CodeBlock>
{`grunt.initConfig({
css_selectors: {
options: {
mutations: [
{prefix: '.foo'}
]
},
files: {
'dest/foo-prefixed.css': ['src/foo.css'],
}
}
});`}
</CodeBlock>
<h3>Via Rework</h3>
<p>
If you're not using Grunt, you can also mutate CSS selectors using the <a href="https://www.npmjs.org/package/rework-mutate-selectors">Mutate Selectors Rework Plugin</a>. It has a similar interface to the Grunt plugin — in fact, this is what powers the Grunt plugin.
</p>
<p>
You can install the Rework plugin through npm.
</p>
<CodeBlock>$ npm install rework rework-mutate-selectors</CodeBlock>
<p>
And it can be used on it's own like this, or along side other Rework plugins you might be using.
</p>
<CodeBlock>
{`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);`}
</CodeBlock>
<aside>
<p>
If you have questions or run into issues while these tools, please file them on their respective GitHub repositories.
</p>
</aside>
</div>
</Layout>
);
}
export default Tools;