github
/
pure
mirror of https://github.com/pure-css/pure
1
Fork 0
Code Releases Activity

feat: add eslint (#801)

This commit is contained in:
Seth Bertalotto 2020-05-16 11:09:14 -07:00 committed by GitHub
parent 8426c80b11
commit 9dc1a9ddcf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 1750 additions and 1652 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.eslintignore Normal file
View File

@ -0,0 +1,9 @@
/build/
/node_modules/
/release/
# site files
/site/.docusaurus
/site/build
/site/node_modules
/site/static/css/pure

50
.eslintrc.js Normal file
View File

@ -0,0 +1,50 @@
module.exports = {
'env': {
'browser': true,
'es6': true,
'node': true
},
'extends': [
'eslint:recommended',
'plugin:react/recommended'
],
'globals': {
'Atomics': 'readonly',
'SharedArrayBuffer': 'readonly'
},
'parserOptions': {
'ecmaFeatures': {
'jsx': true
},
'ecmaVersion': 11,
'sourceType': 'module'
},
'plugins': [
'react'
],
'rules': {
'indent': [
'error',
4
],
'linebreak-style': [
'error',
'unix'
],
'quotes': [
'error',
'single'
],
'react/no-unescaped-entities': 'off',
'react/prop-types': 'off',
'semi': [
'error',
'always'
]
},
'settings': {
'react': {
'version': 'detect'
}
}
};

1
.gitignore vendored
View File

@ -1,4 +1,5 @@
.DS_Store
.nyc_output/
artifacts/
build/
coverage/

1
.npmrc Normal file
View File

@ -0,0 +1 @@
package-lock = false

13
.travis.yml
View File

@ -1,11 +1,10 @@
language: node_js
node_js:
- 12
branches:
only:
- master
script:
- git config --global user.name "${GH_NAME}"
- git config --global user.email "${GH_EMAIL}"
- echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc
- cd site && npm install && GIT_USER="${GH_NAME}" npm run deploy
- npm t
deploy:
provider: script
script: scripts/deploy.sh
on:
branch: master

506
Gruntfile.js
View File

@ -1,280 +1,280 @@
module.exports = function (grunt) {
// -- Config -------------------------------------------------------------------
// -- Config -------------------------------------------------------------------
grunt.initConfig({
grunt.initConfig({
nick : 'pure',
pkg : grunt.file.readJSON('package.json'),
nick : 'pure',
pkg : grunt.file.readJSON('package.json'),
// -- Clean Config ---------------------------------------------------------
// -- Clean Config ---------------------------------------------------------
clean: {
build : ['build/'],
build_res: ['build/*-r.css'],
release : ['release/<%= pkg.version %>/']
},
// -- Copy Config ----------------------------------------------------------
copy: {
build: {
src : 'src/**/css/*.css',
dest : 'build/',
expand : true,
flatten: true
clean: {
build : ['build/'],
build_res: ['build/*-r.css'],
release : ['release/<%= pkg.version %>/']
},
release: {
src : '{LICENSE.md,README.md,HISTORY.md}',
dest: 'build/'
}
},
// -- Copy Config ----------------------------------------------------------
// -- Concat Config --------------------------------------------------------
concat: {
build: {
files: [
{'build/base.css': [
'node_modules/normalize.css/normalize.css',
'build/base.css'
]},
{'build/buttons.css': [
'build/buttons-core.css',
'build/buttons.css'
]},
{'build/forms-nr.css': [
'build/forms.css'
]},
{'build/forms.css': [
'build/forms-nr.css',
'build/forms-r.css'
]},
{'build/grids.css': [
'build/grids-core.css',
'build/grids-units.css'
]},
{'build/menus.css': [
'build/menus-core.css',
'build/menus-horizontal.css',
'build/menus-dropdown.css',
'build/menus-scrollable.css',
'build/menus-skin.css',
]},
// Rollups
{'build/<%= nick %>.css': [
'build/base.css',
'build/grids.css',
'build/buttons.css',
'build/forms.css',
'build/menus.css',
'build/tables.css'
]},
{'build/<%= nick %>-nr.css': [
'build/base.css',
'build/grids.css',
'build/buttons.css',
'build/forms-nr.css',
'build/menus.css',
'build/tables.css'
]}
]
}
},
// -- PostCSS Config --------------------------------------------------------
postcss: {
options: {
processors: [
require('autoprefixer')()
]
},
dist: {
src: 'build/*.css'
}
},
// -- CSSLint Config -------------------------------------------------------
csslint: {
options: {
csslintrc: '.csslintrc'
},
base : ['src/base/css/*.css'],
buttons: ['src/buttons/css/*.css'],
forms : ['src/forms/css/*.css'],
grids : ['src/grids/css/*.css'],
menus : ['src/menus/css/*.css'],
tables : ['src/tables/css/*.css']
},
// -- CSSMin Config --------------------------------------------------------
cssmin: {
options: {
noAdvanced: true
},
files: {
expand: true,
src : 'build/*.css',
ext : '-min.css'
}
},
// -- Compress Config ------------------------------------------------------
compress: {
release: {
options: {
archive: 'release/<%= pkg.version %>/<%= nick %>-<%= pkg.version %>.tar.gz'
copy: {
build: {
src : 'src/**/css/*.css',
dest : 'build/',
expand : true,
flatten: true
},
expand : true,
flatten: true,
src : 'build/*',
dest : '<%= nick %>/<%= pkg.version %>/'
}
},
// -- License Config -------------------------------------------------------
license: {
normalize: {
options: {
banner: [
'/*!',
'normalize.css v<%= pkg.devDependencies["normalize-css"] %> | MIT License | git.io/normalize',
'Copyright (c) Nicolas Gallagher and Jonathan Neal',
'*/\n'
].join('\n')
},
expand: true,
cwd : 'build/',
src : ['base*.css', '<%= nick %>*.css']
},
yahoo: {
options: {
banner: [
'/*!',
'Pure v<%= pkg.version %>',
'Copyright 2013 Yahoo!',
'Licensed under the BSD License.',
'https://github.com/pure-css/pure/blob/master/LICENSE.md',
'*/\n'
].join('\n')
},
expand: true,
src : ['build/*.css']
}
},
// -- Pure Grids Units Config ----------------------------------------------
pure_grids: {
default_units: {
dest: 'build/grids-units.css',
options: {
units: [5, 24]
release: {
src : '{LICENSE.md,README.md,HISTORY.md}',
dest: 'build/'
}
},
responsive: {
dest: 'build/grids-responsive.css',
// -- Concat Config --------------------------------------------------------
concat: {
build: {
files: [
{'build/base.css': [
'node_modules/normalize.css/normalize.css',
'build/base.css'
]},
{'build/buttons.css': [
'build/buttons-core.css',
'build/buttons.css'
]},
{'build/forms-nr.css': [
'build/forms.css'
]},
{'build/forms.css': [
'build/forms-nr.css',
'build/forms-r.css'
]},
{'build/grids.css': [
'build/grids-core.css',
'build/grids-units.css'
]},
{'build/menus.css': [
'build/menus-core.css',
'build/menus-horizontal.css',
'build/menus-dropdown.css',
'build/menus-scrollable.css',
'build/menus-skin.css',
]},
// Rollups
{'build/<%= nick %>.css': [
'build/base.css',
'build/grids.css',
'build/buttons.css',
'build/forms.css',
'build/menus.css',
'build/tables.css'
]},
{'build/<%= nick %>-nr.css': [
'build/base.css',
'build/grids.css',
'build/buttons.css',
'build/forms-nr.css',
'build/menus.css',
'build/tables.css'
]}
]
}
},
// -- PostCSS Config --------------------------------------------------------
postcss: {
options: {
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
processors: [
require('autoprefixer')()
]
},
dist: {
src: 'build/*.css'
}
},
// -- CSSLint Config -------------------------------------------------------
csslint: {
options: {
csslintrc: '.csslintrc'
},
base : ['src/base/css/*.css'],
buttons: ['src/buttons/css/*.css'],
forms : ['src/forms/css/*.css'],
grids : ['src/grids/css/*.css'],
menus : ['src/menus/css/*.css'],
tables : ['src/tables/css/*.css']
},
// -- CSSMin Config --------------------------------------------------------
cssmin: {
options: {
noAdvanced: true
},
files: {
expand: true,
src : 'build/*.css',
ext : '-min.css'
}
},
// -- Compress Config ------------------------------------------------------
compress: {
release: {
options: {
archive: 'release/<%= pkg.version %>/<%= nick %>-<%= pkg.version %>.tar.gz'
},
expand : true,
flatten: true,
src : 'build/*',
dest : '<%= nick %>/<%= pkg.version %>/'
}
},
// -- License Config -------------------------------------------------------
license: {
normalize: {
options: {
banner: [
'/*!',
'normalize.css v<%= pkg.devDependencies["normalize-css"] %> | MIT License | git.io/normalize',
'Copyright (c) Nicolas Gallagher and Jonathan Neal',
'*/\n'
].join('\n')
},
expand: true,
cwd : 'build/',
src : ['base*.css', '<%= nick %>*.css']
},
yahoo: {
options: {
banner: [
'/*!',
'Pure v<%= pkg.version %>',
'Copyright 2013 Yahoo!',
'Licensed under the BSD License.',
'https://github.com/pure-css/pure/blob/master/LICENSE.md',
'*/\n'
].join('\n')
},
expand: true,
src : ['build/*.css']
}
},
// -- Pure Grids Units Config ----------------------------------------------
pure_grids: {
default_units: {
dest: 'build/grids-units.css',
options: {
units: [5, 24]
}
},
responsive: {
dest: 'build/grids-responsive.css',
options: {
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
}
}
}
},
// -- CSS Selectors Config -------------------------------------------------
css_selectors: {
base: {
src : 'build/base.css',
dest: 'build/base-context.css',
options: {
mutations: [{prefix: '.pure'}]
}
}
},
// -- Watch/Observe Config -------------------------------------------------
observe: {
src: {
files: 'src/**/css/*.css',
tasks: ['test', 'suppress', 'build'],
options: {
interrupt: true
}
}
}
},
});
// -- CSS Selectors Config -------------------------------------------------
// -- Main Tasks ---------------------------------------------------------------
css_selectors: {
base: {
src : 'build/base.css',
dest: 'build/base-context.css',
// npm tasks.
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-compress');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-css-selectors');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-pure-grids');
options: {
mutations: [{prefix: '.pure'}]
}
}
},
// Local tasks.
grunt.loadTasks('tasks/');
// -- Watch/Observe Config -------------------------------------------------
grunt.registerTask('default', ['test', 'build']);
grunt.registerTask('test', ['csslint']);
grunt.registerTask('build', [
'clean:build',
'copy:build',
'pure_grids',
'concat:build',
'clean:build_res',
'css_selectors:base',
'postcss',
'cssmin',
'license'
]);
observe: {
src: {
files: 'src/**/css/*.css',
tasks: ['test', 'suppress', 'build'],
// Makes the `watch` task run a build first.
grunt.renameTask('watch', 'observe');
grunt.registerTask('watch', ['default', 'observe']);
options: {
interrupt: true
}
}
}
});
// -- Main Tasks ---------------------------------------------------------------
// npm tasks.
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-compress');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-css-selectors');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-pure-grids');
// Local tasks.
grunt.loadTasks('tasks/');
grunt.registerTask('default', ['test', 'build']);
grunt.registerTask('test', ['csslint']);
grunt.registerTask('build', [
'clean:build',
'copy:build',
'pure_grids',
'concat:build',
'clean:build_res',
'css_selectors:base',
'postcss',
'cssmin',
'license'
]);
// Makes the `watch` task run a build first.
grunt.renameTask('watch', 'observe');
grunt.registerTask('watch', ['default', 'observe']);
grunt.registerTask('release', [
'default',
'clean:release',
'copy:release',
'compress:release'
]);
grunt.registerTask('release', [
'default',
'clean:release',
'copy:release',
'compress:release'
]);
};

12
package.json
View File

@ -6,7 +6,9 @@
"url": "git://github.com/pure-css/pure.git"
},
"scripts": {
"lint": "eslint . --ext .js",
"prepare": "grunt release",
"pretest": "npm run lint",
"site:build": "npm run pretest && cd site && npm install && npm run build",
"site:start": "cd site && npm run start",
"test": "grunt test && tap test/*.js"
@ -14,6 +16,8 @@
"files": "build/",
"devDependencies": {
"autoprefixer": "^9.6.1",
"eslint": "^7.0.0",
"eslint-plugin-react": "^7.20.0",
"grunt": "^1.0.1",
"grunt-cli": "^1.2.0",
"grunt-contrib-clean": "^2.0.0",
@ -26,6 +30,7 @@
"grunt-css-selectors": "^1.1.0",
"grunt-postcss": "^0.9.0",
"grunt-pure-grids": "^2.0.0",
"husky": "^4.2.5",
"normalize.css": "^8.0.1",
"tap": "^14.4.1"
},
@ -55,5 +60,10 @@
"ie >= 10",
"iOS >= 12",
"Android >= 6"
]
],
"husky": {
"hooks": {
"pre-commit": "npm test"
}
}
}

6
scripts/deploy.sh Executable file
View File

@ -0,0 +1,6 @@
git config --global user.name "${GH_NAME}"
git config --global user.email "${GH_EMAIL}"
echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc
cd site
npm install
GIT_USER="${GH_NAME}" npm run deploy

1
site/components/Footer.js
View File

@ -1,5 +1,4 @@
import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
function Footer({ siteConfig }) {
const { customFields, organizationName, projectName } = siteConfig;

4
site/components/Menu.js
View File

@ -1,7 +1,7 @@
import Link from '@docusaurus/Link';
import React from 'react';
function Menu(props) {
function Menu() {
return (
<>
<a href="#menu" id="menuLink" className="menu-link">
@ -46,9 +46,11 @@ function Menu(props) {
<li className="pure-menu-item">
<Link to="/extend/" className="pure-menu-link">Extend</Link>
</li>
{/*
<li className="pure-menu-item">
<a href="http://blog.purecss.io/" className="pure-menu-link">Blog</a>
</li>
*/}
<li className="pure-menu-item">
<a href="https://github.com/pure-css/pure/releases/" className="pure-menu-link">Releases</a>
</li>

8
site/components/SectionHeader.js
View File

@ -1,11 +1,11 @@
import React from 'react';
function SectionHeader({ heading, TagName = 'h2' }) {
function SectionHeader({ heading, TagName = 'h2' }) {
// Remove HTML entities, and all chars except whitespace, word chars, and from the `heading`.
const id = heading.toLowerCase()
.replace(/&[^\s;]+;?/g, '')
.replace(/[^\s\w\-]+/g, '')
.replace(/\s+/g, '-');
.replace(/&[^\s;]+;?/g, '')
.replace(/[^\s\w-]+/g, '')
.replace(/\s+/g, '-');
return (
<TagName id={id} className="content-subhead">

42
site/docusaurus.config.js
View File

@ -2,26 +2,26 @@ const { moduleSizes, PURE_DOWNLOAD_SNIPPET } = require('./lib/pure');
const { version } = require('../package.json');
module.exports = {
title: 'Pure',
tagline: 'Pure is a ridiculously tiny CSS library you can use to start any web project.',
url: 'https://pure-css.github.io',
baseUrl: '/',
favicon: 'img/favicon.ico',
organizationName: 'pure-css',
projectName: 'pure-css.github.io',
plugins: [
'@docusaurus/plugin-content-pages',
'@docusaurus/plugin-google-analytics',
],
themeConfig: {
googleAnalytics: {
trackingID: 'UA-41480445-1',
anonymizeIP: true,
title: 'Pure',
tagline: 'Pure is a ridiculously tiny CSS library you can use to start any web project.',
url: 'https://pure-css.github.io',
baseUrl: '/',
favicon: 'img/favicon.ico',
organizationName: 'pure-css',
projectName: 'pure-css.github.io',
plugins: [
'@docusaurus/plugin-content-pages',
'@docusaurus/plugin-google-analytics',
],
themeConfig: {
googleAnalytics: {
trackingID: 'UA-41480445-1',
anonymizeIP: true,
},
},
customFields: {
PURE_DOWNLOAD_SNIPPET,
moduleSizes: moduleSizes(),
pureVersion: version,
},
},
customFields: {
PURE_DOWNLOAD_SNIPPET,
moduleSizes: moduleSizes(),
pureVersion: version,
},
};

6
site/lib/pure.js
View File

@ -18,8 +18,8 @@ module.exports.moduleSizes = function moduleSizes() {
const files = fs.readdirSync(pureDir);
// collect all minified module files
const modules = files.filter(file => (/\-min\.css$/).test(file))
.map(file => file.replace(/\-min\.css$/, ''));
const modules = files.filter(file => (/-min\.css$/).test(file))
.map(file => file.replace(/-min\.css$/, ''));
// get sizes across all modules
const moduleSizes = modules.map(module => {
@ -33,4 +33,4 @@ module.exports.moduleSizes = function moduleSizes() {
map[modules[i]] = size;
return map;
}, {});
}
};

5
site/package-lock.json generated
View File

@ -2591,6 +2591,11 @@
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="
},
"common-tags": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz",
"integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw=="
},
"commondir": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",

1
site/package.json
View File

@ -17,6 +17,7 @@
"@docusaurus/plugin-content-pages": "^2.0.0-alpha.53",
"@docusaurus/plugin-google-analytics": "^2.0.0-alpha.53",
"classnames": "^2.2.6",
"common-tags": "^1.8.0",
"gzip-size": "^5.1.1",
"js-beautify": "^1.11.0",
"react": "^16.8.4",

20
site/src/index.js
View File

@ -1,15 +1,15 @@
const path = require('path');
module.exports = function(context, options) {
return {
name: 'pure-theme',
module.exports = function() {
return {
name: 'pure-theme',
getThemePath() {
return path.resolve(__dirname, './theme');
},
getThemePath() {
return path.resolve(__dirname, './theme');
},
getClientModules() {
return [];
},
getClientModules() {
return [];
},
};
};
};

83
site/src/pages/base/index.js
View File

@ -1,5 +1,4 @@
import Link from '@docusaurus/Link';
import classnames from 'classnames';
import React from 'react';
import Layout from '../../theme/Layout';
import Header from '../../../components/Header';
@ -10,73 +9,73 @@ const title = 'Base';
const description = 'Leveraging Normalize.css, an HTML5-ready alternative to CSS resets.';
function Base() {
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
<div className="content">
<SectionHeader heading="The Foundation" />
<div className="content">
<SectionHeader heading="The Foundation" />
<p>
<p>
All modules in Pure build on top of <a href="https://necolas.github.io/normalize.css/">Normalize.css</a>. It's our foundational layer to maintain some degree of cross-browser consistency. You can pull in Normalize.css by adding this <code>&lt;link&gt;</code> element on your page:
</p>
</p>
<CodeBlock wrap={true}>
{`<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">`}
</CodeBlock>
<CodeBlock wrap={true}>
{'<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">'}
</CodeBlock>
<h3>A bit about Normalize.css</h3>
<h3>A bit about Normalize.css</h3>
<p>
<a href="https://necolas.github.io/normalize.css/">Normalize.css</a> is an open-source project by <a href="http://twitter.com/necolas">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal">Jonathan Neal</a>. <a href="http://nicolasgallagher.com/about-normalize-css/">In their own words</a>:
</p>
<p>
<a href="https://necolas.github.io/normalize.css/">Normalize.css</a> is an open-source project by <a href="http://twitter.com/necolas">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal">Jonathan Neal</a>. <a href="http://nicolasgallagher.com/about-normalize-css/">In their own words</a>:
</p>
<blockquote className="content-quote">
<blockquote className="content-quote">
Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset."
</blockquote>
</blockquote>
<p>
<p>
Normalize.css comes with <a href="https://github.com/necolas/normalize.css/wiki">great documentation</a> and a <a href="http://nicolasgallagher.com/about-normalize-css/">thorough guide</a> explaining how it differs from a traditional reset.
</p>
</p>
<SectionHeader heading="Extras" />
<SectionHeader heading="Extras" />
<p>
<p>
In addition to Normalize.css rules, Pure's Base module contains some common styles that are used by most websites.
</p>
</p>
<h3>Hiding Elements</h3>
<h3>Hiding Elements</h3>
<p>
<p>
Add the <code>hidden</code> attribute to an HTML element to hide it from the screen via <code>display: none !important;</code>. Alternatively, for compatibility with old IE, you may use the CSS classname <code>.hidden</code>.
</p>
</p>
<CodeBlock wrap={true}>
{`<input type="text" name="_csrf" hidden>`}
</CodeBlock>
<CodeBlock wrap={true}>
{'<input type="text" name="_csrf" hidden>'}
</CodeBlock>
<h3>Responsive Images</h3>
<h3>Responsive Images</h3>
<p>
<p>
Add the <code>.pure-img</code> class name to an <code>&lt;img&gt;</code> element to make it scale with the viewport. This is handy when building responsive websites.
</p>
</p>
<CodeBlock wrap={true}>
{`<img class="pure-img" src="...">`}
</CodeBlock>
<CodeBlock wrap={true}>
{'<img class="pure-img" src="...">'}
</CodeBlock>
<SectionHeader heading="Moving beyong Normalize" />
<SectionHeader heading="Moving beyong Normalize" />
<p>
<p>
Normalize.css is a great starting place for your project, but some HTML elements such as forms, tables, and menus require more styling than what's provided by Normalize.
</p>
</p>
<p>
<p>
We made a more opinionated look and feel for these elements, while keeping them minimal enough so that you can customize them for your site or app's needs. Check out our CSS for <Link to="/forms">Forms</Link>, <Link to="/tables">Tables</Link>, and <Link to="/menus">Menus</Link>.
</p>
</div>
</Layout>
);
</p>
</div>
</Layout>
);
}
export default Base;

177
site/src/pages/buttons/index.js
View File

@ -1,4 +1,3 @@
import Link from '@docusaurus/Link';
import React from 'react';
import Layout from '../../theme/Layout';
import Header from '../../../components/Header';
@ -10,71 +9,71 @@ const title = 'Buttons';
const description = 'Simple CSS for buttons.';
function Buttons() {
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
<div className="content" onClick={handleClick}>
<SectionHeader heading="Default Buttons" />
<div className="content" onClick={handleClick}>
<SectionHeader heading="Default Buttons" />
<p>
<p>
To create a Pure Button, add the <code>pure-button</code> classname to any <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> element.
</p>
</p>
<Example>
<a className="pure-button" href="#">A Pure Button</a>
<button className="pure-button">A Pure Button</button>
</Example>
<Example>
<a className="pure-button" href="#">A Pure Button</a>
<button className="pure-button">A Pure Button</button>
</Example>
<SectionHeader heading="Disabled Buttons" />
<SectionHeader heading="Disabled Buttons" />
<p>
<p>
To mark a button as disabled, add the <code>pure-button-disabled</code> classname alongside <code>pure-button</code>.
Alternatively, add the "disabled" attribute directly to your button.
</p>
</p>
<Example>
<button className="pure-button pure-button-disabled">A Disabled Button</button>
<button className="pure-button" disabled>A Disabled Button</button>
</Example>
<Example>
<button className="pure-button pure-button-disabled">A Disabled Button</button>
<button className="pure-button" disabled>A Disabled Button</button>
</Example>
<SectionHeader heading="Active Buttons" />
<SectionHeader heading="Active Buttons" />
<p>
<p>
To style a button so that it appears "pressed", add the <code>pure-button-active</code> classname alongside <code>pure-button</code>.
</p>
</p>
<Example>
<a className="pure-button pure-button-active" href="#">An Active Button</a>
<button className="pure-button pure-button-active">An Active Button</button>
</Example>
<Example>
<a className="pure-button pure-button-active" href="#">An Active Button</a>
<button className="pure-button pure-button-active">An Active Button</button>
</Example>
<SectionHeader heading="Primary Buttons" />
<SectionHeader heading="Primary Buttons" />
<p>
<p>
To indicate that a button represents a primary action, add the <code>pure-button-primary</code> classname alongside <code>pure-button</code>.
</p>
</p>
<Example>
<a className="pure-button pure-button-primary" href="#">A Primary Button</a>
<button className="pure-button pure-button-primary">A Primary Button</button>
</Example>
<Example>
<a className="pure-button pure-button-primary" href="#">A Primary Button</a>
<button className="pure-button pure-button-primary">A Primary Button</button>
</Example>
<SectionHeader heading="Customizing Buttons" />
<SectionHeader heading="Customizing Buttons" />
<p>
<p>
Thanks to Pure's minimal styling, it is easy to build off of the generic Pure button and create customized buttons for your own application.
</p>
</p>
<p>
<p>
To customize button styles, you should group your custom CSS into a class such as <code>button-foo</code>, which you can then add to an element that already has the <code>pure-button</code> classname. Here are some examples.
</p>
</p>
<h3 className="content-subhead">Colored buttons with rounded corners</h3>
<h3 className="content-subhead">Colored buttons with rounded corners</h3>
<Example>
<div>
<style scoped dangerouslySetInnerHTML={{ __html: `
<Example>
<div>
<style scoped dangerouslySetInnerHTML={{ __html: `
.button-success,
.button-error,
.button-warning,
@ -96,18 +95,18 @@ function Buttons() {
background: rgb(66, 184, 221); /* this is a light blue */
}
`}} />
<button className="button-success pure-button">Success Button</button>
<button className="button-error pure-button">Error Button</button>
<button className="button-warning pure-button">Warning Button</button>
<button className="button-secondary pure-button">Secondary Button</button>
</div>
</Example>
<button className="button-success pure-button">Success Button</button>
<button className="button-error pure-button">Error Button</button>
<button className="button-warning pure-button">Warning Button</button>
<button className="button-secondary pure-button">Secondary Button</button>
</div>
</Example>
<h3 className="content-subhead">Buttons with different sizes</h3>
<h3 className="content-subhead">Buttons with different sizes</h3>
<Example>
<div>
<style scoped dangerouslySetInnerHTML={{ __html: `
<Example>
<div>
<style scoped dangerouslySetInnerHTML={{ __html: `
.button-xsmall {
font-size: 70%;
}
@ -121,56 +120,56 @@ function Buttons() {
font-size: 125%;
}
`}} />
<button className="button-xsmall pure-button">Extra Small Button</button>
<button className="button-small pure-button">Small Button</button>
<button className="pure-button">Regular Button</button>
<button className="button-large pure-button">Large Button</button>
<button className="button-xlarge pure-button">Extra Large Button</button>
</div>
</Example>
<button className="button-xsmall pure-button">Extra Small Button</button>
<button className="button-small pure-button">Small Button</button>
<button className="pure-button">Regular Button</button>
<button className="button-large pure-button">Large Button</button>
<button className="button-xlarge pure-button">Extra Large Button</button>
</div>
</Example>
<h3 className="content-subhead">Buttons with icons</h3>
<h3 className="content-subhead">Buttons with icons</h3>
<p>
<p>
Pure doesn't ship with icon fonts, but we play nice with existing ones. Incorporating icon fonts with Pure Buttons is easy. In the example below, we're using icon fonts from <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>. Put the <a href="http://fortawesome.github.io/Font-Awesome/get-started/">Font Awesome CSS file</a> on your page and use an <code>&lt;i&gt;</code> element within a <code>pure-button</code> element.
</p>
</p>
<Example>
<button className="pure-button">
<i className="fa fa-cog"></i>
<Example>
<button className="pure-button">
<i className="fa fa-cog"></i>
Settings
</button>
<a className="pure-button" href="#">
<i className="fa fa-shopping-cart fa-lg"></i>
</button>
<a className="pure-button" href="#">
<i className="fa fa-shopping-cart fa-lg"></i>
Checkout
</a>
</Example>
</a>
</Example>
<SectionHeader heading="Button Groups" />
<SectionHeader heading="Button Groups" />
<p>
<p>
Group multiple buttons together on a single line.
</p>
</p>
<aside>
<p>
<aside>
<p>
For assistive technologies (i.e, screen readers) a <code>role</code> attribute should be provided to ensure that proper meaning is conveyed. Button groups should have a <code>role&#x3D;&quot;group&quot;</code>, while toolbars should have <code>role&#x3D;&quot;toolbar&quot;</code>.
</p>
<p>
</p>
<p>
Additionally, a clear label should be provided since most assistive technologies will not announce them. The code snippet below provides an example.
</p>
</aside>
</p>
</aside>
<Example>
<div className="pure-button-group" role="group" aria-label="...">
<button className="pure-button">A Pure Button</button>
<button className="pure-button">A Pure Button</button>
<button className="pure-button pure-button-active">A Pure Button</button>
</div>
</Example>
</div>
</Layout>
);
<Example>
<div className="pure-button-group" role="group" aria-label="...">
<button className="pure-button">A Pure Button</button>
<button className="pure-button">A Pure Button</button>
<button className="pure-button pure-button-active">A Pure Button</button>
</div>
</Example>
</div>
</Layout>
);
}
export default Buttons;

18
site/src/pages/customize/index.js
View File

@ -5,7 +5,7 @@ import Layout from '../../theme/Layout';
import Header from '../../../components/Header';
import CodeBlock from '../../../components/CodeBlock';
import SectionHeader from '../../../components/SectionHeader';
import { filePercent, fileSize } from '../../../lib/utils';
import { fileSize } from '../../../lib/utils';
const title = 'Customize';
const description = 'Choose the modules that you need.';
@ -79,37 +79,31 @@ function Customize() {
<tbody>
<tr>
<td><a href="http://cdnjs.com/">cdnjs</a></td>
<td>//cdnjs.cloudflare.com/ajax/libs/pure/{pureVersion}/pure-min.css</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td><a href="http://www.jsdelivr.com/">jsDelivr</a></td>
<td>//cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/pure-min.css</td>
<td>{`//cdnjs.cloudflare.com/ajax/libs/pure/${pureVersion}/build/pure-min.css`}</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td><a href="https://www.keycdn.com/">KeyCDN</a></td>
<td>//opensource.keycdn.com/pure/{pureVersion}/pure-min.css</td>
<td>{`//opensource.keycdn.com/pure/${pureVersion}/pure-min.css`}</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td><a href="http://www.osscdn.com/">OSS MaxCDN</a></td>
<td>//oss.maxcdn.com/libs/pure/{pureVersion}/pure-min.css</td>
<td>{`//oss.maxcdn.com/libs/pure/${pureVersion}/pure-min.css`}</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td><a href="http://rawgit.com/">RawGit</a></td>
<td>//cdn.rawgit.com/pure-css/pure-release/v{pureVersion}/pure-min.css</td>
<td>{`//cdn.rawgit.com/pure-css/pure-release/v${pureVersion}/pure-min.css`}</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td><a href="http://www.staticfile.org/">Staticfile</a></td>
<td>//cdn.staticfile.org/pure/{pureVersion}/pure-min.css</td>
<td>{`//cdn.staticfile.org/pure/${pureVersion}/pure-min.css`}</td>
<td>Yes</td>
<td>No</td>
</tr>

135
site/src/pages/extend/index.js
View File

@ -4,6 +4,7 @@ import Layout from '../../theme/Layout';
import Header from '../../../components/Header';
import CodeBlock from '../../../components/CodeBlock';
import SectionHeader from '../../../components/SectionHeader';
import { stripIndent } from 'common-tags';
const title = 'Extend';
const description = 'Build on top of Pure.';
@ -49,7 +50,7 @@ function Extend() {
</p>
<CodeBlock>
{`<form class="pure-form pure-form-stacked"></form>`}
{'<form class="pure-form pure-form-stacked"></form>'}
</CodeBlock>
<h4>Stacked Form: CSS</h4>
@ -59,19 +60,21 @@ function Extend() {
</p>
<CodeBlock>
{`/*
Standard rules that all Pure Forms have. This includes rules for
styling .pure-form &lt;inputs&gt;, &lt;fieldsets&gt;, and &lt;legends&gt;, as well as layout
rules such as vertical alignments.
*/
.pure-form { ... }
{stripIndent`
/*
Standard rules that all Pure Forms have. This includes rules for
styling .pure-form &lt;inputs&gt;, &lt;fieldsets&gt;, and &lt;legends&gt;, as well as layout
rules such as vertical alignments.
*/
.pure-form { ... }
/*
Specific rules that apply to stacked forms. This includes rules
such as taking child &lt;input&gt; elements and making them display: block
for the stacked effect.
*/
.pure-form-stacked { ... }`}
/*
Specific rules that apply to stacked forms. This includes rules
such as taking child &lt;input&gt; elements and making them display: block
for the stacked effect.
*/
.pure-form-stacked { ... }
`}
</CodeBlock>
<SectionHeader heading="Extending Pure" />
@ -81,12 +84,14 @@ function Extend() {
</p>
<CodeBlock>
{`<form class="form-custom pure-form"></form>`}
{'<form class="form-custom pure-form"></form>'}
</CodeBlock>
<CodeBlock className="test">
{`/* add your custom styles in this selector */
.form-custom { ... }`}
{stripIndent`
/* add your custom styles in this selector */
.form-custom { ... }
`}
</CodeBlock>
<p>
@ -122,55 +127,57 @@ function Extend() {
</p>
<CodeBlock>
{`<!-- Button to trigger modal -->
<p>
<a href="#myModal" role="button" className="pure-button-primary pure-button" data-toggle="modal">
Launch Pure + Bootstrap Modal
</a>
</p>
{stripIndent`
<!-- Button to trigger modal -->
<p>
<a href="#myModal" role="button" className="pure-button-primary pure-button" data-toggle="modal">
Launch Pure + Bootstrap Modal
</a>
</p>
<!-- Modal -->
<!--
* Bootstrap v2.3.2
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
-->
<div id="myModal" className="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div className="modal-header">
<h1 id="myModalLabel">A Bootstrap Modal with Pure</h1>
</div>
<div className="modal-body">
<p>
This modal is launched by including <em>just</em> the <code>modal.css</code> and <code>modal.js</code> file from Bootstrap, and including Pure to drive all low-level styles. The result is a fully-functional Modal using just a fraction of the CSS.
</p>
<form className="pure-form pure-form-stacked">
<legend>A Stacked Form</legend>
<label for="email">Email</label>
<input id="email" type="text" placeholder="Email">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
<label for="state">State</label>
<select id="state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label className="pure-checkbox">
<input type="checkbox"> Remember me
</label>
</form>
</div>
<div className="modal-footer">
<button className="pure-button" data-dismiss="modal" aria-hidden="true">Close</button>
<button className="pure-button pure-button-primary">Submit</button>
</div>
</div>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>`}
<!-- Modal -->
<!--
* Bootstrap v2.3.2
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
-->
<div id="myModal" className="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div className="modal-header">
<h1 id="myModalLabel">A Bootstrap Modal with Pure</h1>
</div>
<div className="modal-body">
<p>
This modal is launched by including <em>just</em> the <code>modal.css</code> and <code>modal.js</code> file from Bootstrap, and including Pure to drive all low-level styles. The result is a fully-functional Modal using just a fraction of the CSS.
</p>
<form className="pure-form pure-form-stacked">
<legend>A Stacked Form</legend>
<label for="email">Email</label>
<input id="email" type="text" placeholder="Email">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
<label for="state">State</label>
<select id="state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label className="pure-checkbox">
<input type="checkbox"> Remember me
</label>
</form>
</div>
<div className="modal-footer">
<button className="pure-button" data-dismiss="modal" aria-hidden="true">Close</button>
<button className="pure-button pure-button-primary">Submit</button>
</div>
</div>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
`}
</CodeBlock>
</div>
</Layout>

480
site/src/pages/forms/index.js
View File

@ -9,297 +9,297 @@ const title = 'Forms';
const description = 'Simple CSS for HTML forms.';
function Forms() {
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
<div className="content">
<SectionHeader heading="Default Form" />
<div className="content">
<SectionHeader heading="Default Form" />
<p>
<p>
To create a default inline form, add the <code>pure-form</code> classname to any <code>&lt;form&gt;</code> element.
</p>
</p>
<Example>
<form className="pure-form">
<fieldset>
<legend>A compact inline form</legend>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<label htmlFor="default-remember">
<input id="default-remember" type="checkbox" />
<Example>
<form className="pure-form">
<fieldset>
<legend>A compact inline form</legend>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<label htmlFor="default-remember">
<input id="default-remember" type="checkbox" />
Remember me
</label>
<button type="submit" className="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
</Example>
</label>
<button type="submit" className="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
</Example>
<SectionHeader heading="Stacked Form" />
<SectionHeader heading="Stacked Form" />
<p>
<p>
To create a stacked form with input elements below the labels, add the <code>pure-form-stacked</code> classname to a <code>&lt;form&gt;</code> element alongside <code>pure-form</code>.
</p>
</p>
<Example>
<form className="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form</legend>
<label htmlFor="stacked-email">Email</label>
<input id="stacked-email" type="email" placeholder="Email" />
<span className="pure-form-message">This is a required field.</span>
<label htmlFor="stacked-password">Password</label>
<input id="stacked-password" type="password" placeholder="Password" />
<label htmlFor="stacked-state">State</label>
<select id="stacked-state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label htmlFor="stacked-remember" className="pure-checkbox">
<input id="stacked-remember" type="checkbox" /> Remember me
</label>
<button type="submit" className="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
</Example>
<Example>
<form className="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form</legend>
<label htmlFor="stacked-email">Email</label>
<input id="stacked-email" type="email" placeholder="Email" />
<span className="pure-form-message">This is a required field.</span>
<label htmlFor="stacked-password">Password</label>
<input id="stacked-password" type="password" placeholder="Password" />
<label htmlFor="stacked-state">State</label>
<select id="stacked-state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label htmlFor="stacked-remember" className="pure-checkbox">
<input id="stacked-remember" type="checkbox" /> Remember me
</label>
<button type="submit" className="pure-button pure-button-primary">Sign in</button>
</fieldset>
</form>
</Example>
<SectionHeader heading="Aligned Form" />
<SectionHeader heading="Aligned Form" />
<p>
<p>
To create an aligned form, add the <code>pure-form-aligned</code> classname to a <code>&lt;form&gt;</code> element alongside <code>pure-form</code>. In an aligned form, the labels are right-aligned against the form input controls, but on smaller screens revert to a <Link to="#stacked-form">stacked form</Link>.
</p>
</p>
<Example>
<form className="pure-form pure-form-aligned">
<fieldset>
<div className="pure-control-group">
<label htmlFor="aligned-name">Username</label>
<input id="aligned-name" type="text" placeholder="Username" />
<span className="pure-form-message-inline">This is a required field.</span>
</div>
<div className="pure-control-group">
<label htmlFor="aligned-password">Password</label>
<input id="aligned-password" type="password" placeholder="Password" />
</div>
<div className="pure-control-group">
<label htmlFor="aligned-email">Email Address</label>
<input id="aligned-email" type="email" placeholder="Email Address" />
</div>
<div className="pure-control-group">
<label htmlFor="aligned-foo">Supercalifragilistic Label</label>
<input id="aligned-foo" type="text" placeholder="Enter something here..." />
</div>
<div className="pure-controls">
<label htmlFor="aligned-cb" className="pure-checkbox">
<input id="aligned-cb" type="checkbox" /> I've read the terms and conditions
</label>
<button type="submit" className="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</Example>
<Example>
<form className="pure-form pure-form-aligned">
<fieldset>
<div className="pure-control-group">
<label htmlFor="aligned-name">Username</label>
<input id="aligned-name" type="text" placeholder="Username" />
<span className="pure-form-message-inline">This is a required field.</span>
</div>
<div className="pure-control-group">
<label htmlFor="aligned-password">Password</label>
<input id="aligned-password" type="password" placeholder="Password" />
</div>
<div className="pure-control-group">
<label htmlFor="aligned-email">Email Address</label>
<input id="aligned-email" type="email" placeholder="Email Address" />
</div>
<div className="pure-control-group">
<label htmlFor="aligned-foo">Supercalifragilistic Label</label>
<input id="aligned-foo" type="text" placeholder="Enter something here..." />
</div>
<div className="pure-controls">
<label htmlFor="aligned-cb" className="pure-checkbox">
<input id="aligned-cb" type="checkbox" /> I've read the terms and conditions
</label>
<button type="submit" className="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</Example>
<SectionHeader heading="Multi-Column Form (with Pure Grids)" />
<SectionHeader heading="Multi-Column Form (with Pure Grids)" />
<p>
<p>
To create multi-column forms, include your form elements within a <Link to="/grids">Pure Grid</Link>. Creating responsive multi-column forms (like the example below) requires <Link to="/grids/#pure-responsive-grids">Pure Responsive Grids</Link> to be present on the page.
</p>
</p>
<Example>
<form className="pure-form pure-form-stacked">
<fieldset>
<legend>Legend</legend>
<div className="pure-g">
<div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-first-name">First Name</label>
<input id="multi-first-name" className="pure-u-23-24" type="text" />
</div>
<div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-last-name">Last Name</label>
<input id="multi-last-name" className="pure-u-23-24" type="text" />
</div>
<div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-email">E-Mail</label>
<input id="multi-email" className="pure-u-23-24" type="email" required />
</div>
<div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-city">City</label>
<input id="multi-city" className="pure-u-23-24" type="text" />
</div>
<div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-state">State</label>
<select id="multi-state" className="pure-input-1-2">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
</div>
</div>
<label htmlFor="multi-terms" className="pure-checkbox">
<input id="multi-terms" type="checkbox" /> I've read the terms and conditions
</label>
<button type="submit" className="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
</Example>
<Example>
<form className="pure-form pure-form-stacked">
<fieldset>
<legend>Legend</legend>
<div className="pure-g">
<div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-first-name">First Name</label>
<input id="multi-first-name" className="pure-u-23-24" type="text" />
</div>
<div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-last-name">Last Name</label>
<input id="multi-last-name" className="pure-u-23-24" type="text" />
</div>
<div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-email">E-Mail</label>
<input id="multi-email" className="pure-u-23-24" type="email" required />
</div>
<div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-city">City</label>
<input id="multi-city" className="pure-u-23-24" type="text" />
</div>
<div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-state">State</label>
<select id="multi-state" className="pure-input-1-2">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
</div>
</div>
<label htmlFor="multi-terms" className="pure-checkbox">
<input id="multi-terms" type="checkbox" /> I've read the terms and conditions
</label>
<button type="submit" className="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
</Example>
<SectionHeader heading="Grouped Inputs" />
<SectionHeader heading="Grouped Inputs" />
<p>
<p>
To group sets of text-based input elements, wrap them in a <code>&lt;fieldset&gt;</code> element with a <code>pure-group</code> classname. Grouped inputs work well for sign-up forms and look natural on mobile devices.
</p>
</p>
<Example>
<form className="pure-form">
<fieldset className="pure-group">
<input type="text" className="pure-input-1-2" placeholder="Username" />
<input type="text" className="pure-input-1-2" placeholder="Password" />
<input type="email" className="pure-input-1-2" placeholder="Email" />
</fieldset>
<fieldset className="pure-group">
<input type="text" className="pure-input-1-2" placeholder="A title" />
<textarea className="pure-input-1-2" placeholder="Textareas work too"></textarea>
</fieldset>
<button type="submit" className="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>
</Example>
<Example>
<form className="pure-form">
<fieldset className="pure-group">
<input type="text" className="pure-input-1-2" placeholder="Username" />
<input type="text" className="pure-input-1-2" placeholder="Password" />
<input type="email" className="pure-input-1-2" placeholder="Email" />
</fieldset>
<fieldset className="pure-group">
<input type="text" className="pure-input-1-2" placeholder="A title" />
<textarea className="pure-input-1-2" placeholder="Textareas work too"></textarea>
</fieldset>
<button type="submit" className="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>
</Example>
<SectionHeader heading="Input Sizing" />
<SectionHeader heading="Input Sizing" />
<p>
<p>
Input elements have fluid width sizes in a syntax that is similar to <Link to="/grids/">Pure Grids</Link>. You can apply a <code>pure-input-*</code> class to these elements.
</p>
</p>
<Example>
<form className="pure-form">
<input className="pure-input-1" type="text" placeholder=".pure-input-1" /><br />
<input className="pure-input-2-3" type="text" placeholder=".pure-input-2-3" /><br />
<input className="pure-input-1-2" type="text" placeholder=".pure-input-1-2" /><br />
<input className="pure-input-1-3" type="text" placeholder=".pure-input-1-3" /><br />
<input className="pure-input-1-4" type="text" placeholder=".pure-input-1-4" /><br />
</form>
</Example>
<Example>
<form className="pure-form">
<input className="pure-input-1" type="text" placeholder=".pure-input-1" /><br />
<input className="pure-input-2-3" type="text" placeholder=".pure-input-2-3" /><br />
<input className="pure-input-1-2" type="text" placeholder=".pure-input-1-2" /><br />
<input className="pure-input-1-3" type="text" placeholder=".pure-input-1-3" /><br />
<input className="pure-input-1-4" type="text" placeholder=".pure-input-1-4" /><br />
</form>
</Example>
<p>
<p>
You can control input sizing even further by wrapping them in grid containers. In the example below, the <code>&lt;input&gt;</code> elements have a <code>pure-input-1</code> class, but are wrapped in a <code>&lt;div&gt;</code> with a specific grid class.
</p>
</p>
<Example>
<form className="pure-form pure-g">
<div className="pure-u-1-4">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-4" />
</div>
<div className="pure-u-3-4">
<input className="pure-input-1" type="text" placeholder=".pure-u-3-4" />
</div>
<div className="pure-u-1-2">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-2" />
</div>
<div className="pure-u-1-2">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-2" />
</div>
<div className="pure-u-1-8">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-8" />
</div>
<div className="pure-u-1-8">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-8" />
</div>
<div className="pure-u-1-4">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-4" />
</div>
<div className="pure-u-1-2">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-2" />
</div>
<div className="pure-u-1-5">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-5" />
</div>
<div className="pure-u-2-5">
<input className="pure-input-1" type="text" placeholder=".pure-u-2-5" />
</div>
<div className="pure-u-2-5">
<input className="pure-input-1" type="text" placeholder=".pure-u-2-5" />
</div>
<div className="pure-u-1">
<input className="pure-input-1" type="text" placeholder=".pure-u-1" />
</div>
</form>
</Example>
<Example>
<form className="pure-form pure-g">
<div className="pure-u-1-4">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-4" />
</div>
<div className="pure-u-3-4">
<input className="pure-input-1" type="text" placeholder=".pure-u-3-4" />
</div>
<div className="pure-u-1-2">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-2" />
</div>
<div className="pure-u-1-2">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-2" />
</div>
<div className="pure-u-1-8">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-8" />
</div>
<div className="pure-u-1-8">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-8" />
</div>
<div className="pure-u-1-4">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-4" />
</div>
<div className="pure-u-1-2">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-2" />
</div>
<div className="pure-u-1-5">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-5" />
</div>
<div className="pure-u-2-5">
<input className="pure-input-1" type="text" placeholder=".pure-u-2-5" />
</div>
<div className="pure-u-2-5">
<input className="pure-input-1" type="text" placeholder=".pure-u-2-5" />
</div>
<div className="pure-u-1">
<input className="pure-input-1" type="text" placeholder=".pure-u-1" />
</div>
</form>
</Example>
<SectionHeader heading="Required Inputs" />
<SectionHeader heading="Required Inputs" />
<p>
<p>
To mark a form control as required, add the <code>required</code> attribute.
</p>
</p>
<Example>
<form className="pure-form">
<input type="email" placeholder="Requires an email" required />
</form>
</Example>
<Example>
<form className="pure-form">
<input type="email" placeholder="Requires an email" required />
</form>
</Example>
<SectionHeader heading="Disabled Inputs" />
<SectionHeader heading="Disabled Inputs" />
<p>
<p>
To disable a form control, add the <code>disabled</code> attribute.
</p>
</p>
<Example>
<form className="pure-form">
<input type="text" placeholder="Disabled input here..." disabled />
</form>
</Example>
<Example>
<form className="pure-form">
<input type="text" placeholder="Disabled input here..." disabled />
</form>
</Example>
<SectionHeader heading="Read-Only Inputs" />
<SectionHeader heading="Read-Only Inputs" />
<p>
<p>
To make a form input read-only, add the <code>readonly</code> attribute. The difference between <code>disabled</code> and <code>readonly</code> is read-only inputs are still focusable. This allows people to interact with the input and select its text, whereas disabled controls are not interactive.
</p>
</p>
<Example>
<form className="pure-form">
<input type="text" value="Readonly input here..." readOnly />
</form>
</Example>
<Example>
<form className="pure-form">
<input type="text" value="Readonly input here..." readOnly />
</form>
</Example>
<SectionHeader heading="Rounded Inputs" />
<SectionHeader heading="Rounded Inputs" />
<p>
<p>
To display a form control with rounded corners, add the <code>pure-input-rounded</code> classname.
</p>
</p>
<Example>
<form className="pure-form">
<input type="text" className="pure-input-rounded" />
<button type="submit" className="pure-button">Search</button>
</form>
</Example>
<Example>
<form className="pure-form">
<input type="text" className="pure-input-rounded" />
<button type="submit" className="pure-button">Search</button>
</form>
</Example>
<SectionHeader heading="Checkboxes and Radios" />
<SectionHeader heading="Checkboxes and Radios" />
<p>
<p>
To normalize and align checkboxes and radio inputs, add the <code>pure-checkbox</code> or <code>pure-radio</code> classname.
</p>
</p>
<Example>
<form className="pure-form">
<label htmlFor="checkbox-radio-option-one" className="pure-checkbox">
<input id="checkbox-radio-option-one" type="checkbox" value="" />
<Example>
<form className="pure-form">
<label htmlFor="checkbox-radio-option-one" className="pure-checkbox">
<input id="checkbox-radio-option-one" type="checkbox" value="" />
Here's option one.
</label>
<label htmlFor="checkbox-radio-option-two" className="pure-radio">
<input id="checkbox-radio-option-two" type="radio" name="optionsRadios" value="option1" defaultChecked />
</label>
<label htmlFor="checkbox-radio-option-two" className="pure-radio">
<input id="checkbox-radio-option-two" type="radio" name="optionsRadios" value="option1" defaultChecked />
Here's a radio button. You can choose this one..
</label>
<label htmlFor="checkbox-radio-option-three" className="pure-radio">
<input id="checkbox-radio-option-three" type="radio" name="optionsRadios" value="option2" />
</label>
<label htmlFor="checkbox-radio-option-three" className="pure-radio">
<input id="checkbox-radio-option-three" type="radio" name="optionsRadios" value="option2" />
..Or this one!
</label>
</form>
</Example>
</div>
</Layout>
);
</label>
</form>
</Example>
</div>
</Layout>
);
}
export default Forms;

134
site/src/pages/grids/index.js
View File

@ -1,13 +1,13 @@
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import classnames from 'classnames';
import React from 'react';
import Layout from '../../theme/Layout';
import Header from '../../../components/Header';
import CodeBlock from '../../../components/CodeBlock';
import SectionHeader from '../../../components/SectionHeader';
import { stripIndent } from 'common-tags';
import styles from './styles.css';
import './styles.css';
const title = 'Grids';
const description = 'Fully customizable and responsive CSS grids.';
@ -57,11 +57,13 @@ function Grids() {
</p>
<CodeBlock wrap={true}>
{`<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>`}
{stripIndent`
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>
`}
</CodeBlock>
<SectionHeader heading="Grids Units Sizes" />
@ -489,11 +491,13 @@ function Grids() {
</p>
<CodeBlock wrap={true}>
{`<div class="pure-g">
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
</div>`}
{stripIndent`
<div class="pure-g">
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
</div>
`}
</CodeBlock>
<p>
@ -501,11 +505,13 @@ function Grids() {
</p>
<CodeBlock wrap={true}>
{`<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>`}
{stripIndent`
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>
`}
</CodeBlock>
<h3>Default Media Queries</h3>
@ -578,7 +584,7 @@ function Grids() {
</p>
<CodeBlock wrap={true}>
{`1em == 16px *`}
{'1em == 16px *'}
</CodeBlock>
<p>
@ -733,22 +739,24 @@ function Grids() {
</p>
<CodeBlock wrap={true}>
{`<style>
.l-box {
padding: 1em;
}
</style>
{stripIndent`
<style>
.l-box {
padding: 1em;
}
</style>
...
...
<div class="pure-g">
<div class="pure-u-1-2">
<div class="l-box"> ... </div>
</div>
<div class="pure-u-1-2">
<div class="l-box"> ... </div>
</div>
</div>`}
<div class="pure-g">
<div class="pure-u-1-2">
<div class="l-box"> ... </div>
</div>
<div class="pure-u-1-2">
<div class="l-box"> ... </div>
</div>
</div>
`}
</CodeBlock>
<p>
@ -756,21 +764,23 @@ function Grids() {
</p>
<CodeBlock wrap={true}>
{`<style>
.pure-g > div {
box-sizing: border-box;
}
.l-box {
padding: 1em;
}
</style>
{stripIndent`
<style>
.pure-g > div {
box-sizing: border-box;
}
.l-box {
padding: 1em;
}
</style>
...
...
<div class="pure-g">
<div class="pure-u-1-2 l-box"> ... </div>
<div class="pure-u-1-2 l-box"> ... </div>
</div>`}
<div class="pure-g">
<div class="pure-u-1-2 l-box"> ... </div>
<div class="pure-u-1-2 l-box"> ... </div>
</div>
`}
</CodeBlock>
<p>
@ -784,18 +794,20 @@ function Grids() {
</p>
<CodeBlock wrap={true}>
{`<style>
/*
When setting the primary font stack, apply it to the Pure grid units along
with "html", "button", "input", "select", and "textarea". Pure Grids use
specific font stacks to ensure the greatest OS/browser compatibility.
*/
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
/* Set your content font stack here: */
font-family: Georgia, Times, "Times New Roman", serif;
}
</style>`}
{stripIndent`
<style>
/*
When setting the primary font stack, apply it to the Pure grid units along
with "html", "button", "input", "select", and "textarea". Pure Grids use
specific font stacks to ensure the greatest OS/browser compatibility.
*/
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
/* Set your content font stack here: */
font-family: Georgia, Times, "Times New Roman", serif;
}
</style>
`}
</CodeBlock>
<SectionHeader heading="Want to just use Grids?" />
@ -805,9 +817,11 @@ html, button, input, select, textarea,
</p>
<CodeBlock>
{`<link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/base-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/grids-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/grids-responsive-min.css">`}
{stripIndent`
<link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/base-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/grids-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/grids-responsive-min.css">
`}
</CodeBlock>
{/*

231
site/src/pages/index.js
View File

@ -5,7 +5,7 @@ import React from 'react';
import Layout from '@theme/Layout';
import CodeBlock from '../../components/CodeBlock';
import { filePercent, fileSize } from '../../lib/utils';
import styles from './styles.css';
import './styles.css';
const renderModuleSize = (filesizes) => {
const modules = ['base', 'grids', 'forms', 'buttons', 'tables', 'menus'];
@ -19,141 +19,140 @@ const renderModuleSize = (filesizes) => {
</Link>
</div>
));
}
};
function Home() {
const context = useDocusaurusContext();
const {siteConfig = {}} = context;
const {
customFields: {
moduleSizes,
PURE_DOWNLOAD_SNIPPET,
pureVersion,
},
organizationName,
projectName,
} = siteConfig;
const renderSize = renderModuleSize(moduleSizes);
return (
<Layout description={siteConfig.tagline}>
<div className="hero">
<div className="hero-titles">
<img className="logo" src={useBaseUrl('img/logo_pure@2x.png')} alt="Pure" />
const context = useDocusaurusContext();
const {siteConfig = {}} = context;
const {
customFields: {
moduleSizes,
PURE_DOWNLOAD_SNIPPET,
},
organizationName,
projectName,
} = siteConfig;
const renderSize = renderModuleSize(moduleSizes);
return (
<Layout description={siteConfig.tagline}>
<div className="hero">
<div className="hero-titles">
<img className="logo" src={useBaseUrl('img/logo_pure@2x.png')} alt="Pure" />
<h2 className="hero-tagline">A set of small, responsive CSS modules that you can use in every web project.</h2>
</div>
<h2 className="hero-tagline">A set of small, responsive CSS modules that you can use in every web project.</h2>
</div>
<div className="hero-cta">
<CodeBlock full={true} wrap={true}>{PURE_DOWNLOAD_SNIPPET}</CodeBlock>
<div className="hero-cta">
<CodeBlock full={true} wrap={true}>{PURE_DOWNLOAD_SNIPPET}</CodeBlock>
<p>
<Link className="button-cta pure-button" to="/start/">Get Started</Link>
<a className="button-secondary pure-button" href={`https://github.com/${organizationName}/${projectName}/`}>View on GitHub</a>
</p>
</div>
</div>
<div className="marketing">
<div className="size-chart pure-g">
{renderSize}
</div>
<p>
<Link className="button-cta pure-button" to="/start/">Get Started</Link>
<a className="button-secondary pure-button" href={`https://github.com/${organizationName}/${projectName}/`}>View on GitHub</a>
</p>
</div>
</div>
<div className="marketing">
<div className="size-chart pure-g">
{renderSize}
</div>
<div className="content">
<h3 className="marketing-header">CSS with a minimal footprint.</h3>
<div className="content">
<h3 className="marketing-header">CSS with a minimal footprint.</h3>
<p>
<p>
Pure is ridiculously tiny. The entire set of modules clocks in at <b>{fileSize({ module: 'pure', filesizes: moduleSizes })}* minified and gzipped</b>. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.
</p>
</p>
<p style={{fontSize: 'smaller'}}>
<p style={{fontSize: 'smaller'}}>
* We can add correctly :) the numbers above are individual module sizes; when grouped together they compress (gzip) even more.
</p>
</div>
</div>
<div className="marketing l-wrap pure-g">
<div className="content pure-u-1 u-sm-1-2 u-xl-1-3">
<h3 className="marketing-header">Your CSS foundation.</h3>
<p>
</p>
</div>
</div>
<div className="marketing l-wrap pure-g">
<div className="content pure-u-1 u-sm-1-2 u-xl-1-3">
<h3 className="marketing-header">Your CSS foundation.</h3>
<p>
Pure builds on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> and provides layout and styling for native HTML elements, plus the most common UI components. It's what you need, without the cruft.
</p>
</div>
</p>
</div>
<div className="content pure-u-1 u-sm-1-2 u-xl-1-3">
<h3 className="marketing-header">Made with mobile in mind.</h3>
<div className="content pure-u-1 u-sm-1-2 u-xl-1-3">
<h3 className="marketing-header">Made with mobile in mind.</h3>
<p>
<p>
Pure is responsive out of the box, so elements look great on all screen sizes.
</p>
</div>
</p>
</div>
<div className="content pure-u-1 u-lg-3-4 u-xl-1-3">
<h3 className="marketing-header">Stays out of your way.</h3>
<div className="content pure-u-1 u-lg-3-4 u-xl-1-3">
<h3 className="marketing-header">Stays out of your way.</h3>
<p>
<p>
Pure has minimal styles and encourages you to write your application styles on top of it. It's designed to get out of your way and makes it easy to override styles.
</p>
</div>
</div>
<div className="marketing l-wrap pure-g">
<div className="marketing-diagram content pure-u-1 u-sm-2-3 u-md-1-2">
<Link to="/layouts">
<img src={useBaseUrl('img/layout-icon.jpg')} className="pure-img-responsive" alt="Diagram of a sample layout." />
</Link>
</div>
</p>
</div>
</div>
<div className="marketing l-wrap pure-g">
<div className="marketing-diagram content pure-u-1 u-sm-2-3 u-md-1-2">
<Link to="/layouts">
<img src={useBaseUrl('img/layout-icon.jpg')} className="pure-img-responsive" alt="Diagram of a sample layout." />
</Link>
</div>
<div className="content pure-u-1 u-md-1-2">
<h3 className="marketing-header">Create responsive layouts.</h3>
<p>
<div className="content pure-u-1 u-md-1-2">
<h3 className="marketing-header">Create responsive layouts.</h3>
<p>
By using <a href="/grids/">Grids</a>, <a href="/menus/">Menus</a>, and more, it's easy to create beautiful responsive layouts for all screen sizes. We've made it easy for you to get started. Take a look at a few different <a href="/layouts/">layouts</a> and start your next web project with a rock-solid foundation.
</p>
<p>
<Link to="/layouts/" className="pure-button">View Layouts</Link>
</p>
</div>
</div>
<div className="marketing marketing-customize l-wrap pure-g">
<div className="content pure-u-1 u-md-1-2">
<h3 className="marketing-header">Create your own look and feel.</h3>
<p>
</p>
<p>
<Link to="/layouts/" className="pure-button">View Layouts</Link>
</p>
</div>
</div>
<div className="marketing marketing-customize l-wrap pure-g">
<div className="content pure-u-1 u-md-1-2">
<h3 className="marketing-header">Create your own look and feel.</h3>
<p>
Unlike other frameworks, Pure's design is unopinionated, minimal and flat. We believe that it's much easier to add new CSS rules than to overwrite existing rules. By adding a few lines of CSS, you can customize Pure's appearance to work with your web project.
</p>
<p>
<Link to="/extend/" className="pure-button">Extend Pure</Link>
</p>
</div>
<div className="sample-buttons content pure-u-1 u-md-1-2">
<div className="pure-g">
<span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="pure-button">Default</button>
</span>
<span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-a pure-button">Blue</button>
</span>
<span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-b pure-button">Yellow</button>
</span>
<span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-c pure-button">Black</button>
</span>
<span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-d pure-button">Green</button>
</span>
<span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-e pure-button">Red</button>
</span>
<span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-f pure-button">Purple</button>
</span>
<span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-g pure-button">Orange</button>
</span>
<span className="sample-button pure-u-1 u-sm-1-3">
<button className="button-h pure-button">Indigo</button>
</span>
</div>
</div>
</div>
</Layout>
);
</p>
<p>
<Link to="/extend/" className="pure-button">Extend Pure</Link>
</p>
</div>
<div className="sample-buttons content pure-u-1 u-md-1-2">
<div className="pure-g">
<span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="pure-button">Default</button>
</span>
<span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-a pure-button">Blue</button>
</span>
<span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-b pure-button">Yellow</button>
</span>
<span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-c pure-button">Black</button>
</span>
<span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-d pure-button">Green</button>
</span>
<span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-e pure-button">Red</button>
</span>
<span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-f pure-button">Purple</button>
</span>
<span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-g pure-button">Orange</button>
</span>
<span className="sample-button pure-u-1 u-sm-1-3">
<button className="button-h pure-button">Indigo</button>
</span>
</div>
</div>
</div>
</Layout>
);
}
export default Home;

69
site/src/pages/layouts/index.js
View File

@ -1,63 +1,62 @@
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import classnames from 'classnames';
import React from 'react';
import Layout from '@theme/Layout';
import Header from '../../../components/Header';
import SectionHeader from '../../../components/SectionHeader';
import styles from './styles.css';
import './styles.css';
const title = 'Layouts';
const description = 'Quickstart your next web project with these example layouts.';
const layouts = [
{
type: "blog",
title: "Blog",
summary: "A layout example that shows off a blog page with a list of posts.",
modules: ["base", "grids", "buttons", "menus"]
type: 'blog',
title: 'Blog',
summary: 'A layout example that shows off a blog page with a list of posts.',
modules: ['base', 'grids', 'buttons', 'menus']
},
{
type: "email",
title: "Email",
summary: "A layout example that shows off a responsive email layout.",
modules: ["base", "grids", "buttons", "menus"]
type: 'email',
title: 'Email',
summary: 'A layout example that shows off a responsive email layout.',
modules: ['base', 'grids', 'buttons', 'menus']
},
{
type: "gallery",
title: "Photo Gallery",
summary: "A layout example that shows off a responsive photo gallery.",
modules: ["base", "grids", "forms", "buttons", "menus"]
type: 'gallery',
title: 'Photo Gallery',
summary: 'A layout example that shows off a responsive photo gallery.',
modules: ['base', 'grids', 'forms', 'buttons', 'menus']
},
{
type: "marketing",
title: "Landing Page",
summary: "A layout example that shows off a responsive product landing page.",
modules: ["base", "grids", "forms", "buttons", "menus"]
type: 'marketing',
title: 'Landing Page',
summary: 'A layout example that shows off a responsive product landing page.',
modules: ['base', 'grids', 'forms', 'buttons', 'menus']
},
{
type: "pricing",
title: "Pricing Table",
summary: "A layout example that shows off a responsive pricing table.",
modules: ["base", "grids", "buttons", "menus"]
type: 'pricing',
title: 'Pricing Table',
summary: 'A layout example that shows off a responsive pricing table.',
modules: ['base', 'grids', 'buttons', 'menus']
},
{
type: "side-menu",
title: "Responsive Side Menu",
summary: "A layout example with a side menu that hides on mobile, just like the Pure website.",
modules: ["base", "grids", "menus"]
type: 'side-menu',
title: 'Responsive Side Menu',
summary: 'A layout example with a side menu that hides on mobile, just like the Pure website.',
modules: ['base', 'grids', 'menus']
},
{
type: "tucked-menu-vertical",
title: "Responsive Horizontal-to-Vertical Menu",
summary: "A set of horizontal menus that switch to vertical and which hide at small window widths.",
modules: ["base", "grids", "menus"]
type: 'tucked-menu-vertical',
title: 'Responsive Horizontal-to-Vertical Menu',
summary: 'A set of horizontal menus that switch to vertical and which hide at small window widths.',
modules: ['base', 'grids', 'menus']
},
{
type: "tucked-menu",
title: "Responsive Horizontal-to-Scrollable Menu",
summary: "Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.",
modules: ["base", "menus"]
type: 'tucked-menu',
title: 'Responsive Horizontal-to-Scrollable Menu',
summary: 'Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.',
modules: ['base', 'menus']
}
];
@ -66,7 +65,7 @@ const renderLayouts = (layout, idx) => (
<div className="layout-item-screenshot content pure-u-1 u-sm-1-2">
<a href={`/layouts/${layout.type}/`}>
<img src={useBaseUrl(`img/layouts/${layout.type}@2x.jpg`)} className="pure-img-responsive" width="400" height="214"
alt={`Screenshot of ${layout.title} example layout`} />
alt={`Screenshot of ${layout.title} example layout`} />
</a>
</div>
<div className="layout-item-content content pure-u-1 u-sm-1-2">

250
site/src/pages/start/index.js
View File

@ -1,13 +1,11 @@
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import classnames from 'classnames';
import React from 'react';
import Layout from '../../theme/Layout';
import Header from '../../../components/Header';
import SectionHeader from '../../../components/SectionHeader';
import CodeBlock from '../../../components/CodeBlock';
import styles from './styles.css';
import { stripIndent } from 'common-tags';
import './styles.css';
const title = 'Get Started';
const description = 'Start your next web project with Pure.';
@ -23,159 +21,161 @@ function Start() {
} = siteConfig;
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
<Header description={description} title={title} />
<div className="content">
<SectionHeader heading="Add Pure to Your Page" />
<div className="content">
<SectionHeader heading="Add Pure to Your Page" />
<p>
<p>
You can add Pure to your page via the <b>free unpkg CDN</b>. Just add the following <code>&lt;link&gt;</code> element into your page's <code>&lt;head&gt;</code>, before your project's stylesheets.
</p>
</div>
</p>
</div>
<CodeBlock full={true} wrap={true}>{PURE_DOWNLOAD_SNIPPET}</CodeBlock>
<CodeBlock full={true} wrap={true}>{PURE_DOWNLOAD_SNIPPET}</CodeBlock>
<div className="content">
<aside>
<p>
<div className="content">
<aside>
<p>
Alternatively, you can <a href={`https://github.com/pure-css/pure/archive/v${pureVersion}.zip`}>download Pure</a>, or <a href="/customize/">check out other CDNs</a> that host Pure.
</p>
</aside>
</p>
</aside>
<SectionHeader heading="Add the Viewport Meta Element" />
<SectionHeader heading="Add the Viewport Meta Element" />
<p>
<p>
The viewport <code>meta</code> element lets you control the the width and scale of the viewport on mobile browsers. Since you're building a responsive website, you want the width to be equal to the device's native width. Add this into your page's <code>&lt;head&gt;</code>.
</p>
</div>
</p>
</div>
<CodeBlock full={true} wrap={true}>
{`<meta name="viewport" content="width=device-width, initial-scale=1">`}
</CodeBlock>
<CodeBlock full={true} wrap={true}>
{'<meta name="viewport" content="width=device-width, initial-scale=1">'}
</CodeBlock>
<div className="content">
<SectionHeader heading="Understand Pure Grids" />
<div className="content">
<SectionHeader heading="Understand Pure Grids" />
<p>
<p>
Pure's grid system is very simple. You create a row by using the <code>.pure-g</code> class, and create columns within that row by using the <code>pure-u-*</code> classes.
</p>
</p>
<p>
<p>
Here's a grid with three columns:
</p>
</p>
<CodeBlock wrap={true}>
{`<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>`}
</CodeBlock>
</div>
<CodeBlock wrap={true}>
{stripIndent`
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>
`}
</CodeBlock>
</div>
<div className="grids-example">
<div className="pure-g">
<div className="pure-u-1-3">
<p>Thirds</p>
</div>
<div className="pure-u-1-3">
<p>Thirds</p>
</div>
<div className="pure-u-1-3">
<p>Thirds</p>
</div>
</div>
</div>
<div className="grids-example">
<div className="pure-g">
<div className="pure-u-1-3">
<p>Thirds</p>
</div>
<div className="pure-u-1-3">
<p>Thirds</p>
</div>
<div className="pure-u-1-3">
<p>Thirds</p>
</div>
</div>
</div>
<div className="content">
<SectionHeader heading="Responsive Grids" />
<div className="content">
<SectionHeader heading="Responsive Grids" />
<p>
<p>
Pure's grid system is also <b>mobile-first</b> and <b>responsive</b>, and you're able to customize the grid by specifying CSS Media Query breakpoints and grid classnames.
{/*If needed, you can <a href="#build-your-pure-starter-kit">customize Pure Grids below</a>, but let's start off with an example.*/}
</p>
{/*If needed, you can <a href="#build-your-pure-starter-kit">customize Pure Grids below</a>, but let's start off with an example.*/}
</p>
<p>
<p>
You'll need to <em>also</em> include Pure's <code>grids-responsive.css</code> onto your page:
</p>
</p>
<CodeBlock wrap={true}>
{`<link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/grids-responsive-min.css">`}
</CodeBlock>
<CodeBlock wrap={true}>
{`<link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/grids-responsive-min.css">`}
</CodeBlock>
<p>
<p>
Here's the default responsive breakpoints included in <code>grids-responsive.css</code>:
</p>
</p>
<div className="table-responsive">
<table className="mq-table pure-table-bordered pure-table">
<thead>
<tr>
<th className="highlight">Key</th>
<th className="highlight">CSS Media Query</th>
<th>Applies</th>
<th>Classname</th>
</tr>
</thead>
<tbody>
<tr>
<td className="highlight"><i>None</i></td>
<td className="highlight"><i>None</i></td>
<td><i>Always</i></td>
<td><code>.pure-u-*</code></td>
</tr>
<tr>
<td className="highlight"><b><code>sm</code></b></td>
<td className="mq-table-mq highlight"><code>@media screen and (min-width: 35.5em)</code></td>
<td>≥ <b>568px</b></td>
<td><code>.pure-u-<b>sm</b>-*</code></td>
</tr>
<tr>
<td className="highlight"><b><code>md</code></b></td>
<td className="mq-table-mq highlight"><code>@media screen and (min-width: 48em)</code></td>
<td>≥ <b>768px</b></td>
<td><code>.pure-u-<b>md</b>-*</code></td>
</tr>
<tr>
<td className="highlight"><b><code>lg</code></b></td>
<td className="mq-table-mq highlight"><code>@media screen and (min-width: 64em)</code></td>
<td>≥ <b>1024px</b></td>
<td><code>.pure-u-<b>lg</b>-*</code></td>
</tr>
<tr>
<td className="highlight"><b><code>xl</code></b></td>
<td className="mq-table-mq highlight"><code>@media screen and (min-width: 80em)</code></td>
<td>≥ <b>1280px</b></td>
<td><code>.pure-u-<b>xl</b>-*</code></td>
</tr>
</tbody>
</table>
</div>
<div className="table-responsive">
<table className="mq-table pure-table-bordered pure-table">
<thead>
<tr>
<th className="highlight">Key</th>
<th className="highlight">CSS Media Query</th>
<th>Applies</th>
<th>Classname</th>
</tr>
</thead>
<tbody>
<tr>
<td className="highlight"><i>None</i></td>
<td className="highlight"><i>None</i></td>
<td><i>Always</i></td>
<td><code>.pure-u-*</code></td>
</tr>
<tr>
<td className="highlight"><b><code>sm</code></b></td>
<td className="mq-table-mq highlight"><code>@media screen and (min-width: 35.5em)</code></td>
<td>≥ <b>568px</b></td>
<td><code>.pure-u-<b>sm</b>-*</code></td>
</tr>
<tr>
<td className="highlight"><b><code>md</code></b></td>
<td className="mq-table-mq highlight"><code>@media screen and (min-width: 48em)</code></td>
<td>≥ <b>768px</b></td>
<td><code>.pure-u-<b>md</b>-*</code></td>
</tr>
<tr>
<td className="highlight"><b><code>lg</code></b></td>
<td className="mq-table-mq highlight"><code>@media screen and (min-width: 64em)</code></td>
<td>≥ <b>1024px</b></td>
<td><code>.pure-u-<b>lg</b>-*</code></td>
</tr>
<tr>
<td className="highlight"><b><code>xl</code></b></td>
<td className="mq-table-mq highlight"><code>@media screen and (min-width: 80em)</code></td>
<td>≥ <b>1280px</b></td>
<td><code>.pure-u-<b>xl</b>-*</code></td>
</tr>
</tbody>
</table>
</div>
<p>
<p>
Here's an example of what you'd be able to do. <i>Try resizing your screen to see how the grid responds.</i>
</p>
</div>
<div className="grids-example">
<div className="pure-g">
<div className="pure-u-1">.pure-u-1</div>
<div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
</p>
</div>
<div className="grids-example">
<div className="pure-g">
<div className="pure-u-1">.pure-u-1</div>
<div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
.pure-u-1<br/>.pure-u-md-1-2<br/>.pure-u-lg-1-4
</div>
<div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
</div>
<div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
.pure-u-1<br/>.pure-u-md-1-2<br/>.pure-u-lg-1-4
</div>
<div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
</div>
<div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
.pure-u-1<br/>.pure-u-md-1-2<br/>.pure-u-lg-1-4
</div>
<div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
</div>
<div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
.pure-u-1<br/>.pure-u-md-1-2<br/>.pure-u-lg-1-4
</div>
<div className="pure-u-1 pure-u-md-3-4">.pure-u-1<br/>.pure-u-md-3-4</div>
<div className="pure-u-1 pure-u-md-1-4">.pure-u-1<br/>.pure-u-md-1-4</div>
</div>
</div>
{/*
</div>
<div className="pure-u-1 pure-u-md-3-4">.pure-u-1<br/>.pure-u-md-3-4</div>
<div className="pure-u-1 pure-u-md-1-4">.pure-u-1<br/>.pure-u-md-1-4</div>
</div>
</div>
{/*
<div className="content">
<aside>
<p>

361
site/src/pages/tables/index.js
View File

@ -1,4 +1,3 @@
import Link from '@docusaurus/Link';
import React from 'react';
import Layout from '../../theme/Layout';
import Header from '../../../components/Header';
@ -9,203 +8,203 @@ const title = 'Tables';
const description = 'Simple CSS for HTML tables.';
function Tables() {
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
<div className="content">
<SectionHeader heading="Default Table" />
<div className="content">
<SectionHeader heading="Default Table" />
<p>
<p>
To style an HTML table, add the <code>pure-table</code> classname. This class adds padding and borders to table elements, and emphasizes the header.
</p>
</p>
<Example>
<table className="pure-table">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
</Example>
<Example>
<table className="pure-table">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
</Example>
<SectionHeader heading="Bordered Table" />
<SectionHeader heading="Bordered Table" />
<p>
<p>
To add horizontal and vertical borders to all cells, add the <code>pure-table-bordered</code> classname to the <code>&lt;table&gt;</code> element.
</p>
</p>
<Example>
<table className="pure-table pure-table-bordered">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
</Example>
<Example>
<table className="pure-table pure-table-bordered">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
</Example>
<SectionHeader heading="Table with Horizontal Borders" />
<SectionHeader heading="Table with Horizontal Borders" />
<p>
<p>
If you prefer horizontal lines only, add the <code>pure-table-horizontal</code> classname to the <code>&lt;table&gt;</code> element.
</p>
</p>
<Example>
<table className="pure-table pure-table-horizontal">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
</Example>
<Example>
<table className="pure-table pure-table-horizontal">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
</Example>
<SectionHeader heading="Striped Table" />
<SectionHeader heading="Striped Table" />
<p>
<p>
Large tables are easier to parse visually if rows are easily distinguishable. Adding the <code>pure-table-odd</code> class name to every other <code>&lt;tr&gt;</code> element changes the background of the row and creates a zebra-styled effect.
</p>
</p>
<p>
<b>Note:</b> In browsers which support the CSS3 <a href="http://caniuse.com/#search=nth-child"><code>nth-child</code> pseudo selector</a> a simpler approach can be used. The <code>pure-table-striped</code> classname can be added to the <code>&lt;table&gt;</code> element and the zebra-styled striping will happen automatically.
</p>
<p>
<b>Note:</b> In browsers which support the CSS3 <a href="http://caniuse.com/#search=nth-child"><code>nth-child</code> pseudo selector</a> a simpler approach can be used. The <code>pure-table-striped</code> classname can be added to the <code>&lt;table&gt;</code> element and the zebra-styled striping will happen automatically.
</p>
<Example>
<table className="pure-table">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr className="pure-table-odd">
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr className="pure-table-odd">
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
<tr>
<td>4</td>
<td>Ford</td>
<td>Focus</td>
<td>2008</td>
</tr>
<tr className="pure-table-odd">
<td>5</td>
<td>Nissan</td>
<td>Sentra</td>
<td>2011</td>
</tr>
<tr>
<td>6</td>
<td>BMW</td>
<td>M3</td>
<td>2009</td>
</tr>
<tr className="pure-table-odd">
<td>7</td>
<td>Honda</td>
<td>Civic</td>
<td>2010</td>
</tr>
<tr>
<td>8</td>
<td>Kia</td>
<td>Soul</td>
<td>2010</td>
</tr>
</tbody>
</table>
</Example>
</div>
</Layout>
);
<Example>
<table className="pure-table">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr className="pure-table-odd">
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr className="pure-table-odd">
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
<tr>
<td>4</td>
<td>Ford</td>
<td>Focus</td>
<td>2008</td>
</tr>
<tr className="pure-table-odd">
<td>5</td>
<td>Nissan</td>
<td>Sentra</td>
<td>2011</td>
</tr>
<tr>
<td>6</td>
<td>BMW</td>
<td>M3</td>
<td>2009</td>
</tr>
<tr className="pure-table-odd">
<td>7</td>
<td>Honda</td>
<td>Civic</td>
<td>2010</td>
</tr>
<tr>
<td>8</td>
<td>Kia</td>
<td>Soul</td>
<td>2010</td>
</tr>
</tbody>
</table>
</Example>
</div>
</Layout>
);
}
export default Tables;

368
site/src/pages/tools/index.js
View File

@ -1,214 +1,222 @@
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';
import { stripIndent } from 'common-tags';
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} />
return (
<Layout description={description} title={title}>
<Header description={description} title={title} />
<div className="content">
<SectionHeader heading="Installing Pure with npm" />
<div className="content">
<SectionHeader heading="Installing Pure with npm" />
<p>
<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>
</p>
<CodeBlock>$ npm install purecss --save</CodeBlock>
<CodeBlock>$ npm install purecss --save</CodeBlock>
<p>
<code>require(&#x27;purecss&#x27;)</code> will load an object with the following methods:
</p>
<p>
<code>require(&#x27;purecss&#x27;)</code> will load an object with the following methods:
</p>
<ul>
<li><code>getFile(name)</code></li>
<ul>
<li><code>getFile(name)</code></li>
&ndash; Retrieve contents of a Pure module file.
<li><code>getFilePath(name)</code></li>
<li><code>getFilePath(name)</code></li>
&ndash; Return full path to a Pure file.
</ul>
</ul>
<SectionHeader heading="Installing Pure with Composer" />
<SectionHeader heading="Installing Pure with Composer" />
<p>
<p>
You can also install Pure with <a href="https://getcomposer.org/">Composer</a>.
</p>
</p>
<CodeBlock>$ composer require pure-css/purecss</CodeBlock>
<CodeBlock>$ composer require pure-css/purecss</CodeBlock>
<SectionHeader heading="Extending Pure with Grunt" />
<SectionHeader heading="Extending Pure with Grunt" />
<p>
<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>
</p>
<aside>
<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>
</p>
</aside>
<SectionHeader heading="Extending Pure with Rework" />
<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(&#x27;grunt-pure-grids&#x27;);</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 &mdash; 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(&#x27;grunt-css-selectors&#x27;);</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 &mdash; 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.
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>
</aside>
</div>
</Layout>
);
<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(&#x27;grunt-pure-grids&#x27;);</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>
{stripIndent`
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 &mdash; 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>
{stripIndent`
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(&#x27;grunt-css-selectors&#x27;);</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>
{stripIndent`
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 &mdash; 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>
{stripIndent`
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;

142
site/src/theme/Layout.js
View File

@ -16,85 +16,83 @@ import '../../static/css/main.css';
let jsLoaded = false;
function Layout(props) {
const {siteConfig = {}} = useDocusaurusContext();
const {
favicon,
title: siteTitle,
themeConfig: {image: defaultImage},
url: siteUrl,
} = siteConfig;
const {
children,
title,
noFooter,
description,
image,
keywords,
pageType,
permalink,
version,
} = props;
const metaTitle = title ? `${title} - ${siteTitle}` : siteTitle;
const {siteConfig = {}} = useDocusaurusContext();
const {
favicon,
title: siteTitle,
themeConfig: {image: defaultImage},
url: siteUrl,
} = siteConfig;
const {
children,
title,
description,
image,
keywords,
permalink,
version,
} = props;
const metaTitle = title ? `${title} - ${siteTitle}` : siteTitle;
const metaImage = image || defaultImage;
let metaImageUrl = siteUrl + useBaseUrl(metaImage);
if (!isInternalUrl(metaImage)) {
metaImageUrl = metaImage;
}
const metaImage = image || defaultImage;
let metaImageUrl = siteUrl + useBaseUrl(metaImage);
if (!isInternalUrl(metaImage)) {
metaImageUrl = metaImage;
}
const faviconUrl = useBaseUrl(favicon);
const faviconUrl = useBaseUrl(favicon);
// load external menu js dynamically
useEffect(() => {
if (!jsLoaded) {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/js/ui.js';
document.head.appendChild(script);
jsLoaded = true;
}
});
// load external menu js dynamically
useEffect(() => {
if (!jsLoaded) {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/js/ui.js';
document.head.appendChild(script);
jsLoaded = true;
}
});
return (
<>
<Head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
return (
<>
<Head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{metaTitle && <title>{metaTitle}</title>}
{metaTitle && <meta property="og:title" content={metaTitle} />}
{favicon && <link rel="shortcut icon" href={faviconUrl} />}
{description && <meta name="description" content={description} />}
{description && (
<meta property="og:description" content={description} />
)}
{version && <meta name="docsearch:version" content={version} />}
{keywords && keywords.length && (
<meta name="keywords" content={keywords.join(',')} />
)}
{metaImage && <meta property="og:image" content={metaImageUrl} />}
{metaImage && (
<meta property="twitter:image" content={metaImageUrl} />
)}
{metaImage && (
<meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
)}
{permalink && (
<meta property="og:url" content={siteUrl + permalink} />
)}
<meta name="twitter:card" content="summary_large_image" />
{metaTitle && <title>{metaTitle}</title>}
{metaTitle && <meta property="og:title" content={metaTitle} />}
{favicon && <link rel="shortcut icon" href={faviconUrl} />}
{description && <meta name="description" content={description} />}
{description && (
<meta property="og:description" content={description} />
)}
{version && <meta name="docsearch:version" content={version} />}
{keywords && keywords.length && (
<meta name="keywords" content={keywords.join(',')} />
)}
{metaImage && <meta property="og:image" content={metaImageUrl} />}
{metaImage && (
<meta property="twitter:image" content={metaImageUrl} />
)}
{metaImage && (
<meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
)}
{permalink && (
<meta property="og:url" content={siteUrl + permalink} />
)}
<meta name="twitter:card" content="summary_large_image" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200" />
</Head>
<div id="layout">
<Menu />
<div id="main" className={(title || 'home').toLowerCase()}>
{children}
<Footer siteConfig={siteConfig} />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200" />
</Head>
<div id="layout">
<Menu />
<div id="main" className={(title || 'home').toLowerCase()}>
{children}
<Footer siteConfig={siteConfig} />
</div>
</div>
</div>
</>
);
</>
);
}
export default Layout;

254
site/static/js/menus.js
View File

@ -1,3 +1,4 @@
/* eslint no-unused-vars:0 no-prototype-builtins:0 */
(function (window, document) {
'use strict';
@ -13,150 +14,149 @@
ARIA_HIDDEN = 'aria-hidden',
MENU_OPEN = 0,
MENU_CLOSED = 1,
MENU_PARENT_CLASS_NAME = 'pure-menu-has-children',
MENU_ACTIVE_SELECTOR = '.pure-menu-active',
MENU_LINK_SELECTOR = '.pure-menu-link',
MENU_SELECTOR = '.pure-menu-children',
DISMISS_EVENT = (window.hasOwnProperty &&
window.hasOwnProperty('ontouchstart')) ?
'touchstart' : 'mousedown',
'touchstart' : 'mousedown',
ARROW_KEYS_ENABLED = true,
ddm = this; // drop down menu
this._state = MENU_CLOSED;
this._state = MENU_CLOSED;
this.show = function () {
if (this._state !== MENU_OPEN) {
this._dropdownParent.classList.add(ACTIVE_CLASS_NAME);
this._menu.setAttribute(ARIA_HIDDEN, false);
this._state = MENU_OPEN;
this.show = function () {
if (this._state !== MENU_OPEN) {
this._dropdownParent.classList.add(ACTIVE_CLASS_NAME);
this._menu.setAttribute(ARIA_HIDDEN, false);
this._state = MENU_OPEN;
}
};
this.hide = function () {
if (this._state !== MENU_CLOSED) {
this._dropdownParent.classList.remove(ACTIVE_CLASS_NAME);
this._menu.setAttribute(ARIA_HIDDEN, true);
this._link.focus();
this._state = MENU_CLOSED;
}
};
this.toggle = function () {
this[this._state === MENU_CLOSED ? 'show' : 'hide']();
};
this.halt = function (e) {
e.stopPropagation();
e.preventDefault();
};
this._dropdownParent = dropdownParent;
this._link = this._dropdownParent.querySelector(MENU_LINK_SELECTOR);
this._menu = this._dropdownParent.querySelector(MENU_SELECTOR);
this._firstMenuLink = this._menu.querySelector(MENU_LINK_SELECTOR);
// Set ARIA attributes
this._link.setAttribute('aria-haspopup', 'true');
this._menu.setAttribute(ARIA_ROLE, 'menu');
this._menu.setAttribute('aria-labelledby', this._link.getAttribute('id'));
this._menu.setAttribute('aria-hidden', 'true');
[].forEach.call(
this._menu.querySelectorAll('li'),
function(el){
el.setAttribute(ARIA_ROLE, 'presentation');
}
);
[].forEach.call(
this._menu.querySelectorAll('a'),
function(el){
el.setAttribute(ARIA_ROLE, 'menuitem');
}
);
// Toggle on click
this._link.addEventListener('click', function (e) {
e.stopPropagation();
e.preventDefault();
ddm.toggle();
});
// Keyboard navigation
document.addEventListener('keydown', function (e) {
var currentLink,
previousSibling,
nextSibling,
previousLink,
nextLink;
// if the menu isn't active, ignore
if (ddm._state !== MENU_OPEN) {
return;
}
// if the menu is the parent of an open, active submenu, ignore
if (ddm._menu.querySelector(MENU_ACTIVE_SELECTOR)) {
return;
}
currentLink = ddm._menu.querySelector(':focus');
// Dismiss an open menu on ESC
if (e.keyCode === 27) {
/* Esc */
ddm.halt(e);
ddm.hide();
}
// Go to the next link on down arrow
else if (ARROW_KEYS_ENABLED && e.keyCode === 40) {
/* Down arrow */
ddm.halt(e);
// get the nextSibling (an LI) of the current link's LI
nextSibling = (currentLink) ? currentLink.parentNode.nextSibling : null;
// if the nextSibling is a text node (not an element), go to the next one
while (nextSibling && nextSibling.nodeType !== 1) {
nextSibling = nextSibling.nextSibling;
}
};
this.hide = function () {
if (this._state !== MENU_CLOSED) {
this._dropdownParent.classList.remove(ACTIVE_CLASS_NAME);
this._menu.setAttribute(ARIA_HIDDEN, true);
this._link.focus();
this._state = MENU_CLOSED;
nextLink = (nextSibling) ? nextSibling.querySelector('.pure-menu-link') : null;
// if there is no currently focused link, focus the first one
if (!currentLink) {
ddm._menu.querySelector('.pure-menu-link').focus();
}
};
this.toggle = function () {
this[this._state === MENU_CLOSED ? 'show' : 'hide']();
};
this.halt = function (e) {
e.stopPropagation();
e.preventDefault();
};
this._dropdownParent = dropdownParent;
this._link = this._dropdownParent.querySelector(MENU_LINK_SELECTOR);
this._menu = this._dropdownParent.querySelector(MENU_SELECTOR);
this._firstMenuLink = this._menu.querySelector(MENU_LINK_SELECTOR);
// Set ARIA attributes
this._link.setAttribute('aria-haspopup', 'true');
this._menu.setAttribute(ARIA_ROLE, 'menu');
this._menu.setAttribute('aria-labelledby', this._link.getAttribute('id'));
this._menu.setAttribute('aria-hidden', 'true');
[].forEach.call(
this._menu.querySelectorAll('li'),
function(el){
el.setAttribute(ARIA_ROLE, 'presentation');
else if (nextLink) {
nextLink.focus();
}
);
[].forEach.call(
this._menu.querySelectorAll('a'),
function(el){
el.setAttribute(ARIA_ROLE, 'menuitem');
}
// Go to the previous link on up arrow
else if (ARROW_KEYS_ENABLED && e.keyCode === 38) {
/* Up arrow */
ddm.halt(e);
// get the currently focused link
previousSibling = (currentLink) ? currentLink.parentNode.previousSibling : null;
while (previousSibling && previousSibling.nodeType !== 1) {
previousSibling = previousSibling.previousSibling;
}
);
// Toggle on click
this._link.addEventListener('click', function (e) {
e.stopPropagation();
e.preventDefault();
ddm.toggle();
});
// Keyboard navigation
document.addEventListener('keydown', function (e) {
var currentLink,
previousSibling,
nextSibling,
previousLink,
nextLink;
// if the menu isn't active, ignore
if (ddm._state !== MENU_OPEN) {
return;
previousLink = (previousSibling) ? previousSibling.querySelector('.pure-menu-link') : null;
// if there is no currently focused link, focus the last link
if (!currentLink) {
ddm._menu.querySelector('.pure-menu-item:last-child .pure-menu-link').focus();
}
// else if there is a previous item, go to the previous item
else if (previousLink) {
previousLink.focus();
}
}
});
// if the menu is the parent of an open, active submenu, ignore
if (ddm._menu.querySelector(MENU_ACTIVE_SELECTOR)) {
return;
}
currentLink = ddm._menu.querySelector(':focus');
// Dismiss an open menu on ESC
if (e.keyCode === 27) {
/* Esc */
ddm.halt(e);
ddm.hide();
}
// Go to the next link on down arrow
else if (ARROW_KEYS_ENABLED && e.keyCode === 40) {
/* Down arrow */
ddm.halt(e);
// get the nextSibling (an LI) of the current link's LI
nextSibling = (currentLink) ? currentLink.parentNode.nextSibling : null;
// if the nextSibling is a text node (not an element), go to the next one
while (nextSibling && nextSibling.nodeType !== 1) {
nextSibling = nextSibling.nextSibling;
}
nextLink = (nextSibling) ? nextSibling.querySelector('.pure-menu-link') : null;
// if there is no currently focused link, focus the first one
if (!currentLink) {
ddm._menu.querySelector('.pure-menu-link').focus();
}
else if (nextLink) {
nextLink.focus();
}
}
// Go to the previous link on up arrow
else if (ARROW_KEYS_ENABLED && e.keyCode === 38) {
/* Up arrow */
ddm.halt(e);
// get the currently focused link
previousSibling = (currentLink) ? currentLink.parentNode.previousSibling : null;
while (previousSibling && previousSibling.nodeType !== 1) {
previousSibling = previousSibling.previousSibling;
}
previousLink = (previousSibling) ? previousSibling.querySelector('.pure-menu-link') : null;
// if there is no currently focused link, focus the last link
if (!currentLink) {
ddm._menu.querySelector('.pure-menu-item:last-child .pure-menu-link').focus();
}
// else if there is a previous item, go to the previous item
else if (previousLink) {
previousLink.focus();
}
}
});
// Dismiss an open menu on outside event
document.addEventListener(DISMISS_EVENT, function (e) {
var target = e.target;
if (target !== ddm._link && !ddm._menu.contains(target)) {
ddm.hide();
ddm._link.blur();
}
});
// Dismiss an open menu on outside event
document.addEventListener(DISMISS_EVENT, function (e) {
var target = e.target;
if (target !== ddm._link && !ddm._menu.contains(target)) {
ddm.hide();
ddm._link.blur();
}
});
}

11
site/static/js/ui.js
View File

@ -2,8 +2,7 @@
var layout = document.getElementById('layout'),
menu = document.getElementById('menu'),
menuLink = document.getElementById('menuLink'),
content = document.getElementById('main');
menuLink = document.getElementById('menuLink');
function toggleClass(element, className) {
var classes = element.className.split(/\s+/),
@ -11,10 +10,10 @@
i = 0;
for (; i < length; i++) {
if (classes[i] === className) {
classes.splice(i, 1);
break;
}
if (classes[i] === className) {
classes.splice(i, 1);
break;
}
}
// The className is not found
if (length === classes.length) {

4
test/index.js
View File

@ -6,6 +6,6 @@ tap.ok(pure.getFile);
tap.ok(pure.getFilePath);
// assertions
tap.match(pure.getFile('pure-min.css'), /pure\-button/, 'should load the file');
tap.match(pure.getFilePath('pure-min.css'), /pure\-min\.css/, 'should return file path');
tap.match(pure.getFile('pure-min.css'), /pure-button/, 'should load the file');
tap.match(pure.getFilePath('pure-min.css'), /pure-min\.css/, 'should return file path');
tap.throws(pure.getFile, new Error('undefined does not exist'));