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

52
Gruntfile.js
View File

@ -1,8 +1,8 @@
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'),
@ -233,28 +233,28 @@ grunt.initConfig({
} }
} }
} }
}); });
// -- Main Tasks --------------------------------------------------------------- // -- Main Tasks ---------------------------------------------------------------
// npm tasks. // npm tasks.
grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-csslint'); grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-compress'); grunt.loadNpmTasks('grunt-contrib-compress');
grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-css-selectors'); grunt.loadNpmTasks('grunt-css-selectors');
grunt.loadNpmTasks('grunt-postcss'); grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-pure-grids'); grunt.loadNpmTasks('grunt-pure-grids');
// Local tasks. // Local tasks.
grunt.loadTasks('tasks/'); grunt.loadTasks('tasks/');
grunt.registerTask('default', ['test', 'build']); grunt.registerTask('default', ['test', 'build']);
grunt.registerTask('test', ['csslint']); grunt.registerTask('test', ['csslint']);
grunt.registerTask('build', [ grunt.registerTask('build', [
'clean:build', 'clean:build',
'copy:build', 'copy:build',
'pure_grids', 'pure_grids',
@ -264,17 +264,17 @@ grunt.registerTask('build', [
'postcss', 'postcss',
'cssmin', 'cssmin',
'license' 'license'
]); ]);
// Makes the `watch` task run a build first. // Makes the `watch` task run a build first.
grunt.renameTask('watch', 'observe'); grunt.renameTask('watch', 'observe');
grunt.registerTask('watch', ['default', 'observe']); grunt.registerTask('watch', ['default', 'observe']);
grunt.registerTask('release', [ grunt.registerTask('release', [
'default', 'default',
'clean:release', 'clean:release',
'copy:release', 'copy:release',
'compress: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>

4
site/components/SectionHeader.js
View File

@ -1,10 +1,10 @@
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 (

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",

2
site/src/index.js
View File

@ -1,5 +1,5 @@
const path = require('path'); const path = require('path');
module.exports = function(context, options) { module.exports = function() {
return { return {
name: 'pure-theme', name: 'pure-theme',

7
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';
@ -22,7 +21,7 @@ function Base() {
</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>
@ -52,7 +51,7 @@ function Base() {
</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>
@ -62,7 +61,7 @@ function Base() {
</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" />

1
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';

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>

45
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 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 styling .pure-form &lt;inputs&gt;, &lt;fieldsets&gt;, and &lt;legends&gt;, as well as layout
rules such as vertical alignments. 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,15 +127,16 @@ function Extend() {
</p> </p>
<CodeBlock> <CodeBlock>
{`<!-- Button to trigger modal --> {stripIndent`
<p> <!-- Button to trigger modal -->
<p>
<a href="#myModal" role="button" className="pure-button-primary pure-button" data-toggle="modal"> <a href="#myModal" role="button" className="pure-button-primary pure-button" data-toggle="modal">
Launch Pure + Bootstrap Modal Launch Pure + Bootstrap Modal
</a> </a>
</p> </p>
<!-- Modal --> <!-- Modal -->
<!-- <!--
* Bootstrap v2.3.2 * Bootstrap v2.3.2
* *
* Copyright 2012 Twitter, Inc * Copyright 2012 Twitter, Inc
@ -139,7 +145,7 @@ function Extend() {
* *
* 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>
@ -168,9 +174,10 @@ function Extend() {
<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>

78
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-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 class="pure-u-1-3"><p>Thirds</p></div> <div class="pure-u-1-3"><p>Thirds</p></div>
</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-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 class="pure-u-1-3"> ... </div> <div class="pure-u-1-3"> ... </div>
</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-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 class="pure-u-1 pure-u-md-1-3"> ... </div> <div class="pure-u-1 pure-u-md-1-3"> ... </div>
</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`
<style>
.l-box { .l-box {
padding: 1em; 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`
<style>
.pure-g > div { .pure-g > div {
box-sizing: border-box; box-sizing: border-box;
} }
.l-box { .l-box {
padding: 1em; 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,
.pure-g [class *= "pure-u"] {
/* Set your content font stack here: */ /* Set your content font stack here: */
font-family: Georgia, Times, "Times New Roman", serif; 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>
{/* {/*

5
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,7 +19,7 @@ const renderModuleSize = (filesizes) => {
</Link> </Link>
</div> </div>
)); ));
} };
function Home() { function Home() {
const context = useDocusaurusContext(); const context = useDocusaurusContext();
@ -28,7 +28,6 @@ function Home() {
customFields: { customFields: {
moduleSizes, moduleSizes,
PURE_DOWNLOAD_SNIPPET, PURE_DOWNLOAD_SNIPPET,
pureVersion,
}, },
organizationName, organizationName,
projectName, projectName,

67
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']
} }
]; ];

14
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.';
@ -50,7 +48,7 @@ function Start() {
</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">
@ -65,11 +63,13 @@ function Start() {
</p> </p>
<CodeBlock wrap={true}> <CodeBlock wrap={true}>
{`<div class="pure-g"> {stripIndent`
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div> <div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div> <div 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>
`}
</CodeBlock> </CodeBlock>
</div> </div>

1
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';

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

@ -1,9 +1,9 @@
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.';
@ -84,7 +84,8 @@ function Tools() {
</p> </p>
<CodeBlock> <CodeBlock>
{`grunt.initConfig({ {stripIndent`
grunt.initConfig({
pure_grids: { pure_grids: {
dest : "build/public/css/main-grid.css", dest : "build/public/css/main-grid.css",
options: { options: {
@ -97,7 +98,8 @@ function Tools() {
} }
} }
} }
});`} });
`}
</CodeBlock> </CodeBlock>
<h3>Via Rework</h3> <h3>Via Rework</h3>
@ -117,20 +119,22 @@ function Tools() {
</p> </p>
<CodeBlock> <CodeBlock>
{`import rework from 'rework'; {stripIndent`
import pureGrids from 'rework-pure-grids'; import rework from 'rework';
import pureGrids from 'rework-pure-grids';
const css = rework('').use(pureGrids.units({ const css = rework('').use(pureGrids.units({
mediaQueries: { mediaQueries: {
sm: 'screen and (min-width: 35.5em)', // 568px sm: 'screen and (min-width: 35.5em)', // 568px
md: 'screen and (min-width: 48em)', // 768px md: 'screen and (min-width: 48em)', // 768px
lg: 'screen and (min-width: 64em)', // 1024px lg: 'screen and (min-width: 64em)', // 1024px
xl: 'screen and (min-width: 80em)' // 1280px xl: 'screen and (min-width: 80em)' // 1280px
} }
})).toString(); })).toString();
// This will log-out the grid CSS. // This will log-out the grid CSS.
console.log(css);`} console.log(css);
`}
</CodeBlock> </CodeBlock>
<SectionHeader heading="Mutating Selectors" /> <SectionHeader heading="Mutating Selectors" />
@ -158,7 +162,8 @@ console.log(css);`}
</p> </p>
<CodeBlock> <CodeBlock>
{`grunt.initConfig({ {stripIndent`
grunt.initConfig({
css_selectors: { css_selectors: {
options: { options: {
mutations: [ mutations: [
@ -169,7 +174,8 @@ console.log(css);`}
'dest/foo-prefixed.css': ['src/foo.css'], 'dest/foo-prefixed.css': ['src/foo.css'],
} }
} }
});`} });
`}
</CodeBlock> </CodeBlock>
<h3>Via Rework</h3> <h3>Via Rework</h3>
@ -189,16 +195,18 @@ console.log(css);`}
</p> </p>
<CodeBlock> <CodeBlock>
{`import rework from 'rework'; {stripIndent`
import selectors from 'rework-mutate-selectors'; import rework from 'rework';
import selectors from 'rework-mutate-selectors';
const css = rework(inputCSS) const css = rework(inputCSS)
.use(selectors.prefix('.foo')) .use(selectors.prefix('.foo'))
.use(selectors.replace(/^\.pure/g, '.bar')) .use(selectors.replace(/^\.pure/g, '.bar'))
.toString(); .toString();
// This will log-out the resulting CSS. // This will log-out the resulting CSS.
console.log(css);`} console.log(css);
`}
</CodeBlock> </CodeBlock>
<aside> <aside>

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

@ -26,11 +26,9 @@ function Layout(props) {
const { const {
children, children,
title, title,
noFooter,
description, description,
image, image,
keywords, keywords,
pageType,
permalink, permalink,
version, version,
} = props; } = props;

2
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,7 +14,6 @@
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',

3
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+/),

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'));