diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..77d428a --- /dev/null +++ b/.eslintignore @@ -0,0 +1,9 @@ +/build/ +/node_modules/ +/release/ + +# site files +/site/.docusaurus +/site/build +/site/node_modules +/site/static/css/pure diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..68f600d --- /dev/null +++ b/.eslintrc.js @@ -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' + } + } +}; diff --git a/.gitignore b/.gitignore index dbe6a3e..68824f1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .DS_Store +.nyc_output/ artifacts/ build/ coverage/ diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..c1ca392 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +package-lock = false diff --git a/.travis.yml b/.travis.yml index bd6f6e9..7a483a1 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,11 +1,10 @@ language: node_js node_js: - 12 -branches: - only: - - master script: - - git config --global user.name "${GH_NAME}" - - git config --global user.email "${GH_EMAIL}" - - echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc - - cd site && npm install && GIT_USER="${GH_NAME}" npm run deploy + - npm t +deploy: + provider: script + script: scripts/deploy.sh + on: + branch: master \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index a20d177..e98fa2a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,280 +1,280 @@ module.exports = function (grunt) { -// -- Config ------------------------------------------------------------------- + // -- Config ------------------------------------------------------------------- -grunt.initConfig({ + grunt.initConfig({ - nick : 'pure', - pkg : grunt.file.readJSON('package.json'), + nick : 'pure', + pkg : grunt.file.readJSON('package.json'), - // -- Clean Config --------------------------------------------------------- + // -- Clean Config --------------------------------------------------------- - clean: { - build : ['build/'], - build_res: ['build/*-r.css'], - release : ['release/<%= pkg.version %>/'] - }, - - // -- Copy Config ---------------------------------------------------------- - - copy: { - build: { - src : 'src/**/css/*.css', - dest : 'build/', - expand : true, - flatten: true + clean: { + build : ['build/'], + build_res: ['build/*-r.css'], + release : ['release/<%= pkg.version %>/'] }, - release: { - src : '{LICENSE.md,README.md,HISTORY.md}', - dest: 'build/' - } - }, + // -- Copy Config ---------------------------------------------------------- - // -- Concat Config -------------------------------------------------------- - - concat: { - build: { - files: [ - {'build/base.css': [ - 'node_modules/normalize.css/normalize.css', - 'build/base.css' - ]}, - - {'build/buttons.css': [ - 'build/buttons-core.css', - 'build/buttons.css' - ]}, - - {'build/forms-nr.css': [ - 'build/forms.css' - ]}, - - {'build/forms.css': [ - 'build/forms-nr.css', - 'build/forms-r.css' - ]}, - - {'build/grids.css': [ - 'build/grids-core.css', - 'build/grids-units.css' - ]}, - - {'build/menus.css': [ - 'build/menus-core.css', - 'build/menus-horizontal.css', - 'build/menus-dropdown.css', - 'build/menus-scrollable.css', - 'build/menus-skin.css', - ]}, - - // Rollups - - {'build/<%= nick %>.css': [ - 'build/base.css', - 'build/grids.css', - 'build/buttons.css', - 'build/forms.css', - 'build/menus.css', - 'build/tables.css' - ]}, - - {'build/<%= nick %>-nr.css': [ - 'build/base.css', - 'build/grids.css', - 'build/buttons.css', - 'build/forms-nr.css', - 'build/menus.css', - 'build/tables.css' - ]} - ] - } - }, - - // -- PostCSS Config -------------------------------------------------------- - - postcss: { - options: { - processors: [ - require('autoprefixer')() - ] - }, - dist: { - src: 'build/*.css' - } - }, - - // -- CSSLint Config ------------------------------------------------------- - - csslint: { - options: { - csslintrc: '.csslintrc' - }, - - base : ['src/base/css/*.css'], - buttons: ['src/buttons/css/*.css'], - forms : ['src/forms/css/*.css'], - grids : ['src/grids/css/*.css'], - menus : ['src/menus/css/*.css'], - tables : ['src/tables/css/*.css'] - }, - - // -- CSSMin Config -------------------------------------------------------- - - cssmin: { - options: { - noAdvanced: true - }, - - files: { - expand: true, - src : 'build/*.css', - ext : '-min.css' - } - }, - - // -- Compress Config ------------------------------------------------------ - - compress: { - release: { - options: { - archive: 'release/<%= pkg.version %>/<%= nick %>-<%= pkg.version %>.tar.gz' + copy: { + build: { + src : 'src/**/css/*.css', + dest : 'build/', + expand : true, + flatten: true }, - expand : true, - flatten: true, - src : 'build/*', - dest : '<%= nick %>/<%= pkg.version %>/' - } - }, - - // -- License Config ------------------------------------------------------- - - license: { - normalize: { - options: { - banner: [ - '/*!', - 'normalize.css v<%= pkg.devDependencies["normalize-css"] %> | MIT License | git.io/normalize', - 'Copyright (c) Nicolas Gallagher and Jonathan Neal', - '*/\n' - ].join('\n') - }, - - expand: true, - cwd : 'build/', - src : ['base*.css', '<%= nick %>*.css'] - }, - - yahoo: { - options: { - banner: [ - '/*!', - 'Pure v<%= pkg.version %>', - 'Copyright 2013 Yahoo!', - 'Licensed under the BSD License.', - 'https://github.com/pure-css/pure/blob/master/LICENSE.md', - '*/\n' - ].join('\n') - }, - - expand: true, - src : ['build/*.css'] - } - }, - - // -- Pure Grids Units Config ---------------------------------------------- - - pure_grids: { - default_units: { - dest: 'build/grids-units.css', - - options: { - units: [5, 24] + release: { + src : '{LICENSE.md,README.md,HISTORY.md}', + dest: 'build/' } }, - responsive: { - dest: 'build/grids-responsive.css', + // -- Concat Config -------------------------------------------------------- + concat: { + build: { + files: [ + {'build/base.css': [ + 'node_modules/normalize.css/normalize.css', + 'build/base.css' + ]}, + + {'build/buttons.css': [ + 'build/buttons-core.css', + 'build/buttons.css' + ]}, + + {'build/forms-nr.css': [ + 'build/forms.css' + ]}, + + {'build/forms.css': [ + 'build/forms-nr.css', + 'build/forms-r.css' + ]}, + + {'build/grids.css': [ + 'build/grids-core.css', + 'build/grids-units.css' + ]}, + + {'build/menus.css': [ + 'build/menus-core.css', + 'build/menus-horizontal.css', + 'build/menus-dropdown.css', + 'build/menus-scrollable.css', + 'build/menus-skin.css', + ]}, + + // Rollups + + {'build/<%= nick %>.css': [ + 'build/base.css', + 'build/grids.css', + 'build/buttons.css', + 'build/forms.css', + 'build/menus.css', + 'build/tables.css' + ]}, + + {'build/<%= nick %>-nr.css': [ + 'build/base.css', + 'build/grids.css', + 'build/buttons.css', + 'build/forms-nr.css', + 'build/menus.css', + 'build/tables.css' + ]} + ] + } + }, + + // -- PostCSS Config -------------------------------------------------------- + + postcss: { options: { - mediaQueries: { - sm: 'screen and (min-width: 35.5em)', // 568px - md: 'screen and (min-width: 48em)', // 768px - lg: 'screen and (min-width: 64em)', // 1024px - xl: 'screen and (min-width: 80em)' // 1280px + processors: [ + require('autoprefixer')() + ] + }, + dist: { + src: 'build/*.css' + } + }, + + // -- CSSLint Config ------------------------------------------------------- + + csslint: { + options: { + csslintrc: '.csslintrc' + }, + + base : ['src/base/css/*.css'], + buttons: ['src/buttons/css/*.css'], + forms : ['src/forms/css/*.css'], + grids : ['src/grids/css/*.css'], + menus : ['src/menus/css/*.css'], + tables : ['src/tables/css/*.css'] + }, + + // -- CSSMin Config -------------------------------------------------------- + + cssmin: { + options: { + noAdvanced: true + }, + + files: { + expand: true, + src : 'build/*.css', + ext : '-min.css' + } + }, + + // -- Compress Config ------------------------------------------------------ + + compress: { + release: { + options: { + archive: 'release/<%= pkg.version %>/<%= nick %>-<%= pkg.version %>.tar.gz' + }, + + expand : true, + flatten: true, + src : 'build/*', + dest : '<%= nick %>/<%= pkg.version %>/' + } + }, + + // -- License Config ------------------------------------------------------- + + license: { + normalize: { + options: { + banner: [ + '/*!', + 'normalize.css v<%= pkg.devDependencies["normalize-css"] %> | MIT License | git.io/normalize', + 'Copyright (c) Nicolas Gallagher and Jonathan Neal', + '*/\n' + ].join('\n') + }, + + expand: true, + cwd : 'build/', + src : ['base*.css', '<%= nick %>*.css'] + }, + + yahoo: { + options: { + banner: [ + '/*!', + 'Pure v<%= pkg.version %>', + 'Copyright 2013 Yahoo!', + 'Licensed under the BSD License.', + 'https://github.com/pure-css/pure/blob/master/LICENSE.md', + '*/\n' + ].join('\n') + }, + + expand: true, + src : ['build/*.css'] + } + }, + + // -- Pure Grids Units Config ---------------------------------------------- + + pure_grids: { + default_units: { + dest: 'build/grids-units.css', + + options: { + units: [5, 24] + } + }, + + responsive: { + dest: 'build/grids-responsive.css', + + options: { + mediaQueries: { + sm: 'screen and (min-width: 35.5em)', // 568px + md: 'screen and (min-width: 48em)', // 768px + lg: 'screen and (min-width: 64em)', // 1024px + xl: 'screen and (min-width: 80em)' // 1280px + } + } + } + }, + + // -- CSS Selectors Config ------------------------------------------------- + + css_selectors: { + base: { + src : 'build/base.css', + dest: 'build/base-context.css', + + options: { + mutations: [{prefix: '.pure'}] + } + } + }, + + // -- Watch/Observe Config ------------------------------------------------- + + observe: { + src: { + files: 'src/**/css/*.css', + tasks: ['test', 'suppress', 'build'], + + options: { + interrupt: true } } } - }, + }); - // -- CSS Selectors Config ------------------------------------------------- + // -- Main Tasks --------------------------------------------------------------- - css_selectors: { - base: { - src : 'build/base.css', - dest: 'build/base-context.css', + // npm tasks. + grunt.loadNpmTasks('grunt-contrib-clean'); + grunt.loadNpmTasks('grunt-contrib-copy'); + grunt.loadNpmTasks('grunt-contrib-concat'); + grunt.loadNpmTasks('grunt-contrib-csslint'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.loadNpmTasks('grunt-contrib-compress'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-css-selectors'); + grunt.loadNpmTasks('grunt-postcss'); + grunt.loadNpmTasks('grunt-pure-grids'); - options: { - mutations: [{prefix: '.pure'}] - } - } - }, + // Local tasks. + grunt.loadTasks('tasks/'); - // -- Watch/Observe Config ------------------------------------------------- + grunt.registerTask('default', ['test', 'build']); + grunt.registerTask('test', ['csslint']); + grunt.registerTask('build', [ + 'clean:build', + 'copy:build', + 'pure_grids', + 'concat:build', + 'clean:build_res', + 'css_selectors:base', + 'postcss', + 'cssmin', + 'license' + ]); - observe: { - src: { - files: 'src/**/css/*.css', - tasks: ['test', 'suppress', 'build'], + // Makes the `watch` task run a build first. + grunt.renameTask('watch', 'observe'); + grunt.registerTask('watch', ['default', 'observe']); - options: { - interrupt: true - } - } - } -}); - -// -- Main Tasks --------------------------------------------------------------- - -// npm tasks. -grunt.loadNpmTasks('grunt-contrib-clean'); -grunt.loadNpmTasks('grunt-contrib-copy'); -grunt.loadNpmTasks('grunt-contrib-concat'); -grunt.loadNpmTasks('grunt-contrib-csslint'); -grunt.loadNpmTasks('grunt-contrib-cssmin'); -grunt.loadNpmTasks('grunt-contrib-compress'); -grunt.loadNpmTasks('grunt-contrib-watch'); -grunt.loadNpmTasks('grunt-css-selectors'); -grunt.loadNpmTasks('grunt-postcss'); -grunt.loadNpmTasks('grunt-pure-grids'); - -// Local tasks. -grunt.loadTasks('tasks/'); - -grunt.registerTask('default', ['test', 'build']); -grunt.registerTask('test', ['csslint']); -grunt.registerTask('build', [ - 'clean:build', - 'copy:build', - 'pure_grids', - 'concat:build', - 'clean:build_res', - 'css_selectors:base', - 'postcss', - 'cssmin', - 'license' -]); - -// Makes the `watch` task run a build first. -grunt.renameTask('watch', 'observe'); -grunt.registerTask('watch', ['default', 'observe']); - -grunt.registerTask('release', [ - 'default', - 'clean:release', - 'copy:release', - 'compress:release' -]); + grunt.registerTask('release', [ + 'default', + 'clean:release', + 'copy:release', + 'compress:release' + ]); }; diff --git a/package.json b/package.json index a257869..5be2570 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,9 @@ "url": "git://github.com/pure-css/pure.git" }, "scripts": { + "lint": "eslint . --ext .js", "prepare": "grunt release", + "pretest": "npm run lint", "site:build": "npm run pretest && cd site && npm install && npm run build", "site:start": "cd site && npm run start", "test": "grunt test && tap test/*.js" @@ -14,6 +16,8 @@ "files": "build/", "devDependencies": { "autoprefixer": "^9.6.1", + "eslint": "^7.0.0", + "eslint-plugin-react": "^7.20.0", "grunt": "^1.0.1", "grunt-cli": "^1.2.0", "grunt-contrib-clean": "^2.0.0", @@ -26,6 +30,7 @@ "grunt-css-selectors": "^1.1.0", "grunt-postcss": "^0.9.0", "grunt-pure-grids": "^2.0.0", + "husky": "^4.2.5", "normalize.css": "^8.0.1", "tap": "^14.4.1" }, @@ -55,5 +60,10 @@ "ie >= 10", "iOS >= 12", "Android >= 6" - ] + ], + "husky": { + "hooks": { + "pre-commit": "npm test" + } + } } diff --git a/scripts/deploy.sh b/scripts/deploy.sh new file mode 100755 index 0000000..82e5592 --- /dev/null +++ b/scripts/deploy.sh @@ -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 \ No newline at end of file diff --git a/site/components/Footer.js b/site/components/Footer.js index b273c39..7b2e045 100644 --- a/site/components/Footer.js +++ b/site/components/Footer.js @@ -1,5 +1,4 @@ import React from 'react'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; function Footer({ siteConfig }) { const { customFields, organizationName, projectName } = siteConfig; diff --git a/site/components/Menu.js b/site/components/Menu.js index abbb169..caa120c 100644 --- a/site/components/Menu.js +++ b/site/components/Menu.js @@ -1,7 +1,7 @@ import Link from '@docusaurus/Link'; import React from 'react'; -function Menu(props) { +function Menu() { return ( <> @@ -46,9 +46,11 @@ function Menu(props) {
  • Extend
    • + {/*
  • Blog
    • + */}
  • Releases
    • diff --git a/site/components/SectionHeader.js b/site/components/SectionHeader.js index ea3398f..365f823 100644 --- a/site/components/SectionHeader.js +++ b/site/components/SectionHeader.js @@ -1,11 +1,11 @@ import React from 'react'; - function SectionHeader({ heading, TagName = 'h2' }) { +function SectionHeader({ heading, TagName = 'h2' }) { // Remove HTML entities, and all chars except whitespace, word chars, and from the `heading`. const id = heading.toLowerCase() - .replace(/&[^\s;]+;?/g, '') - .replace(/[^\s\w\-]+/g, '') - .replace(/\s+/g, '-'); + .replace(/&[^\s;]+;?/g, '') + .replace(/[^\s\w-]+/g, '') + .replace(/\s+/g, '-'); return ( diff --git a/site/docusaurus.config.js b/site/docusaurus.config.js index c6c63d8..59d6f2f 100644 --- a/site/docusaurus.config.js +++ b/site/docusaurus.config.js @@ -2,26 +2,26 @@ const { moduleSizes, PURE_DOWNLOAD_SNIPPET } = require('./lib/pure'); const { version } = require('../package.json'); module.exports = { - title: 'Pure', - tagline: 'Pure is a ridiculously tiny CSS library you can use to start any web project.', - url: 'https://pure-css.github.io', - baseUrl: '/', - favicon: 'img/favicon.ico', - organizationName: 'pure-css', - projectName: 'pure-css.github.io', - plugins: [ - '@docusaurus/plugin-content-pages', - '@docusaurus/plugin-google-analytics', - ], - themeConfig: { - googleAnalytics: { - trackingID: 'UA-41480445-1', - anonymizeIP: true, + title: 'Pure', + tagline: 'Pure is a ridiculously tiny CSS library you can use to start any web project.', + url: 'https://pure-css.github.io', + baseUrl: '/', + favicon: 'img/favicon.ico', + organizationName: 'pure-css', + projectName: 'pure-css.github.io', + plugins: [ + '@docusaurus/plugin-content-pages', + '@docusaurus/plugin-google-analytics', + ], + themeConfig: { + googleAnalytics: { + trackingID: 'UA-41480445-1', + anonymizeIP: true, + }, + }, + customFields: { + PURE_DOWNLOAD_SNIPPET, + moduleSizes: moduleSizes(), + pureVersion: version, }, - }, - customFields: { - PURE_DOWNLOAD_SNIPPET, - moduleSizes: moduleSizes(), - pureVersion: version, - }, }; diff --git a/site/lib/pure.js b/site/lib/pure.js index 4c81b58..78e91b5 100644 --- a/site/lib/pure.js +++ b/site/lib/pure.js @@ -18,8 +18,8 @@ module.exports.moduleSizes = function moduleSizes() { const files = fs.readdirSync(pureDir); // collect all minified module files - const modules = files.filter(file => (/\-min\.css$/).test(file)) - .map(file => file.replace(/\-min\.css$/, '')); + const modules = files.filter(file => (/-min\.css$/).test(file)) + .map(file => file.replace(/-min\.css$/, '')); // get sizes across all modules const moduleSizes = modules.map(module => { @@ -33,4 +33,4 @@ module.exports.moduleSizes = function moduleSizes() { map[modules[i]] = size; return map; }, {}); -} +}; diff --git a/site/package-lock.json b/site/package-lock.json index 390383d..ca69f4a 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -2591,6 +2591,11 @@ "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==" }, + "common-tags": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz", + "integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==" + }, "commondir": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", diff --git a/site/package.json b/site/package.json index ee8b15d..8eed474 100644 --- a/site/package.json +++ b/site/package.json @@ -17,6 +17,7 @@ "@docusaurus/plugin-content-pages": "^2.0.0-alpha.53", "@docusaurus/plugin-google-analytics": "^2.0.0-alpha.53", "classnames": "^2.2.6", + "common-tags": "^1.8.0", "gzip-size": "^5.1.1", "js-beautify": "^1.11.0", "react": "^16.8.4", diff --git a/site/src/index.js b/site/src/index.js index 7ef9567..482f3c1 100644 --- a/site/src/index.js +++ b/site/src/index.js @@ -1,15 +1,15 @@ const path = require('path'); -module.exports = function(context, options) { - return { - name: 'pure-theme', +module.exports = function() { + return { + name: 'pure-theme', - getThemePath() { - return path.resolve(__dirname, './theme'); - }, + getThemePath() { + return path.resolve(__dirname, './theme'); + }, - getClientModules() { - return []; - }, + getClientModules() { + return []; + }, - }; + }; }; diff --git a/site/src/pages/base/index.js b/site/src/pages/base/index.js index 170b12a..07abf43 100644 --- a/site/src/pages/base/index.js +++ b/site/src/pages/base/index.js @@ -1,5 +1,4 @@ import Link from '@docusaurus/Link'; -import classnames from 'classnames'; import React from 'react'; import Layout from '../../theme/Layout'; import Header from '../../../components/Header'; @@ -10,73 +9,73 @@ const title = 'Base'; const description = 'Leveraging Normalize.css, an HTML5-ready alternative to CSS resets.'; function Base() { - return ( - -
    + return ( + +
    -
    - +
    + -

    +

    All modules in Pure build on top of Normalize.css. It's our foundational layer to maintain some degree of cross-browser consistency. You can pull in Normalize.css by adding this <link> element on your page: -

    +

    - - {``} - + + {''} + -

    A bit about Normalize.css

    +

    A bit about Normalize.css

    -

    - Normalize.css is an open-source project by Nicolas Gallagher and Jonathan Neal. In their own words: -

    +

    + Normalize.css is an open-source project by Nicolas Gallagher and Jonathan Neal. In their own words: +

    -
    +
    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 comes with great documentation and a thorough guide explaining how it differs from a traditional reset. -

    +

    - + -

    +

    In addition to Normalize.css rules, Pure's Base module contains some common styles that are used by most websites. -

    +

    -

    Hiding Elements

    +

    Hiding Elements

    -

    +

    Add the hidden attribute to an HTML element to hide it from the screen via display: none !important;. Alternatively, for compatibility with old IE, you may use the CSS classname .hidden. -

    +

    - - {``} - + + {''} + -

    Responsive Images

    +

    Responsive Images

    -

    +

    Add the .pure-img class name to an <img> element to make it scale with the viewport. This is handy when building responsive websites. -

    +

    - - {``} - + + {''} + - + -

    +

    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. -

    +

    -

    +

    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 Forms, Tables, and Menus. -

    -
    - - ); +

    +
    + + ); } export default Base; diff --git a/site/src/pages/buttons/index.js b/site/src/pages/buttons/index.js index 489874e..6e9cd36 100644 --- a/site/src/pages/buttons/index.js +++ b/site/src/pages/buttons/index.js @@ -1,4 +1,3 @@ -import Link from '@docusaurus/Link'; import React from 'react'; import Layout from '../../theme/Layout'; import Header from '../../../components/Header'; @@ -10,71 +9,71 @@ const title = 'Buttons'; const description = 'Simple CSS for buttons.'; function Buttons() { - return ( - -
    + return ( + +
    -
    - +
    + -

    +

    To create a Pure Button, add the pure-button classname to any <a> or <button> element. -

    +

    - - A Pure Button - - + + A Pure Button + + - + -

    +

    To mark a button as disabled, add the pure-button-disabled classname alongside pure-button. Alternatively, add the "disabled" attribute directly to your button. -

    +

    - - - - + + + + - + -

    +

    To style a button so that it appears "pressed", add the pure-button-active classname alongside pure-button. -

    +

    - - An Active Button - - + + An Active Button + + - + -

    +

    To indicate that a button represents a primary action, add the pure-button-primary classname alongside pure-button. -

    +

    - - A Primary Button - - + + A Primary Button + + - + -

    +

    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. -

    +

    -

    +

    To customize button styles, you should group your custom CSS into a class such as button-foo, which you can then add to an element that already has the pure-button classname. Here are some examples. -

    +

    -

    Colored buttons with rounded corners

    +

    Colored buttons with rounded corners

    - -
    - + {stripIndent` + -... + ... -
    -
    -
    ...
    -
    -
    -
    ...
    -
    -
    `} +
    +
    +
    ...
    +
    +
    +
    ...
    +
    +
    + `}

    @@ -756,21 +764,23 @@ function Grids() {

    -{` + {stripIndent` + -... + ... -
    -
    ...
    -
    ...
    -
    `} +
    +
    ...
    +
    ...
    +
    + `}

    @@ -784,18 +794,20 @@ function Grids() {

    -{``} + {stripIndent` + + `} @@ -805,9 +817,11 @@ html, button, input, select, textarea,

    -{` - -`} + {stripIndent` + + + + `} {/* diff --git a/site/src/pages/index.js b/site/src/pages/index.js index 4055dad..5880f5a 100644 --- a/site/src/pages/index.js +++ b/site/src/pages/index.js @@ -5,7 +5,7 @@ import React from 'react'; import Layout from '@theme/Layout'; import CodeBlock from '../../components/CodeBlock'; import { filePercent, fileSize } from '../../lib/utils'; -import styles from './styles.css'; +import './styles.css'; const renderModuleSize = (filesizes) => { const modules = ['base', 'grids', 'forms', 'buttons', 'tables', 'menus']; @@ -19,141 +19,140 @@ const renderModuleSize = (filesizes) => {
    )); -} +}; function Home() { - const context = useDocusaurusContext(); - const {siteConfig = {}} = context; - const { - customFields: { - moduleSizes, - PURE_DOWNLOAD_SNIPPET, - pureVersion, - }, - organizationName, - projectName, - } = siteConfig; - const renderSize = renderModuleSize(moduleSizes); - return ( - -
    -
    - Pure + const context = useDocusaurusContext(); + const {siteConfig = {}} = context; + const { + customFields: { + moduleSizes, + PURE_DOWNLOAD_SNIPPET, + }, + organizationName, + projectName, + } = siteConfig; + const renderSize = renderModuleSize(moduleSizes); + return ( + +
    +
    + Pure -

    A set of small, responsive CSS modules that you can use in every web project.

    -
    +

    A set of small, responsive CSS modules that you can use in every web project.

    +
    -
    - {PURE_DOWNLOAD_SNIPPET} +
    + {PURE_DOWNLOAD_SNIPPET} -

    - Get Started - View on GitHub -

    -
    -
    -
    -
    - {renderSize} -
    +

    + Get Started + View on GitHub +

    +
    +
    +
    +
    + {renderSize} +
    -
    -

    CSS with a minimal footprint.

    +
    +

    CSS with a minimal footprint.

    -

    +

    Pure is ridiculously tiny. The entire set of modules clocks in at {fileSize({ module: 'pure', filesizes: moduleSizes })}* minified and gzipped. 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. -

    +

    -

    +

    * We can add correctly :) the numbers above are individual module sizes; when grouped together they compress (gzip) even more. -

    -
    -
    -
    -
    -

    Your CSS foundation.

    -

    +

    +
    +
    +
    +
    +

    Your CSS foundation.

    +

    Pure builds on Normalize.css and provides layout and styling for native HTML elements, plus the most common UI components. It's what you need, without the cruft. -

    -
    +

    +
    -
    -

    Made with mobile in mind.

    +
    +

    Made with mobile in mind.

    -

    +

    Pure is responsive out of the box, so elements look great on all screen sizes. -

    -
    +

    +
    -
    -

    Stays out of your way.

    +
    +

    Stays out of your way.

    -

    +

    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. -

    -
    -
    -
    -
    - - Diagram of a sample layout. - -
    +

    +
    +
    +
    +
    + + Diagram of a sample layout. + +
    -
    -

    Create responsive layouts.

    -

    +

    +

    Create responsive layouts.

    +

    By using Grids, Menus, 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 layouts and start your next web project with a rock-solid foundation. -

    -

    - View Layouts -

    -
    -
    -
    -
    -

    Create your own look and feel.

    -

    +

    +

    + View Layouts +

    +
    +
    +
    +
    +

    Create your own look and feel.

    +

    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. -

    -

    - Extend Pure -

    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    - - ); +

    +

    + Extend Pure +

    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    +     + ); } export default Home; diff --git a/site/src/pages/layouts/index.js b/site/src/pages/layouts/index.js index 5665fd9..d34d5c7 100644 --- a/site/src/pages/layouts/index.js +++ b/site/src/pages/layouts/index.js @@ -1,63 +1,62 @@ import Link from '@docusaurus/Link'; import useBaseUrl from '@docusaurus/useBaseUrl'; -import classnames from 'classnames'; import React from 'react'; import Layout from '@theme/Layout'; import Header from '../../../components/Header'; import SectionHeader from '../../../components/SectionHeader'; -import styles from './styles.css'; +import './styles.css'; const title = 'Layouts'; const description = 'Quickstart your next web project with these example layouts.'; const layouts = [ { - type: "blog", - title: "Blog", - summary: "A layout example that shows off a blog page with a list of posts.", - modules: ["base", "grids", "buttons", "menus"] + type: 'blog', + title: 'Blog', + summary: 'A layout example that shows off a blog page with a list of posts.', + modules: ['base', 'grids', 'buttons', 'menus'] }, { - type: "email", - title: "Email", - summary: "A layout example that shows off a responsive email layout.", - modules: ["base", "grids", "buttons", "menus"] + type: 'email', + title: 'Email', + summary: 'A layout example that shows off a responsive email layout.', + modules: ['base', 'grids', 'buttons', 'menus'] }, { - type: "gallery", - title: "Photo Gallery", - summary: "A layout example that shows off a responsive photo gallery.", - modules: ["base", "grids", "forms", "buttons", "menus"] + type: 'gallery', + title: 'Photo Gallery', + summary: 'A layout example that shows off a responsive photo gallery.', + modules: ['base', 'grids', 'forms', 'buttons', 'menus'] }, { - type: "marketing", - title: "Landing Page", - summary: "A layout example that shows off a responsive product landing page.", - modules: ["base", "grids", "forms", "buttons", "menus"] + type: 'marketing', + title: 'Landing Page', + summary: 'A layout example that shows off a responsive product landing page.', + modules: ['base', 'grids', 'forms', 'buttons', 'menus'] }, { - type: "pricing", - title: "Pricing Table", - summary: "A layout example that shows off a responsive pricing table.", - modules: ["base", "grids", "buttons", "menus"] + type: 'pricing', + title: 'Pricing Table', + summary: 'A layout example that shows off a responsive pricing table.', + modules: ['base', 'grids', 'buttons', 'menus'] }, { - type: "side-menu", - title: "Responsive Side Menu", - summary: "A layout example with a side menu that hides on mobile, just like the Pure website.", - modules: ["base", "grids", "menus"] + type: 'side-menu', + title: 'Responsive Side Menu', + summary: 'A layout example with a side menu that hides on mobile, just like the Pure website.', + modules: ['base', 'grids', 'menus'] }, { - type: "tucked-menu-vertical", - title: "Responsive Horizontal-to-Vertical Menu", - summary: "A set of horizontal menus that switch to vertical and which hide at small window widths.", - modules: ["base", "grids", "menus"] + type: 'tucked-menu-vertical', + title: 'Responsive Horizontal-to-Vertical Menu', + summary: 'A set of horizontal menus that switch to vertical and which hide at small window widths.', + modules: ['base', 'grids', 'menus'] }, { - type: "tucked-menu", - title: "Responsive Horizontal-to-Scrollable Menu", - summary: "Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.", - modules: ["base", "menus"] + type: 'tucked-menu', + title: 'Responsive Horizontal-to-Scrollable Menu', + summary: 'Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.', + modules: ['base', 'menus'] } ]; @@ -66,7 +65,7 @@ const renderLayouts = (layout, idx) => (
    diff --git a/site/src/pages/start/index.js b/site/src/pages/start/index.js index c68a3a3..a000097 100644 --- a/site/src/pages/start/index.js +++ b/site/src/pages/start/index.js @@ -1,13 +1,11 @@ -import Link from '@docusaurus/Link'; -import useBaseUrl from '@docusaurus/useBaseUrl'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import classnames from 'classnames'; import React from 'react'; import Layout from '../../theme/Layout'; import Header from '../../../components/Header'; import SectionHeader from '../../../components/SectionHeader'; import CodeBlock from '../../../components/CodeBlock'; -import styles from './styles.css'; +import { stripIndent } from 'common-tags'; +import './styles.css'; const title = 'Get Started'; const description = 'Start your next web project with Pure.'; @@ -23,159 +21,161 @@ function Start() { } = siteConfig; return ( -
    +
    -
    - +
    + -

    +

    You can add Pure to your page via the free unpkg CDN. Just add the following <link> element into your page's <head>, before your project's stylesheets. -

    -
    +

    +
    - {PURE_DOWNLOAD_SNIPPET} + {PURE_DOWNLOAD_SNIPPET} -
    - - + -

    +

    The viewport meta 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 <head>. -

    -
    +

    +
    - - {``} - + + {''} + -
    - +
    + -

    +

    Pure's grid system is very simple. You create a row by using the .pure-g class, and create columns within that row by using the pure-u-* classes. -

    +

    -

    +

    Here's a grid with three columns: -

    +

    - - {`
    -

    Thirds

    -

    Thirds

    -

    Thirds

    -
    `} -     -
    + + {stripIndent` +
    +

    Thirds

    +

    Thirds

    +

    Thirds

    +
    + `} +     +
    -
    -
    -
    -

    Thirds

    -
    -
    -

    Thirds

    -
    -
    -

    Thirds

    -
    -
    -
    +
    +
    +
    +

    Thirds

    +
    +
    +

    Thirds

    +
    +
    +

    Thirds

    +
    +
    +
    -
    - +
    + -

    +

    Pure's grid system is also mobile-first and responsive, and you're able to customize the grid by specifying CSS Media Query breakpoints and grid classnames. - {/*If needed, you can customize Pure Grids below, but let's start off with an example.*/} -

    + {/*If needed, you can customize Pure Grids below, but let's start off with an example.*/} +

    -

    +

    You'll need to also include Pure's grids-responsive.css onto your page: -

    +

    - - {``} - + + {``} + -

    +

    Here's the default responsive breakpoints included in grids-responsive.css: -

    +

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    KeyCSS Media QueryAppliesClassname
    NoneNoneAlways.pure-u-*
    sm@media screen and (min-width: 35.5em)≥ 568px.pure-u-sm-*
    md@media screen and (min-width: 48em)≥ 768px.pure-u-md-*
    lg@media screen and (min-width: 64em)≥ 1024px.pure-u-lg-*
    xl@media screen and (min-width: 80em)≥ 1280px.pure-u-xl-*
    -
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    KeyCSS Media QueryAppliesClassname
    NoneNoneAlways.pure-u-*
    sm@media screen and (min-width: 35.5em)≥ 568px.pure-u-sm-*
    md@media screen and (min-width: 48em)≥ 768px.pure-u-md-*
    lg@media screen and (min-width: 64em)≥ 1024px.pure-u-lg-*
    xl@media screen and (min-width: 80em)≥ 1280px.pure-u-xl-*
    +
    -

    +

    Here's an example of what you'd be able to do. Try resizing your screen to see how the grid responds. -

    -
    -
    -
    -
    .pure-u-1
    -
    +

    +
    +
    +
    +
    .pure-u-1
    +
    .pure-u-1
    .pure-u-md-1-2
    .pure-u-lg-1-4 -
    -
    +
    +
    .pure-u-1
    .pure-u-md-1-2
    .pure-u-lg-1-4 -
    -
    +
    +
    .pure-u-1
    .pure-u-md-1-2
    .pure-u-lg-1-4 -
    -
    +
    +
    .pure-u-1
    .pure-u-md-1-2
    .pure-u-lg-1-4 -
    -
    .pure-u-1
    .pure-u-md-3-4
    -
    .pure-u-1
    .pure-u-md-1-4
    -
    -
    - {/* +
    +
    .pure-u-1
    .pure-u-md-3-4
    +
    .pure-u-1
    .pure-u-md-1-4
    +
    +
    + {/*