library-mirrors/pure
1
0
Fork 0
mirror of https://github.com/pure-css/pure.git synced 2024-11-07 21:34:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add eslint (#801)

Browse Source
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 .DS_Store
.nyc_output/
artifacts/ artifacts/
build/ build/
coverage/ 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 language: node_js
node_js: node_js:
- 12 - 12
branches:
only:
- master
script: script:
- git config --global user.name "${GH_NAME}" - npm t
- git config --global user.email "${GH_EMAIL}" deploy:
- echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc provider: script
- cd site && npm install && GIT_USER="${GH_NAME}" npm run deploy script: scripts/deploy.sh
on:
branch: master

506
Gruntfile.js
View File

@ -1,280 +1,280 @@
module.exports = function (grunt) { module.exports = function (grunt) {
// -- Config ------------------------------------------------------------------- // -- Config -------------------------------------------------------------------
grunt.initConfig({ grunt.initConfig({
nick : 'pure', nick : 'pure',
pkg : grunt.file.readJSON('package.json'), pkg : grunt.file.readJSON('package.json'),
// -- Clean Config --------------------------------------------------------- // -- Clean Config ---------------------------------------------------------
clean: { clean: {
build : ['build/'], build : ['build/'],
build_res: ['build/*-r.css'], build_res: ['build/*-r.css'],
release : ['release/<%= pkg.version %>/'] release : ['release/<%= pkg.version %>/']
},
// -- Copy Config ----------------------------------------------------------
copy: {
build: {
src : 'src/**/css/*.css',
dest : 'build/',
expand : true,
flatten: true
}, },
release: { // -- Copy Config ----------------------------------------------------------
src : '{LICENSE.md,README.md,HISTORY.md}',
dest: 'build/'
}
},
// -- Concat Config -------------------------------------------------------- copy: {
build: {
concat: { src : 'src/**/css/*.css',
build: { dest : 'build/',
files: [ expand : true,
{'build/base.css': [ flatten: true
'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'
}, },
expand : true, release: {
flatten: true, src : '{LICENSE.md,README.md,HISTORY.md}',
src : 'build/*', dest: '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: { // -- Concat Config --------------------------------------------------------
dest: 'build/grids-responsive.css',
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: { options: {
mediaQueries: { processors: [
sm: 'screen and (min-width: 35.5em)', // 568px require('autoprefixer')()
md: 'screen and (min-width: 48em)', // 768px ]
lg: 'screen and (min-width: 64em)', // 1024px },
xl: 'screen and (min-width: 80em)' // 1280px 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: { // npm tasks.
base: { grunt.loadNpmTasks('grunt-contrib-clean');
src : 'build/base.css', grunt.loadNpmTasks('grunt-contrib-copy');
dest: 'build/base-context.css', 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: { // Local tasks.
mutations: [{prefix: '.pure'}] 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: { // Makes the `watch` task run a build first.
src: { grunt.renameTask('watch', 'observe');
files: 'src/**/css/*.css', grunt.registerTask('watch', ['default', 'observe']);
tasks: ['test', 'suppress', 'build'],
options: { grunt.registerTask('release', [
interrupt: true 'default',
} 'clean:release',
} 'copy:release',
} 'compress:release'
}); ]);
// -- 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'
]);
}; };

12
package.json
View File

@ -6,7 +6,9 @@
"url": "git://github.com/pure-css/pure.git" "url": "git://github.com/pure-css/pure.git"
}, },
"scripts": { "scripts": {
"lint": "eslint . --ext .js",
"prepare": "grunt release", "prepare": "grunt release",
"pretest": "npm run lint",
"site:build": "npm run pretest && cd site && npm install && npm run build", "site:build": "npm run pretest && cd site && npm install && npm run build",
"site:start": "cd site && npm run start", "site:start": "cd site && npm run start",
"test": "grunt test && tap test/*.js" "test": "grunt test && tap test/*.js"
@ -14,6 +16,8 @@
"files": "build/", "files": "build/",
"devDependencies": { "devDependencies": {
"autoprefixer": "^9.6.1", "autoprefixer": "^9.6.1",
"eslint": "^7.0.0",
"eslint-plugin-react": "^7.20.0",
"grunt": "^1.0.1", "grunt": "^1.0.1",
"grunt-cli": "^1.2.0", "grunt-cli": "^1.2.0",
"grunt-contrib-clean": "^2.0.0", "grunt-contrib-clean": "^2.0.0",
@ -26,6 +30,7 @@
"grunt-css-selectors": "^1.1.0", "grunt-css-selectors": "^1.1.0",
"grunt-postcss": "^0.9.0", "grunt-postcss": "^0.9.0",
"grunt-pure-grids": "^2.0.0", "grunt-pure-grids": "^2.0.0",
"husky": "^4.2.5",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"tap": "^14.4.1" "tap": "^14.4.1"
}, },
@ -55,5 +60,10 @@
"ie >= 10", "ie >= 10",
"iOS >= 12", "iOS >= 12",
"Android >= 6" "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 React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
function Footer({ siteConfig }) { function Footer({ siteConfig }) {
const { customFields, organizationName, projectName } = siteConfig; const { customFields, organizationName, projectName } = siteConfig;

4
site/components/Menu.js
View File

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

8
site/components/SectionHeader.js
View File

@ -1,11 +1,11 @@
import React from 'react'; 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`. // Remove HTML entities, and all chars except whitespace, word chars, and from the `heading`.
const id = heading.toLowerCase() const id = heading.toLowerCase()
.replace(/&[^\s;]+;?/g, '') .replace(/&[^\s;]+;?/g, '')
.replace(/[^\s\w\-]+/g, '') .replace(/[^\s\w-]+/g, '')
.replace(/\s+/g, '-'); .replace(/\s+/g, '-');
return ( return (
<TagName id={id} className="content-subhead"> <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'); const { version } = require('../package.json');
module.exports = { module.exports = {
title: 'Pure', title: 'Pure',
tagline: 'Pure is a ridiculously tiny CSS library you can use to start any web project.', tagline: 'Pure is a ridiculously tiny CSS library you can use to start any web project.',
url: 'https://pure-css.github.io', url: 'https://pure-css.github.io',
baseUrl: '/', baseUrl: '/',
favicon: 'img/favicon.ico', favicon: 'img/favicon.ico',
organizationName: 'pure-css', organizationName: 'pure-css',
projectName: 'pure-css.github.io', projectName: 'pure-css.github.io',
plugins: [ plugins: [
'@docusaurus/plugin-content-pages', '@docusaurus/plugin-content-pages',
'@docusaurus/plugin-google-analytics', '@docusaurus/plugin-google-analytics',
], ],
themeConfig: { themeConfig: {
googleAnalytics: { googleAnalytics: {
trackingID: 'UA-41480445-1', trackingID: 'UA-41480445-1',
anonymizeIP: true, 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); const files = fs.readdirSync(pureDir);
// collect all minified module files // collect all minified module files
const modules = files.filter(file => (/\-min\.css$/).test(file)) const modules = files.filter(file => (/-min\.css$/).test(file))
.map(file => file.replace(/\-min\.css$/, '')); .map(file => file.replace(/-min\.css$/, ''));
// get sizes across all modules // get sizes across all modules
const moduleSizes = modules.map(module => { const moduleSizes = modules.map(module => {
@ -33,4 +33,4 @@ module.exports.moduleSizes = function moduleSizes() {
map[modules[i]] = size; map[modules[i]] = size;
return map; 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", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==" "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": { "commondir": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", "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-content-pages": "^2.0.0-alpha.53",
"@docusaurus/plugin-google-analytics": "^2.0.0-alpha.53", "@docusaurus/plugin-google-analytics": "^2.0.0-alpha.53",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"common-tags": "^1.8.0",
"gzip-size": "^5.1.1", "gzip-size": "^5.1.1",
"js-beautify": "^1.11.0", "js-beautify": "^1.11.0",
"react": "^16.8.4", "react": "^16.8.4",

20
site/src/index.js
View File

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

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

@ -1,5 +1,4 @@
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import classnames from 'classnames';
import React from 'react'; import React from 'react';
import Layout from '../../theme/Layout'; import Layout from '../../theme/Layout';
import Header from '../../../components/Header'; import Header from '../../../components/Header';
@ -10,73 +9,73 @@ const title = 'Base';
const description = 'Leveraging Normalize.css, an HTML5-ready alternative to CSS resets.'; const description = 'Leveraging Normalize.css, an HTML5-ready alternative to CSS resets.';
function Base() { function Base() {
return ( return (
<Layout description={description} title={title}> <Layout description={description} title={title}>
<Header description={description} title={title} /> <Header description={description} title={title} />
<div className="content"> <div className="content">
<SectionHeader heading="The Foundation" /> <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: 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}> <CodeBlock wrap={true}>
{`<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">`} {'<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">'}
</CodeBlock> </CodeBlock>
<h3>A bit about Normalize.css</h3> <h3>A bit about Normalize.css</h3>
<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>: <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>
<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." 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. 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. 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>. 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}> <CodeBlock wrap={true}>
{`<input type="text" name="_csrf" hidden>`} {'<input type="text" name="_csrf" hidden>'}
</CodeBlock> </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. 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}> <CodeBlock wrap={true}>
{`<img class="pure-img" src="...">`} {'<img class="pure-img" src="...">'}
</CodeBlock> </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. 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>. 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> </p>
</div> </div>
</Layout> </Layout>
); );
} }
export default Base; 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 React from 'react';
import Layout from '../../theme/Layout'; import Layout from '../../theme/Layout';
import Header from '../../../components/Header'; import Header from '../../../components/Header';
@ -10,71 +9,71 @@ const title = 'Buttons';
const description = 'Simple CSS for buttons.'; const description = 'Simple CSS for buttons.';
function Buttons() { function Buttons() {
return ( return (
<Layout description={description} title={title}> <Layout description={description} title={title}>
<Header description={description} title={title} /> <Header description={description} title={title} />
<div className="content" onClick={handleClick}> <div className="content" onClick={handleClick}>
<SectionHeader heading="Default Buttons" /> <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. 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> <Example>
<a className="pure-button" href="#">A Pure Button</a> <a className="pure-button" href="#">A Pure Button</a>
<button className="pure-button">A Pure Button</button> <button className="pure-button">A Pure Button</button>
</Example> </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>. 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. Alternatively, add the "disabled" attribute directly to your button.
</p> </p>
<Example> <Example>
<button className="pure-button pure-button-disabled">A Disabled Button</button> <button className="pure-button pure-button-disabled">A Disabled Button</button>
<button className="pure-button" disabled>A Disabled Button</button> <button className="pure-button" disabled>A Disabled Button</button>
</Example> </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>. 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> <Example>
<a className="pure-button pure-button-active" href="#">An Active Button</a> <a className="pure-button pure-button-active" href="#">An Active Button</a>
<button className="pure-button pure-button-active">An Active Button</button> <button className="pure-button pure-button-active">An Active Button</button>
</Example> </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>. 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> <Example>
<a className="pure-button pure-button-primary" href="#">A Primary Button</a> <a className="pure-button pure-button-primary" href="#">A Primary Button</a>
<button className="pure-button pure-button-primary">A Primary Button</button> <button className="pure-button pure-button-primary">A Primary Button</button>
</Example> </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. 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. 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> <Example>
<div> <div>
<style scoped dangerouslySetInnerHTML={{ __html: ` <style scoped dangerouslySetInnerHTML={{ __html: `
.button-success, .button-success,
.button-error, .button-error,
.button-warning, .button-warning,
@ -96,18 +95,18 @@ function Buttons() {
background: rgb(66, 184, 221); /* this is a light blue */ background: rgb(66, 184, 221); /* this is a light blue */
} }
`}} /> `}} />
<button className="button-success pure-button">Success Button</button> <button className="button-success pure-button">Success Button</button>
<button className="button-error pure-button">Error Button</button> <button className="button-error pure-button">Error Button</button>
<button className="button-warning pure-button">Warning Button</button> <button className="button-warning pure-button">Warning Button</button>
<button className="button-secondary pure-button">Secondary Button</button> <button className="button-secondary pure-button">Secondary Button</button>
</div> </div>
</Example> </Example>
<h3 className="content-subhead">Buttons with different sizes</h3> <h3 className="content-subhead">Buttons with different sizes</h3>
<Example> <Example>
<div> <div>
<style scoped dangerouslySetInnerHTML={{ __html: ` <style scoped dangerouslySetInnerHTML={{ __html: `
.button-xsmall { .button-xsmall {
font-size: 70%; font-size: 70%;
} }
@ -121,56 +120,56 @@ function Buttons() {
font-size: 125%; font-size: 125%;
} }
`}} /> `}} />
<button className="button-xsmall pure-button">Extra Small Button</button> <button className="button-xsmall pure-button">Extra Small Button</button>
<button className="button-small pure-button">Small Button</button> <button className="button-small pure-button">Small Button</button>
<button className="pure-button">Regular Button</button> <button className="pure-button">Regular Button</button>
<button className="button-large pure-button">Large Button</button> <button className="button-large pure-button">Large Button</button>
<button className="button-xlarge pure-button">Extra Large Button</button> <button className="button-xlarge pure-button">Extra Large Button</button>
</div> </div>
</Example> </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. 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> <Example>
<button className="pure-button"> <button className="pure-button">
<i className="fa fa-cog"></i> <i className="fa fa-cog"></i>
Settings Settings
</button> </button>
<a className="pure-button" href="#"> <a className="pure-button" href="#">
<i className="fa fa-shopping-cart fa-lg"></i> <i className="fa fa-shopping-cart fa-lg"></i>
Checkout Checkout
</a> </a>
</Example> </Example>
<SectionHeader heading="Button Groups" /> <SectionHeader heading="Button Groups" />
<p> <p>
Group multiple buttons together on a single line. Group multiple buttons together on a single line.
</p> </p>
<aside> <aside>
<p> <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>. 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. Additionally, a clear label should be provided since most assistive technologies will not announce them. The code snippet below provides an example.
</p> </p>
</aside> </aside>
<Example> <Example>
<div className="pure-button-group" role="group" aria-label="..."> <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">A Pure Button</button> <button className="pure-button">A Pure Button</button>
<button className="pure-button pure-button-active">A Pure Button</button> <button className="pure-button pure-button-active">A Pure Button</button>
</div> </div>
</Example> </Example>
</div> </div>
</Layout> </Layout>
); );
} }
export default Buttons; 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 Header from '../../../components/Header';
import CodeBlock from '../../../components/CodeBlock'; import CodeBlock from '../../../components/CodeBlock';
import SectionHeader from '../../../components/SectionHeader'; import SectionHeader from '../../../components/SectionHeader';
import { filePercent, fileSize } from '../../../lib/utils'; import { fileSize } from '../../../lib/utils';
const title = 'Customize'; const title = 'Customize';
const description = 'Choose the modules that you need.'; const description = 'Choose the modules that you need.';
@ -79,37 +79,31 @@ function Customize() {
<tbody> <tbody>
<tr> <tr>
<td><a href="http://cdnjs.com/">cdnjs</a></td> <td><a href="http://cdnjs.com/">cdnjs</a></td>
<td>//cdnjs.cloudflare.com/ajax/libs/pure/{pureVersion}/pure-min.css</td> <td>{`//cdnjs.cloudflare.com/ajax/libs/pure/${pureVersion}/build/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>Yes</td> <td>Yes</td>
<td>Yes</td> <td>Yes</td>
</tr> </tr>
<tr> <tr>
<td><a href="https://www.keycdn.com/">KeyCDN</a></td> <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>Yes</td>
<td>No</td> <td>No</td>
</tr> </tr>
<tr> <tr>
<td><a href="http://www.osscdn.com/">OSS MaxCDN</a></td> <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>Yes</td>
<td>No</td> <td>No</td>
</tr> </tr>
<tr> <tr>
<td><a href="http://rawgit.com/">RawGit</a></td> <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>Yes</td>
<td>No</td> <td>No</td>
</tr> </tr>
<tr> <tr>
<td><a href="http://www.staticfile.org/">Staticfile</a></td> <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>Yes</td>
<td>No</td> <td>No</td>
</tr> </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 Header from '../../../components/Header';
import CodeBlock from '../../../components/CodeBlock'; import CodeBlock from '../../../components/CodeBlock';
import SectionHeader from '../../../components/SectionHeader'; import SectionHeader from '../../../components/SectionHeader';
import { stripIndent } from 'common-tags';
const title = 'Extend'; const title = 'Extend';
const description = 'Build on top of Pure.'; const description = 'Build on top of Pure.';
@ -49,7 +50,7 @@ function Extend() {
</p> </p>
<CodeBlock> <CodeBlock>
{`<form class="pure-form pure-form-stacked"></form>`} {'<form class="pure-form pure-form-stacked"></form>'}
</CodeBlock> </CodeBlock>
<h4>Stacked Form: CSS</h4> <h4>Stacked Form: CSS</h4>
@ -59,19 +60,21 @@ function Extend() {
</p> </p>
<CodeBlock> <CodeBlock>
{`/* {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 Standard rules that all Pure Forms have. This includes rules for
rules such as vertical alignments. styling .pure-form &lt;inputs&gt;, &lt;fieldsets&gt;, and &lt;legends&gt;, as well as layout
*/ rules such as vertical alignments.
.pure-form { ... } */
.pure-form { ... }
/* /*
Specific rules that apply to stacked forms. This includes rules Specific rules that apply to stacked forms. This includes rules
such as taking child &lt;input&gt; elements and making them display: block such as taking child &lt;input&gt; elements and making them display: block
for the stacked effect. for the stacked effect.
*/ */
.pure-form-stacked { ... }`} .pure-form-stacked { ... }
`}
</CodeBlock> </CodeBlock>
<SectionHeader heading="Extending Pure" /> <SectionHeader heading="Extending Pure" />
@ -81,12 +84,14 @@ function Extend() {
</p> </p>
<CodeBlock> <CodeBlock>
{`<form class="form-custom pure-form"></form>`} {'<form class="form-custom pure-form"></form>'}
</CodeBlock> </CodeBlock>
<CodeBlock className="test"> <CodeBlock className="test">
{`/* add your custom styles in this selector */ {stripIndent`
.form-custom { ... }`} /* add your custom styles in this selector */
.form-custom { ... }
`}
</CodeBlock> </CodeBlock>
<p> <p>
@ -122,55 +127,57 @@ function Extend() {
</p> </p>
<CodeBlock> <CodeBlock>
{`<!-- Button to trigger modal --> {stripIndent`
<p> <!-- Button to trigger modal -->
<a href="#myModal" role="button" className="pure-button-primary pure-button" data-toggle="modal"> <p>
Launch Pure + Bootstrap Modal <a href="#myModal" role="button" className="pure-button-primary pure-button" data-toggle="modal">
</a> Launch Pure + Bootstrap Modal
</p> </a>
</p>
<!-- Modal --> <!-- Modal -->
<!-- <!--
* Bootstrap v2.3.2 * Bootstrap v2.3.2
* *
* Copyright 2012 Twitter, Inc * Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0 * Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * 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 id="myModal" className="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div className="modal-header"> <div className="modal-header">
<h1 id="myModalLabel">A Bootstrap Modal with Pure</h1> <h1 id="myModalLabel">A Bootstrap Modal with Pure</h1>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<p> <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. 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> </p>
<form className="pure-form pure-form-stacked"> <form className="pure-form pure-form-stacked">
<legend>A Stacked Form</legend> <legend>A Stacked Form</legend>
<label for="email">Email</label> <label for="email">Email</label>
<input id="email" type="text" placeholder="Email"> <input id="email" type="text" placeholder="Email">
<label for="password">Password</label> <label for="password">Password</label>
<input id="password" type="password" placeholder="Password"> <input id="password" type="password" placeholder="Password">
<label for="state">State</label> <label for="state">State</label>
<select id="state"> <select id="state">
<option>AL</option> <option>AL</option>
<option>CA</option> <option>CA</option>
<option>IL</option> <option>IL</option>
</select> </select>
<label className="pure-checkbox"> <label className="pure-checkbox">
<input type="checkbox"> Remember me <input type="checkbox"> Remember me
</label> </label>
</form> </form>
</div> </div>
<div className="modal-footer"> <div className="modal-footer">
<button className="pure-button" data-dismiss="modal" aria-hidden="true">Close</button> <button className="pure-button" data-dismiss="modal" aria-hidden="true">Close</button>
<button className="pure-button pure-button-primary">Submit</button> <button className="pure-button pure-button-primary">Submit</button>
</div> </div>
</div> </div>
<script src="//code.jquery.com/jquery-1.9.1.js"></script> <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>`} <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
`}
</CodeBlock> </CodeBlock>
</div> </div>
</Layout> </Layout>

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

@ -9,297 +9,297 @@ const title = 'Forms';
const description = 'Simple CSS for HTML forms.'; const description = 'Simple CSS for HTML forms.';
function Forms() { function Forms() {
return ( return (
<Layout description={description} title={title}> <Layout description={description} title={title}>
<Header description={description} title={title} /> <Header description={description} title={title} />
<div className="content"> <div className="content">
<SectionHeader heading="Default Form" /> <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. To create a default inline form, add the <code>pure-form</code> classname to any <code>&lt;form&gt;</code> element.
</p> </p>
<Example> <Example>
<form className="pure-form"> <form className="pure-form">
<fieldset> <fieldset>
<legend>A compact inline form</legend> <legend>A compact inline form</legend>
<input type="email" placeholder="Email" /> <input type="email" placeholder="Email" />
<input type="password" placeholder="Password" /> <input type="password" placeholder="Password" />
<label htmlFor="default-remember"> <label htmlFor="default-remember">
<input id="default-remember" type="checkbox" /> <input id="default-remember" type="checkbox" />
Remember me Remember me
</label> </label>
<button type="submit" className="pure-button pure-button-primary">Sign in</button> <button type="submit" className="pure-button pure-button-primary">Sign in</button>
</fieldset> </fieldset>
</form> </form>
</Example> </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>. 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> <Example>
<form className="pure-form pure-form-stacked"> <form className="pure-form pure-form-stacked">
<fieldset> <fieldset>
<legend>A Stacked Form</legend> <legend>A Stacked Form</legend>
<label htmlFor="stacked-email">Email</label> <label htmlFor="stacked-email">Email</label>
<input id="stacked-email" type="email" placeholder="Email" /> <input id="stacked-email" type="email" placeholder="Email" />
<span className="pure-form-message">This is a required field.</span> <span className="pure-form-message">This is a required field.</span>
<label htmlFor="stacked-password">Password</label> <label htmlFor="stacked-password">Password</label>
<input id="stacked-password" type="password" placeholder="Password" /> <input id="stacked-password" type="password" placeholder="Password" />
<label htmlFor="stacked-state">State</label> <label htmlFor="stacked-state">State</label>
<select id="stacked-state"> <select id="stacked-state">
<option>AL</option> <option>AL</option>
<option>CA</option> <option>CA</option>
<option>IL</option> <option>IL</option>
</select> </select>
<label htmlFor="stacked-remember" className="pure-checkbox"> <label htmlFor="stacked-remember" className="pure-checkbox">
<input id="stacked-remember" type="checkbox" /> Remember me <input id="stacked-remember" type="checkbox" /> Remember me
</label> </label>
<button type="submit" className="pure-button pure-button-primary">Sign in</button> <button type="submit" className="pure-button pure-button-primary">Sign in</button>
</fieldset> </fieldset>
</form> </form>
</Example> </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>. 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> <Example>
<form className="pure-form pure-form-aligned"> <form className="pure-form pure-form-aligned">
<fieldset> <fieldset>
<div className="pure-control-group"> <div className="pure-control-group">
<label htmlFor="aligned-name">Username</label> <label htmlFor="aligned-name">Username</label>
<input id="aligned-name" type="text" placeholder="Username" /> <input id="aligned-name" type="text" placeholder="Username" />
<span className="pure-form-message-inline">This is a required field.</span> <span className="pure-form-message-inline">This is a required field.</span>
</div> </div>
<div className="pure-control-group"> <div className="pure-control-group">
<label htmlFor="aligned-password">Password</label> <label htmlFor="aligned-password">Password</label>
<input id="aligned-password" type="password" placeholder="Password" /> <input id="aligned-password" type="password" placeholder="Password" />
</div> </div>
<div className="pure-control-group"> <div className="pure-control-group">
<label htmlFor="aligned-email">Email Address</label> <label htmlFor="aligned-email">Email Address</label>
<input id="aligned-email" type="email" placeholder="Email Address" /> <input id="aligned-email" type="email" placeholder="Email Address" />
</div> </div>
<div className="pure-control-group"> <div className="pure-control-group">
<label htmlFor="aligned-foo">Supercalifragilistic Label</label> <label htmlFor="aligned-foo">Supercalifragilistic Label</label>
<input id="aligned-foo" type="text" placeholder="Enter something here..." /> <input id="aligned-foo" type="text" placeholder="Enter something here..." />
</div> </div>
<div className="pure-controls"> <div className="pure-controls">
<label htmlFor="aligned-cb" className="pure-checkbox"> <label htmlFor="aligned-cb" className="pure-checkbox">
<input id="aligned-cb" type="checkbox" /> I've read the terms and conditions <input id="aligned-cb" type="checkbox" /> I've read the terms and conditions
</label> </label>
<button type="submit" className="pure-button pure-button-primary">Submit</button> <button type="submit" className="pure-button pure-button-primary">Submit</button>
</div> </div>
</fieldset> </fieldset>
</form> </form>
</Example> </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. 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> <Example>
<form className="pure-form pure-form-stacked"> <form className="pure-form pure-form-stacked">
<fieldset> <fieldset>
<legend>Legend</legend> <legend>Legend</legend>
<div className="pure-g"> <div className="pure-g">
<div className="pure-u-1 pure-u-md-1-3"> <div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-first-name">First Name</label> <label htmlFor="multi-first-name">First Name</label>
<input id="multi-first-name" className="pure-u-23-24" type="text" /> <input id="multi-first-name" className="pure-u-23-24" type="text" />
</div> </div>
<div className="pure-u-1 pure-u-md-1-3"> <div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-last-name">Last Name</label> <label htmlFor="multi-last-name">Last Name</label>
<input id="multi-last-name" className="pure-u-23-24" type="text" /> <input id="multi-last-name" className="pure-u-23-24" type="text" />
</div> </div>
<div className="pure-u-1 pure-u-md-1-3"> <div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-email">E-Mail</label> <label htmlFor="multi-email">E-Mail</label>
<input id="multi-email" className="pure-u-23-24" type="email" required /> <input id="multi-email" className="pure-u-23-24" type="email" required />
</div> </div>
<div className="pure-u-1 pure-u-md-1-3"> <div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-city">City</label> <label htmlFor="multi-city">City</label>
<input id="multi-city" className="pure-u-23-24" type="text" /> <input id="multi-city" className="pure-u-23-24" type="text" />
</div> </div>
<div className="pure-u-1 pure-u-md-1-3"> <div className="pure-u-1 pure-u-md-1-3">
<label htmlFor="multi-state">State</label> <label htmlFor="multi-state">State</label>
<select id="multi-state" className="pure-input-1-2"> <select id="multi-state" className="pure-input-1-2">
<option>AL</option> <option>AL</option>
<option>CA</option> <option>CA</option>
<option>IL</option> <option>IL</option>
</select> </select>
</div> </div>
</div> </div>
<label htmlFor="multi-terms" className="pure-checkbox"> <label htmlFor="multi-terms" className="pure-checkbox">
<input id="multi-terms" type="checkbox" /> I've read the terms and conditions <input id="multi-terms" type="checkbox" /> I've read the terms and conditions
</label> </label>
<button type="submit" className="pure-button pure-button-primary">Submit</button> <button type="submit" className="pure-button pure-button-primary">Submit</button>
</fieldset> </fieldset>
</form> </form>
</Example> </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. 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> <Example>
<form className="pure-form"> <form className="pure-form">
<fieldset className="pure-group"> <fieldset className="pure-group">
<input type="text" className="pure-input-1-2" placeholder="Username" /> <input type="text" className="pure-input-1-2" placeholder="Username" />
<input type="text" className="pure-input-1-2" placeholder="Password" /> <input type="text" className="pure-input-1-2" placeholder="Password" />
<input type="email" className="pure-input-1-2" placeholder="Email" /> <input type="email" className="pure-input-1-2" placeholder="Email" />
</fieldset> </fieldset>
<fieldset className="pure-group"> <fieldset className="pure-group">
<input type="text" className="pure-input-1-2" placeholder="A title" /> <input type="text" className="pure-input-1-2" placeholder="A title" />
<textarea className="pure-input-1-2" placeholder="Textareas work too"></textarea> <textarea className="pure-input-1-2" placeholder="Textareas work too"></textarea>
</fieldset> </fieldset>
<button type="submit" className="pure-button pure-input-1-2 pure-button-primary">Sign in</button> <button type="submit" className="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form> </form>
</Example> </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. 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> <Example>
<form className="pure-form"> <form className="pure-form">
<input className="pure-input-1" type="text" placeholder=".pure-input-1" /><br /> <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-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-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-3" type="text" placeholder=".pure-input-1-3" /><br />
<input className="pure-input-1-4" type="text" placeholder=".pure-input-1-4" /><br /> <input className="pure-input-1-4" type="text" placeholder=".pure-input-1-4" /><br />
</form> </form>
</Example> </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. 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> <Example>
<form className="pure-form pure-g"> <form className="pure-form pure-g">
<div className="pure-u-1-4"> <div className="pure-u-1-4">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-4" /> <input className="pure-input-1" type="text" placeholder=".pure-u-1-4" />
</div> </div>
<div className="pure-u-3-4"> <div className="pure-u-3-4">
<input className="pure-input-1" type="text" placeholder=".pure-u-3-4" /> <input className="pure-input-1" type="text" placeholder=".pure-u-3-4" />
</div> </div>
<div className="pure-u-1-2"> <div className="pure-u-1-2">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-2" /> <input className="pure-input-1" type="text" placeholder=".pure-u-1-2" />
</div> </div>
<div className="pure-u-1-2"> <div className="pure-u-1-2">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-2" /> <input className="pure-input-1" type="text" placeholder=".pure-u-1-2" />
</div> </div>
<div className="pure-u-1-8"> <div className="pure-u-1-8">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-8" /> <input className="pure-input-1" type="text" placeholder=".pure-u-1-8" />
</div> </div>
<div className="pure-u-1-8"> <div className="pure-u-1-8">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-8" /> <input className="pure-input-1" type="text" placeholder=".pure-u-1-8" />
</div> </div>
<div className="pure-u-1-4"> <div className="pure-u-1-4">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-4" /> <input className="pure-input-1" type="text" placeholder=".pure-u-1-4" />
</div> </div>
<div className="pure-u-1-2"> <div className="pure-u-1-2">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-2" /> <input className="pure-input-1" type="text" placeholder=".pure-u-1-2" />
</div> </div>
<div className="pure-u-1-5"> <div className="pure-u-1-5">
<input className="pure-input-1" type="text" placeholder=".pure-u-1-5" /> <input className="pure-input-1" type="text" placeholder=".pure-u-1-5" />
</div> </div>
<div className="pure-u-2-5"> <div className="pure-u-2-5">
<input className="pure-input-1" type="text" placeholder=".pure-u-2-5" /> <input className="pure-input-1" type="text" placeholder=".pure-u-2-5" />
</div> </div>
<div className="pure-u-2-5"> <div className="pure-u-2-5">
<input className="pure-input-1" type="text" placeholder=".pure-u-2-5" /> <input className="pure-input-1" type="text" placeholder=".pure-u-2-5" />
</div> </div>
<div className="pure-u-1"> <div className="pure-u-1">
<input className="pure-input-1" type="text" placeholder=".pure-u-1" /> <input className="pure-input-1" type="text" placeholder=".pure-u-1" />
</div> </div>
</form> </form>
</Example> </Example>
<SectionHeader heading="Required Inputs" /> <SectionHeader heading="Required Inputs" />
<p> <p>
To mark a form control as required, add the <code>required</code> attribute. To mark a form control as required, add the <code>required</code> attribute.
</p> </p>
<Example> <Example>
<form className="pure-form"> <form className="pure-form">
<input type="email" placeholder="Requires an email" required /> <input type="email" placeholder="Requires an email" required />
</form> </form>
</Example> </Example>
<SectionHeader heading="Disabled Inputs" /> <SectionHeader heading="Disabled Inputs" />
<p> <p>
To disable a form control, add the <code>disabled</code> attribute. To disable a form control, add the <code>disabled</code> attribute.
</p> </p>
<Example> <Example>
<form className="pure-form"> <form className="pure-form">
<input type="text" placeholder="Disabled input here..." disabled /> <input type="text" placeholder="Disabled input here..." disabled />
</form> </form>
</Example> </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. 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> <Example>
<form className="pure-form"> <form className="pure-form">
<input type="text" value="Readonly input here..." readOnly /> <input type="text" value="Readonly input here..." readOnly />
</form> </form>
</Example> </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. To display a form control with rounded corners, add the <code>pure-input-rounded</code> classname.
</p> </p>
<Example> <Example>
<form className="pure-form"> <form className="pure-form">
<input type="text" className="pure-input-rounded" /> <input type="text" className="pure-input-rounded" />
<button type="submit" className="pure-button">Search</button> <button type="submit" className="pure-button">Search</button>
</form> </form>
</Example> </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. To normalize and align checkboxes and radio inputs, add the <code>pure-checkbox</code> or <code>pure-radio</code> classname.
</p> </p>
<Example> <Example>
<form className="pure-form"> <form className="pure-form">
<label htmlFor="checkbox-radio-option-one" className="pure-checkbox"> <label htmlFor="checkbox-radio-option-one" className="pure-checkbox">
<input id="checkbox-radio-option-one" type="checkbox" value="" /> <input id="checkbox-radio-option-one" type="checkbox" value="" />
Here's option one. Here's option one.
</label> </label>
<label htmlFor="checkbox-radio-option-two" className="pure-radio"> <label htmlFor="checkbox-radio-option-two" className="pure-radio">
<input id="checkbox-radio-option-two" type="radio" name="optionsRadios" value="option1" defaultChecked /> <input id="checkbox-radio-option-two" type="radio" name="optionsRadios" value="option1" defaultChecked />
Here's a radio button. You can choose this one.. Here's a radio button. You can choose this one..
</label> </label>
<label htmlFor="checkbox-radio-option-three" className="pure-radio"> <label htmlFor="checkbox-radio-option-three" className="pure-radio">
<input id="checkbox-radio-option-three" type="radio" name="optionsRadios" value="option2" /> <input id="checkbox-radio-option-three" type="radio" name="optionsRadios" value="option2" />
..Or this one! ..Or this one!
</label> </label>
</form> </form>
</Example> </Example>
</div> </div>
</Layout> </Layout>
); );
} }
export default Forms; export default Forms;

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

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

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

@ -5,7 +5,7 @@ import React from 'react';
import Layout from '@theme/Layout'; import Layout from '@theme/Layout';
import CodeBlock from '../../components/CodeBlock'; import CodeBlock from '../../components/CodeBlock';
import { filePercent, fileSize } from '../../lib/utils'; import { filePercent, fileSize } from '../../lib/utils';
import styles from './styles.css'; import './styles.css';
const renderModuleSize = (filesizes) => { const renderModuleSize = (filesizes) => {
const modules = ['base', 'grids', 'forms', 'buttons', 'tables', 'menus']; const modules = ['base', 'grids', 'forms', 'buttons', 'tables', 'menus'];
@ -19,141 +19,140 @@ const renderModuleSize = (filesizes) => {
</Link> </Link>
</div> </div>
)); ));
} };
function Home() { function Home() {
const context = useDocusaurusContext(); const context = useDocusaurusContext();
const {siteConfig = {}} = context; const {siteConfig = {}} = context;
const { const {
customFields: { customFields: {
moduleSizes, moduleSizes,
PURE_DOWNLOAD_SNIPPET, PURE_DOWNLOAD_SNIPPET,
pureVersion, },
}, organizationName,
organizationName, projectName,
projectName, } = siteConfig;
} = siteConfig; const renderSize = renderModuleSize(moduleSizes);
const renderSize = renderModuleSize(moduleSizes); return (
return ( <Layout description={siteConfig.tagline}>
<Layout description={siteConfig.tagline}> <div className="hero">
<div className="hero"> <div className="hero-titles">
<div className="hero-titles"> <img className="logo" src={useBaseUrl('img/logo_pure@2x.png')} alt="Pure" />
<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> <h2 className="hero-tagline">A set of small, responsive CSS modules that you can use in every web project.</h2>
</div> </div>
<div className="hero-cta"> <div className="hero-cta">
<CodeBlock full={true} wrap={true}>{PURE_DOWNLOAD_SNIPPET}</CodeBlock> <CodeBlock full={true} wrap={true}>{PURE_DOWNLOAD_SNIPPET}</CodeBlock>
<p> <p>
<Link className="button-cta pure-button" to="/start/">Get Started</Link> <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> <a className="button-secondary pure-button" href={`https://github.com/${organizationName}/${projectName}/`}>View on GitHub</a>
</p> </p>
</div> </div>
</div> </div>
<div className="marketing"> <div className="marketing">
<div className="size-chart pure-g"> <div className="size-chart pure-g">
{renderSize} {renderSize}
</div> </div>
<div className="content"> <div className="content">
<h3 className="marketing-header">CSS with a minimal footprint.</h3> <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. 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. * We can add correctly :) the numbers above are individual module sizes; when grouped together they compress (gzip) even more.
</p> </p>
</div> </div>
</div> </div>
<div className="marketing l-wrap pure-g"> <div className="marketing l-wrap pure-g">
<div className="content pure-u-1 u-sm-1-2 u-xl-1-3"> <div className="content pure-u-1 u-sm-1-2 u-xl-1-3">
<h3 className="marketing-header">Your CSS foundation.</h3> <h3 className="marketing-header">Your CSS foundation.</h3>
<p> <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. 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> </p>
</div> </div>
<div className="content pure-u-1 u-sm-1-2 u-xl-1-3"> <div className="content pure-u-1 u-sm-1-2 u-xl-1-3">
<h3 className="marketing-header">Made with mobile in mind.</h3> <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. Pure is responsive out of the box, so elements look great on all screen sizes.
</p> </p>
</div> </div>
<div className="content pure-u-1 u-lg-3-4 u-xl-1-3"> <div className="content pure-u-1 u-lg-3-4 u-xl-1-3">
<h3 className="marketing-header">Stays out of your way.</h3> <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. 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> </p>
</div> </div>
</div> </div>
<div className="marketing l-wrap pure-g"> <div className="marketing l-wrap pure-g">
<div className="marketing-diagram content pure-u-1 u-sm-2-3 u-md-1-2"> <div className="marketing-diagram content pure-u-1 u-sm-2-3 u-md-1-2">
<Link to="/layouts"> <Link to="/layouts">
<img src={useBaseUrl('img/layout-icon.jpg')} className="pure-img-responsive" alt="Diagram of a sample layout." /> <img src={useBaseUrl('img/layout-icon.jpg')} className="pure-img-responsive" alt="Diagram of a sample layout." />
</Link> </Link>
</div> </div>
<div className="content pure-u-1 u-md-1-2"> <div className="content pure-u-1 u-md-1-2">
<h3 className="marketing-header">Create responsive layouts.</h3> <h3 className="marketing-header">Create responsive layouts.</h3>
<p> <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. 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>
<p> <p>
<Link to="/layouts/" className="pure-button">View Layouts</Link> <Link to="/layouts/" className="pure-button">View Layouts</Link>
</p> </p>
</div> </div>
</div> </div>
<div className="marketing marketing-customize l-wrap pure-g"> <div className="marketing marketing-customize l-wrap pure-g">
<div className="content pure-u-1 u-md-1-2"> <div className="content pure-u-1 u-md-1-2">
<h3 className="marketing-header">Create your own look and feel.</h3> <h3 className="marketing-header">Create your own look and feel.</h3>
<p> <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. 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>
<p> <p>
<Link to="/extend/" className="pure-button">Extend Pure</Link> <Link to="/extend/" className="pure-button">Extend Pure</Link>
</p> </p>
</div> </div>
<div className="sample-buttons content pure-u-1 u-md-1-2"> <div className="sample-buttons content pure-u-1 u-md-1-2">
<div className="pure-g"> <div className="pure-g">
<span className="sample-button pure-u-1-2 u-sm-1-3"> <span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="pure-button">Default</button> <button className="pure-button">Default</button>
</span> </span>
<span className="sample-button pure-u-1-2 u-sm-1-3"> <span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-a pure-button">Blue</button> <button className="button-a pure-button">Blue</button>
</span> </span>
<span className="sample-button pure-u-1-2 u-sm-1-3"> <span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-b pure-button">Yellow</button> <button className="button-b pure-button">Yellow</button>
</span> </span>
<span className="sample-button pure-u-1-2 u-sm-1-3"> <span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-c pure-button">Black</button> <button className="button-c pure-button">Black</button>
</span> </span>
<span className="sample-button pure-u-1-2 u-sm-1-3"> <span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-d pure-button">Green</button> <button className="button-d pure-button">Green</button>
</span> </span>
<span className="sample-button pure-u-1-2 u-sm-1-3"> <span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-e pure-button">Red</button> <button className="button-e pure-button">Red</button>
</span> </span>
<span className="sample-button pure-u-1-2 u-sm-1-3"> <span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-f pure-button">Purple</button> <button className="button-f pure-button">Purple</button>
</span> </span>
<span className="sample-button pure-u-1-2 u-sm-1-3"> <span className="sample-button pure-u-1-2 u-sm-1-3">
<button className="button-g pure-button">Orange</button> <button className="button-g pure-button">Orange</button>
</span> </span>
<span className="sample-button pure-u-1 u-sm-1-3"> <span className="sample-button pure-u-1 u-sm-1-3">
<button className="button-h pure-button">Indigo</button> <button className="button-h pure-button">Indigo</button>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</Layout> </Layout>
); );
} }
export default Home; export default Home;

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

@ -1,63 +1,62 @@
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
import classnames from 'classnames';
import React from 'react'; import React from 'react';
import Layout from '@theme/Layout'; import Layout from '@theme/Layout';
import Header from '../../../components/Header'; import Header from '../../../components/Header';
import SectionHeader from '../../../components/SectionHeader'; import SectionHeader from '../../../components/SectionHeader';
import styles from './styles.css'; import './styles.css';
const title = 'Layouts'; const title = 'Layouts';
const description = 'Quickstart your next web project with these example layouts.'; const description = 'Quickstart your next web project with these example layouts.';
const layouts = [ const layouts = [
{ {
type: "blog", type: 'blog',
title: "Blog", title: 'Blog',
summary: "A layout example that shows off a blog page with a list of posts.", summary: 'A layout example that shows off a blog page with a list of posts.',
modules: ["base", "grids", "buttons", "menus"] modules: ['base', 'grids', 'buttons', 'menus']
}, },
{ {
type: "email", type: 'email',
title: "Email", title: 'Email',
summary: "A layout example that shows off a responsive email layout.", summary: 'A layout example that shows off a responsive email layout.',
modules: ["base", "grids", "buttons", "menus"] modules: ['base', 'grids', 'buttons', 'menus']
}, },
{ {
type: "gallery", type: 'gallery',
title: "Photo Gallery", title: 'Photo Gallery',
summary: "A layout example that shows off a responsive photo gallery.", summary: 'A layout example that shows off a responsive photo gallery.',
modules: ["base", "grids", "forms", "buttons", "menus"] modules: ['base', 'grids', 'forms', 'buttons', 'menus']
}, },
{ {
type: "marketing", type: 'marketing',
title: "Landing Page", title: 'Landing Page',
summary: "A layout example that shows off a responsive product landing page.", summary: 'A layout example that shows off a responsive product landing page.',
modules: ["base", "grids", "forms", "buttons", "menus"] modules: ['base', 'grids', 'forms', 'buttons', 'menus']
}, },
{ {
type: "pricing", type: 'pricing',
title: "Pricing Table", title: 'Pricing Table',
summary: "A layout example that shows off a responsive pricing table.", summary: 'A layout example that shows off a responsive pricing table.',
modules: ["base", "grids", "buttons", "menus"] modules: ['base', 'grids', 'buttons', 'menus']
}, },
{ {
type: "side-menu", type: 'side-menu',
title: "Responsive Side Menu", title: 'Responsive Side Menu',
summary: "A layout example with a side menu that hides on mobile, just like the Pure website.", summary: 'A layout example with a side menu that hides on mobile, just like the Pure website.',
modules: ["base", "grids", "menus"] modules: ['base', 'grids', 'menus']
}, },
{ {
type: "tucked-menu-vertical", type: 'tucked-menu-vertical',
title: "Responsive Horizontal-to-Vertical Menu", title: 'Responsive Horizontal-to-Vertical Menu',
summary: "A set of horizontal menus that switch to vertical and which hide at small window widths.", summary: 'A set of horizontal menus that switch to vertical and which hide at small window widths.',
modules: ["base", "grids", "menus"] modules: ['base', 'grids', 'menus']
}, },
{ {
type: "tucked-menu", type: 'tucked-menu',
title: "Responsive Horizontal-to-Scrollable Menu", title: 'Responsive Horizontal-to-Scrollable Menu',
summary: "Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.", summary: 'Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.',
modules: ["base", "menus"] modules: ['base', 'menus']
} }
]; ];
@ -66,7 +65,7 @@ const renderLayouts = (layout, idx) => (
<div className="layout-item-screenshot content pure-u-1 u-sm-1-2"> <div className="layout-item-screenshot content pure-u-1 u-sm-1-2">
<a href={`/layouts/${layout.type}/`}> <a href={`/layouts/${layout.type}/`}>
<img src={useBaseUrl(`img/layouts/${layout.type}@2x.jpg`)} className="pure-img-responsive" width="400" height="214" <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> </a>
</div> </div>
<div className="layout-item-content content pure-u-1 u-sm-1-2"> <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 useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import classnames from 'classnames';
import React from 'react'; import React from 'react';
import Layout from '../../theme/Layout'; import Layout from '../../theme/Layout';
import Header from '../../../components/Header'; import Header from '../../../components/Header';
import SectionHeader from '../../../components/SectionHeader'; import SectionHeader from '../../../components/SectionHeader';
import CodeBlock from '../../../components/CodeBlock'; import CodeBlock from '../../../components/CodeBlock';
import styles from './styles.css'; import { stripIndent } from 'common-tags';
import './styles.css';
const title = 'Get Started'; const title = 'Get Started';
const description = 'Start your next web project with Pure.'; const description = 'Start your next web project with Pure.';
@ -23,159 +21,161 @@ function Start() {
} = siteConfig; } = siteConfig;
return ( return (
<Layout description={description} title={title}> <Layout description={description} title={title}>
<Header description={description} title={title} /> <Header description={description} title={title} />
<div className="content"> <div className="content">
<SectionHeader heading="Add Pure to Your Page" /> <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. 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> </p>
</div> </div>
<CodeBlock full={true} wrap={true}>{PURE_DOWNLOAD_SNIPPET}</CodeBlock> <CodeBlock full={true} wrap={true}>{PURE_DOWNLOAD_SNIPPET}</CodeBlock>
<div className="content"> <div className="content">
<aside> <aside>
<p> <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. 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> </p>
</aside> </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>. 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> </p>
</div> </div>
<CodeBlock full={true} wrap={true}> <CodeBlock full={true} wrap={true}>
{`<meta name="viewport" content="width=device-width, initial-scale=1">`} {'<meta name="viewport" content="width=device-width, initial-scale=1">'}
</CodeBlock> </CodeBlock>
<div className="content"> <div className="content">
<SectionHeader heading="Understand Pure Grids" /> <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. 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: Here's a grid with three columns:
</p> </p>
<CodeBlock wrap={true}> <CodeBlock wrap={true}>
{`<div class="pure-g"> {stripIndent`
<div class="pure-u-1-3"><p>Thirds</p></div> <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 class="pure-u-1-3"><p>Thirds</p></div>
</div>`} <div class="pure-u-1-3"><p>Thirds</p></div>
</CodeBlock> </div>
</div> `}
</CodeBlock>
</div>
<div className="grids-example"> <div className="grids-example">
<div className="pure-g"> <div className="pure-g">
<div className="pure-u-1-3"> <div className="pure-u-1-3">
<p>Thirds</p> <p>Thirds</p>
</div> </div>
<div className="pure-u-1-3"> <div className="pure-u-1-3">
<p>Thirds</p> <p>Thirds</p>
</div> </div>
<div className="pure-u-1-3"> <div className="pure-u-1-3">
<p>Thirds</p> <p>Thirds</p>
</div> </div>
</div> </div>
</div> </div>
<div className="content"> <div className="content">
<SectionHeader heading="Responsive Grids" /> <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. 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.*/} {/*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> <p>
You'll need to <em>also</em> include Pure's <code>grids-responsive.css</code> onto your page: You'll need to <em>also</em> include Pure's <code>grids-responsive.css</code> onto your page:
</p> </p>
<CodeBlock wrap={true}> <CodeBlock wrap={true}>
{`<link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/grids-responsive-min.css">`} {`<link rel="stylesheet" href="https://unpkg.com/purecss@${pureVersion}/build/grids-responsive-min.css">`}
</CodeBlock> </CodeBlock>
<p> <p>
Here's the default responsive breakpoints included in <code>grids-responsive.css</code>: Here's the default responsive breakpoints included in <code>grids-responsive.css</code>:
</p> </p>
<div className="table-responsive"> <div className="table-responsive">
<table className="mq-table pure-table-bordered pure-table"> <table className="mq-table pure-table-bordered pure-table">
<thead> <thead>
<tr> <tr>
<th className="highlight">Key</th> <th className="highlight">Key</th>
<th className="highlight">CSS Media Query</th> <th className="highlight">CSS Media Query</th>
<th>Applies</th> <th>Applies</th>
<th>Classname</th> <th>Classname</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td className="highlight"><i>None</i></td> <td className="highlight"><i>None</i></td>
<td className="highlight"><i>None</i></td> <td className="highlight"><i>None</i></td>
<td><i>Always</i></td> <td><i>Always</i></td>
<td><code>.pure-u-*</code></td> <td><code>.pure-u-*</code></td>
</tr> </tr>
<tr> <tr>
<td className="highlight"><b><code>sm</code></b></td> <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 className="mq-table-mq highlight"><code>@media screen and (min-width: 35.5em)</code></td>
<td>≥ <b>568px</b></td> <td>≥ <b>568px</b></td>
<td><code>.pure-u-<b>sm</b>-*</code></td> <td><code>.pure-u-<b>sm</b>-*</code></td>
</tr> </tr>
<tr> <tr>
<td className="highlight"><b><code>md</code></b></td> <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 className="mq-table-mq highlight"><code>@media screen and (min-width: 48em)</code></td>
<td>≥ <b>768px</b></td> <td>≥ <b>768px</b></td>
<td><code>.pure-u-<b>md</b>-*</code></td> <td><code>.pure-u-<b>md</b>-*</code></td>
</tr> </tr>
<tr> <tr>
<td className="highlight"><b><code>lg</code></b></td> <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 className="mq-table-mq highlight"><code>@media screen and (min-width: 64em)</code></td>
<td>≥ <b>1024px</b></td> <td>≥ <b>1024px</b></td>
<td><code>.pure-u-<b>lg</b>-*</code></td> <td><code>.pure-u-<b>lg</b>-*</code></td>
</tr> </tr>
<tr> <tr>
<td className="highlight"><b><code>xl</code></b></td> <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 className="mq-table-mq highlight"><code>@media screen and (min-width: 80em)</code></td>
<td>≥ <b>1280px</b></td> <td>≥ <b>1280px</b></td>
<td><code>.pure-u-<b>xl</b>-*</code></td> <td><code>.pure-u-<b>xl</b>-*</code></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </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> 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> </p>
</div> </div>
<div className="grids-example"> <div className="grids-example">
<div className="pure-g"> <div className="pure-g">
<div className="pure-u-1">.pure-u-1</div> <div className="pure-u-1">.pure-u-1</div>
<div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> <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 .pure-u-1<br/>.pure-u-md-1-2<br/>.pure-u-lg-1-4
</div> </div>
<div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> <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 .pure-u-1<br/>.pure-u-md-1-2<br/>.pure-u-lg-1-4
</div> </div>
<div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> <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 .pure-u-1<br/>.pure-u-md-1-2<br/>.pure-u-lg-1-4
</div> </div>
<div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> <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 .pure-u-1<br/>.pure-u-md-1-2<br/>.pure-u-lg-1-4
</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-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 className="pure-u-1 pure-u-md-1-4">.pure-u-1<br/>.pure-u-md-1-4</div>
</div> </div>
</div> </div>
{/* {/*
<div className="content"> <div className="content">
<aside> <aside>
<p> <p>

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

@ -1,4 +1,3 @@
import Link from '@docusaurus/Link';
import React from 'react'; import React from 'react';
import Layout from '../../theme/Layout'; import Layout from '../../theme/Layout';
import Header from '../../../components/Header'; import Header from '../../../components/Header';
@ -9,203 +8,203 @@ const title = 'Tables';
const description = 'Simple CSS for HTML tables.'; const description = 'Simple CSS for HTML tables.';
function Tables() { function Tables() {
return ( return (
<Layout description={description} title={title}> <Layout description={description} title={title}>
<Header description={description} title={title} /> <Header description={description} title={title} />
<div className="content"> <div className="content">
<SectionHeader heading="Default Table" /> <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. 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> <Example>
<table className="pure-table"> <table className="pure-table">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
<th>Make</th> <th>Make</th>
<th>Model</th> <th>Model</th>
<th>Year</th> <th>Year</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>1</td> <td>1</td>
<td>Honda</td> <td>Honda</td>
<td>Accord</td> <td>Accord</td>
<td>2009</td> <td>2009</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Toyota</td> <td>Toyota</td>
<td>Camry</td> <td>Camry</td>
<td>2012</td> <td>2012</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Hyundai</td> <td>Hyundai</td>
<td>Elantra</td> <td>Elantra</td>
<td>2010</td> <td>2010</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</Example> </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. 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> <Example>
<table className="pure-table pure-table-bordered"> <table className="pure-table pure-table-bordered">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
<th>Make</th> <th>Make</th>
<th>Model</th> <th>Model</th>
<th>Year</th> <th>Year</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>1</td> <td>1</td>
<td>Honda</td> <td>Honda</td>
<td>Accord</td> <td>Accord</td>
<td>2009</td> <td>2009</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Toyota</td> <td>Toyota</td>
<td>Camry</td> <td>Camry</td>
<td>2012</td> <td>2012</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Hyundai</td> <td>Hyundai</td>
<td>Elantra</td> <td>Elantra</td>
<td>2010</td> <td>2010</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</Example> </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. 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> <Example>
<table className="pure-table pure-table-horizontal"> <table className="pure-table pure-table-horizontal">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
<th>Make</th> <th>Make</th>
<th>Model</th> <th>Model</th>
<th>Year</th> <th>Year</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>1</td> <td>1</td>
<td>Honda</td> <td>Honda</td>
<td>Accord</td> <td>Accord</td>
<td>2009</td> <td>2009</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Toyota</td> <td>Toyota</td>
<td>Camry</td> <td>Camry</td>
<td>2012</td> <td>2012</td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<td>Hyundai</td> <td>Hyundai</td>
<td>Elantra</td> <td>Elantra</td>
<td>2010</td> <td>2010</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</Example> </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. 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> <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. <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>
<Example> <Example>
<table className="pure-table"> <table className="pure-table">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
<th>Make</th> <th>Make</th>
<th>Model</th> <th>Model</th>
<th>Year</th> <th>Year</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr className="pure-table-odd"> <tr className="pure-table-odd">
<td>1</td> <td>1</td>
<td>Honda</td> <td>Honda</td>
<td>Accord</td> <td>Accord</td>
<td>2009</td> <td>2009</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td>Toyota</td> <td>Toyota</td>
<td>Camry</td> <td>Camry</td>
<td>2012</td> <td>2012</td>
</tr> </tr>
<tr className="pure-table-odd"> <tr className="pure-table-odd">
<td>3</td> <td>3</td>
<td>Hyundai</td> <td>Hyundai</td>
<td>Elantra</td> <td>Elantra</td>
<td>2010</td> <td>2010</td>
</tr> </tr>
<tr> <tr>
<td>4</td> <td>4</td>
<td>Ford</td> <td>Ford</td>
<td>Focus</td> <td>Focus</td>
<td>2008</td> <td>2008</td>
</tr> </tr>
<tr className="pure-table-odd"> <tr className="pure-table-odd">
<td>5</td> <td>5</td>
<td>Nissan</td> <td>Nissan</td>
<td>Sentra</td> <td>Sentra</td>
<td>2011</td> <td>2011</td>
</tr> </tr>
<tr> <tr>
<td>6</td> <td>6</td>
<td>BMW</td> <td>BMW</td>
<td>M3</td> <td>M3</td>
<td>2009</td> <td>2009</td>
</tr> </tr>
<tr className="pure-table-odd"> <tr className="pure-table-odd">
<td>7</td> <td>7</td>
<td>Honda</td> <td>Honda</td>
<td>Civic</td> <td>Civic</td>
<td>2010</td> <td>2010</td>
</tr> </tr>
<tr> <tr>
<td>8</td> <td>8</td>
<td>Kia</td> <td>Kia</td>
<td>Soul</td> <td>Soul</td>
<td>2010</td> <td>2010</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</Example> </Example>
</div> </div>
</Layout> </Layout>
); );
} }
export default Tables; 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 React from 'react';
import Layout from '../../theme/Layout'; import Layout from '../../theme/Layout';
import Header from '../../../components/Header'; import Header from '../../../components/Header';
import CodeBlock from '../../../components/CodeBlock'; import CodeBlock from '../../../components/CodeBlock';
import SectionHeader from '../../../components/SectionHeader'; import SectionHeader from '../../../components/SectionHeader';
import { stripIndent } from 'common-tags';
const title = 'Tools'; const title = 'Tools';
const description = 'Write, manipulate, and do more with CSS.'; const description = 'Write, manipulate, and do more with CSS.';
function Tools() { function Tools() {
return ( return (
<Layout description={description} title={title}> <Layout description={description} title={title}>
<Header description={description} title={title} /> <Header description={description} title={title} />
<div className="content"> <div className="content">
<SectionHeader heading="Installing Pure with npm" /> <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. 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> <p>
<code>require(&#x27;purecss&#x27;)</code> will load an object with the following methods: <code>require(&#x27;purecss&#x27;)</code> will load an object with the following methods:
</p> </p>
<ul> <ul>
<li><code>getFile(name)</code></li> <li><code>getFile(name)</code></li>
&ndash; Retrieve contents of a Pure module file. &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. &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>. 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>. 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> <aside>
<p> <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. 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> </p>
</aside> </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> <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> </p>
</aside>
</div> <SectionHeader heading="Generating Custom Responsive Grids" />
</Layout>
); <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; export default Tools;

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

@ -16,85 +16,83 @@ import '../../static/css/main.css';
let jsLoaded = false; let jsLoaded = false;
function Layout(props) { function Layout(props) {
const {siteConfig = {}} = useDocusaurusContext(); const {siteConfig = {}} = useDocusaurusContext();
const { const {
favicon, favicon,
title: siteTitle, title: siteTitle,
themeConfig: {image: defaultImage}, themeConfig: {image: defaultImage},
url: siteUrl, url: siteUrl,
} = siteConfig; } = siteConfig;
const { const {
children, children,
title, title,
noFooter, description,
description, image,
image, keywords,
keywords, permalink,
pageType, version,
permalink, } = props;
version, const metaTitle = title ? `${title} - ${siteTitle}` : siteTitle;
} = props;
const metaTitle = title ? `${title} - ${siteTitle}` : siteTitle;
const metaImage = image || defaultImage; const metaImage = image || defaultImage;
let metaImageUrl = siteUrl + useBaseUrl(metaImage); let metaImageUrl = siteUrl + useBaseUrl(metaImage);
if (!isInternalUrl(metaImage)) { if (!isInternalUrl(metaImage)) {
metaImageUrl = metaImage; metaImageUrl = metaImage;
} }
const faviconUrl = useBaseUrl(favicon); const faviconUrl = useBaseUrl(favicon);
// load external menu js dynamically // load external menu js dynamically
useEffect(() => { useEffect(() => {
if (!jsLoaded) { if (!jsLoaded) {
const script = document.createElement('script'); const script = document.createElement('script');
script.type = 'text/javascript'; script.type = 'text/javascript';
script.src = '/js/ui.js'; script.src = '/js/ui.js';
document.head.appendChild(script); document.head.appendChild(script);
jsLoaded = true; jsLoaded = true;
} }
}); });
return ( return (
<> <>
<Head> <Head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
{metaTitle && <title>{metaTitle}</title>} {metaTitle && <title>{metaTitle}</title>}
{metaTitle && <meta property="og:title" content={metaTitle} />} {metaTitle && <meta property="og:title" content={metaTitle} />}
{favicon && <link rel="shortcut icon" href={faviconUrl} />} {favicon && <link rel="shortcut icon" href={faviconUrl} />}
{description && <meta name="description" content={description} />} {description && <meta name="description" content={description} />}
{description && ( {description && (
<meta property="og:description" content={description} /> <meta property="og:description" content={description} />
)} )}
{version && <meta name="docsearch:version" content={version} />} {version && <meta name="docsearch:version" content={version} />}
{keywords && keywords.length && ( {keywords && keywords.length && (
<meta name="keywords" content={keywords.join(',')} /> <meta name="keywords" content={keywords.join(',')} />
)} )}
{metaImage && <meta property="og:image" content={metaImageUrl} />} {metaImage && <meta property="og:image" content={metaImageUrl} />}
{metaImage && ( {metaImage && (
<meta property="twitter:image" content={metaImageUrl} /> <meta property="twitter:image" content={metaImageUrl} />
)} )}
{metaImage && ( {metaImage && (
<meta name="twitter:image:alt" content={`Image for ${metaTitle}`} /> <meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
)} )}
{permalink && ( {permalink && (
<meta property="og:url" content={siteUrl + permalink} /> <meta property="og:url" content={siteUrl + permalink} />
)} )}
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200" />
</Head> </Head>
<div id="layout"> <div id="layout">
<Menu /> <Menu />
<div id="main" className={(title || 'home').toLowerCase()}> <div id="main" className={(title || 'home').toLowerCase()}>
{children} {children}
<Footer siteConfig={siteConfig} /> <Footer siteConfig={siteConfig} />
</div>
</div> </div>
</div> </>
</> );
);
} }
export default Layout; 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) { (function (window, document) {
'use strict'; 'use strict';
@ -13,150 +14,149 @@
ARIA_HIDDEN = 'aria-hidden', ARIA_HIDDEN = 'aria-hidden',
MENU_OPEN = 0, MENU_OPEN = 0,
MENU_CLOSED = 1, MENU_CLOSED = 1,
MENU_PARENT_CLASS_NAME = 'pure-menu-has-children',
MENU_ACTIVE_SELECTOR = '.pure-menu-active', MENU_ACTIVE_SELECTOR = '.pure-menu-active',
MENU_LINK_SELECTOR = '.pure-menu-link', MENU_LINK_SELECTOR = '.pure-menu-link',
MENU_SELECTOR = '.pure-menu-children', MENU_SELECTOR = '.pure-menu-children',
DISMISS_EVENT = (window.hasOwnProperty && DISMISS_EVENT = (window.hasOwnProperty &&
window.hasOwnProperty('ontouchstart')) ? window.hasOwnProperty('ontouchstart')) ?
'touchstart' : 'mousedown', 'touchstart' : 'mousedown',
ARROW_KEYS_ENABLED = true, ARROW_KEYS_ENABLED = true,
ddm = this; // drop down menu ddm = this; // drop down menu
this._state = MENU_CLOSED; this._state = MENU_CLOSED;
this.show = function () { this.show = function () {
if (this._state !== MENU_OPEN) { if (this._state !== MENU_OPEN) {
this._dropdownParent.classList.add(ACTIVE_CLASS_NAME); this._dropdownParent.classList.add(ACTIVE_CLASS_NAME);
this._menu.setAttribute(ARIA_HIDDEN, false); this._menu.setAttribute(ARIA_HIDDEN, false);
this._state = MENU_OPEN; 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;
} }
}; nextLink = (nextSibling) ? nextSibling.querySelector('.pure-menu-link') : null;
// if there is no currently focused link, focus the first one
this.hide = function () { if (!currentLink) {
if (this._state !== MENU_CLOSED) { ddm._menu.querySelector('.pure-menu-link').focus();
this._dropdownParent.classList.remove(ACTIVE_CLASS_NAME);
this._menu.setAttribute(ARIA_HIDDEN, true);
this._link.focus();
this._state = MENU_CLOSED;
} }
}; else if (nextLink) {
nextLink.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');
} }
); }
[].forEach.call( // Go to the previous link on up arrow
this._menu.querySelectorAll('a'), else if (ARROW_KEYS_ENABLED && e.keyCode === 38) {
function(el){ /* Up arrow */
el.setAttribute(ARIA_ROLE, 'menuitem'); 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
// Toggle on click if (!currentLink) {
this._link.addEventListener('click', function (e) { ddm._menu.querySelector('.pure-menu-item:last-child .pure-menu-link').focus();
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;
} }
// 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 // Dismiss an open menu on outside event
if (ddm._menu.querySelector(MENU_ACTIVE_SELECTOR)) { document.addEventListener(DISMISS_EVENT, function (e) {
return; var target = e.target;
} if (target !== ddm._link && !ddm._menu.contains(target)) {
ddm.hide();
currentLink = ddm._menu.querySelector(':focus'); ddm._link.blur();
}
// 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();
}
});
} }

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

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

4
test/index.js
View File

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