From f59a16cebea3b1666ba802425bb2f4a22d7d39b6 Mon Sep 17 00:00:00 2001 From: Seth Bertalotto Date: Tue, 5 May 2020 08:15:25 -0700 Subject: [PATCH] refactor: upgrade normalize, remove bower, remove old ie hacks (#790) --- .bowerrc | 4 - .gitignore | 1 - .npmignore | 2 - Gruntfile.js | 35 +------- README.md | 15 +--- RELEASE.md | 66 +-------------- bower.json | 9 --- package.json | 7 +- site/.gitignore | 3 + site/README.md | 9 ++- site/package.json | 3 + site/src/pages/grids/index.js | 4 - site/src/pages/tools/index.js | 80 ------------------- site/static/layouts/blog/index.html | 4 +- site/static/layouts/email/index.html | 2 +- site/static/layouts/gallery/index.html | 4 +- site/static/layouts/marketing/index.html | 4 +- site/static/layouts/pricing/index.html | 4 +- site/static/layouts/side-menu/index.html | 2 +- .../layouts/tucked-menu-vertical/index.html | 12 +-- site/static/layouts/tucked-menu/index.html | 2 +- src/base/css/base.css | 4 + src/buttons/css/buttons-core.css | 3 - src/buttons/css/buttons.css | 3 - src/forms/css/forms-r.css | 2 - src/forms/css/forms.css | 6 -- src/forms/tests/manual/forms.html | 4 +- src/grids/css/grids-core.css | 4 - src/grids/tests/manual/responsive.html | 8 +- src/menus/css/menus-horizontal.css | 2 - tasks/bower_install.js | 21 ----- tasks/bower_json.js | 18 ----- 32 files changed, 45 insertions(+), 302 deletions(-) delete mode 100644 .bowerrc delete mode 100644 bower.json delete mode 100644 tasks/bower_install.js delete mode 100644 tasks/bower_json.js diff --git a/.bowerrc b/.bowerrc deleted file mode 100644 index d2419ba..0000000 --- a/.bowerrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "directory": "bower_components", - "json" : "bower.json" -} diff --git a/.gitignore b/.gitignore index 9d2b55f..dbe6a3e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,5 @@ .DS_Store artifacts/ -bower_components/ build/ coverage/ node_modules/ diff --git a/.npmignore b/.npmignore index 3b41eed..17a06f7 100644 --- a/.npmignore +++ b/.npmignore @@ -1,7 +1,5 @@ .* artifacts/ -bower_components/ -bower.json CONTRIBUTING.md Gruntfile.js node_modules/ diff --git a/Gruntfile.js b/Gruntfile.js index 887fe2b..a20d177 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -6,19 +6,6 @@ grunt.initConfig({ nick : 'pure', pkg : grunt.file.readJSON('package.json'), - bower: grunt.file.readJSON('bower.json'), - - // -- bower.json Config --------------------------------------------------------- - - bower_json: { - release: { - values: { - main: 'pure.css' - }, - - dest: 'build/' - } - }, // -- Clean Config --------------------------------------------------------- @@ -50,7 +37,7 @@ grunt.initConfig({ build: { files: [ {'build/base.css': [ - 'bower_components/normalize-css/normalize.css', + 'node_modules/normalize.css/normalize.css', 'build/base.css' ]}, @@ -168,7 +155,7 @@ grunt.initConfig({ options: { banner: [ '/*!', - 'normalize.css v<%= bower.devDependencies["normalize-css"] %> | MIT License | git.io/normalize', + 'normalize.css v<%= pkg.devDependencies["normalize-css"] %> | MIT License | git.io/normalize', 'Copyright (c) Nicolas Gallagher and Jonathan Neal', '*/\n' ].join('\n') @@ -221,18 +208,6 @@ grunt.initConfig({ } }, - // -- Strip Media Queries Config ------------------------------------------- - - stripmq: { - all: { - files: { - //follows the pattern 'destination': ['source'] - 'build/grids-responsive-old-ie.css': - ['build/grids-responsive.css'] - } - } - }, - // -- CSS Selectors Config ------------------------------------------------- css_selectors: { @@ -273,19 +248,16 @@ grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-css-selectors'); grunt.loadNpmTasks('grunt-postcss'); grunt.loadNpmTasks('grunt-pure-grids'); -grunt.loadNpmTasks('grunt-stripmq'); // Local tasks. grunt.loadTasks('tasks/'); -grunt.registerTask('default', ['import', 'test', 'build']); -grunt.registerTask('import', ['bower_install']); +grunt.registerTask('default', ['test', 'build']); grunt.registerTask('test', ['csslint']); grunt.registerTask('build', [ 'clean:build', 'copy:build', 'pure_grids', - 'stripmq', 'concat:build', 'clean:build_res', 'css_selectors:base', @@ -302,7 +274,6 @@ grunt.registerTask('release', [ 'default', 'clean:release', 'copy:release', - 'bower_json:release', 'compress:release' ]); diff --git a/README.md b/README.md index 20ad9b2..ca64984 100644 --- a/README.md +++ b/README.md @@ -20,12 +20,6 @@ A set of small, responsive CSS modules that you can use in every web project. Note: You can [customize which Pure modules you need][customize]. -**Install with Bower:** - -```shell -$ bower install --save pure -``` - **Install with NPM:** ```shell @@ -33,7 +27,6 @@ $ npm install purecss ``` [Pure]: http://purecss.io/ -[Bower]: http://bower.io/ [Build Status]: https://travis-ci.org/pure-css/pure [customize]: http://purecss.io/customize/ @@ -80,13 +73,7 @@ You can include the Pure CSS file in your project by fetching it from unpkg: ``` -You can also install Pure using [Bower][], using the following command: - -```shell -$ bower install --save pure -``` - -Or you can install Pure using NPM: +You can also install Pure using NPM: ```shell $ npm install purecss diff --git a/RELEASE.md b/RELEASE.md index 8d6911b..e7ee992 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -9,10 +9,6 @@ For all of these steps, replace `1.0.0` with the correct version! This assumes the following repo's are cloned and `npm` installed: - https://github.com/pure-css/pure -- https://github.com/pure-css/pure-site -- https://github.com/pure-css/pure-release - -You will also need `bower` installed globally. ## First, check everything @@ -31,7 +27,6 @@ You will also need `bower` installed globally. - [ ] **Review all src/.../tests/manual/ files in target environments, including:** - - [ ] IE 10 - [ ] IE 11 - [ ] Edge - [ ] Chrome @@ -43,7 +38,6 @@ You will also need `bower` installed globally. - [ ] **Review pure-site in target environments with [Pure served locally](https://github.com/pure-css/pure-site/blob/master/README.md#running-with-pure-served-locally)** - - [ ] IE 10 - [ ] IE 11 - [ ] Edge - [ ] Chrome @@ -67,7 +61,6 @@ You will also need `bower` installed globally. It should have already been determined whether this is a minor or patch version release. Update Pure's version number to the new version in the following places. You'll likely be dropping a "-pre" suffix which was in place during the last development cycle. Do not use a "v" in the version (e.g., 1.0.0): - - [ ] bower.json - [ ] package.json - [ ] HISTORY.md (Update "NEXT") - [ ] README.md (x2 CDN URLs) @@ -82,15 +75,6 @@ You will also need `bower` installed globally. **Note:** If the build fails it's for a good reason, most likely because there's code which is not passing CSSLint. We should always fix these issues and never force a release. -### Pure-release repo - -- [ ] **Update the pure-release repo** - - This repo is used by Bower. It must be updated and released (and hence tagged). - - - [ ] **Drop the Readme, History, and all build/*.css files into the pure-release repo** - - [ ] **Commit and push the changes to the pure-release repo** - - [ ] **git tag vX.X.X** and push to origin ## Publish pure to NPM @@ -108,56 +92,10 @@ Verify via https://unpkg.com/purecss@VERSION - [ ] **Draft a new release on [GitHub](https://github.com/pure-css/pure/releases) for all three repos,** using "v" in the version number (e.g., v1.0.0). Drafts are invisible to the public. Once these are published, the repos will be visible, and they will be tagged. **Don't publish them just yet.** - [ ] **pure** - - [ ] **pure-release** - - [ ] **pure-site** (**Note:** pure-site has its own version number) - -## Publishing the pure-site - -**NOTE: The pure-site is currently hosted on Now.sh.** - -Let's review where we're at: - -* All the repos are checked and ready. -* The build files are on the CDN. -* We're ready to publish release notes and tag our repos by publishing the draft releases using GitHub. -* Then we'll build the pure-site and check it. -* Then we can deploy the pure-site to where the public can see it. - -- [ ] **Update Pure Version in pure-css/pure-site** - - Bump the version number to the new Pure version in package.json. - -- [ ] **Commit those changes** - -- [ ] **Publish pure-release** - - From the [pure-release repo](https://github.com/pure-css/pure-release/releases), publish the release you drafted earlier. Otherwise Bower won't be able to take advantage of the version number you just updated, because pure-release won't yet have the tag. - -- [ ] **Git push changes to pure-css/pure-site#master** - - The local changes that were done to update the website for the release needs to be pushed back up to pure-css/pure-site#master on GitHub.com: - - ``` - $ git push upstream master - ``` - -- [ ] **Test pure-site on Now host** - - ``` - $ now . - ``` - -- [ ] **Publish pure-site release** If everything is looking good, you can publish the [release of pure-site](https://github.com/pure-css/pure-site/releases) on GitHub. - -## Promote pure-site to Now alias - - ``` - $ now alias set purecss.io - ``` ## Formally publish Pure -Now all our files are out there, the pure-release release is published, the pure-site release is published, and everything is looking good. +Now all our files are out there and everything is looking good. - [ ] **Publish pure** @@ -170,4 +108,4 @@ Now all our files are out there, the pure-release release is published, the pure ## Mark repo as pre-release -- [ ] We should mark the version number of the project (in package.json and bower.json) as 0.6.1-pre for clarity, so there's no mistaking the leading edge of the project from the last release. Commit those changes and push to master. +- [ ] We should mark the version number of the project (in package.json) as 0.6.1-pre for clarity, so there's no mistaking the leading edge of the project from the last release. Commit those changes and push to master. diff --git a/bower.json b/bower.json deleted file mode 100644 index b3b3d00..0000000 --- a/bower.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "name": "pure", - "description": "Use Pure's ridiculously tiny CSS to start any web project.", - "version": "1.0.1", - "main": "build/pure.css", - "devDependencies": { - "normalize-css": "^3.0" - } -} diff --git a/package.json b/package.json index 55777a8..ce2c71e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "purecss", - "version": "1.0.1", + "version": "2.0.0-rc.1", "repository": { "type": "git", "url": "git://github.com/pure-css/pure.git" @@ -15,7 +15,6 @@ "files": "build/", "devDependencies": { "autoprefixer": "^9.6.1", - "bower": "^1.8.2", "grunt": "^1.0.1", "grunt-cli": "^1.2.0", "grunt-contrib-clean": "^2.0.0", @@ -27,8 +26,8 @@ "grunt-contrib-watch": "^1.0.0", "grunt-css-selectors": "^1.1.0", "grunt-postcss": "^0.9.0", - "grunt-pure-grids": "^1.0.0", - "grunt-stripmq": "0.0.6", + "grunt-pure-grids": "^2.0.0", + "normalize.css": "^8.0.1", "tap": "^14.4.1" }, "description": "Pure is a ridiculously tiny CSS library you can use to start any web project.", diff --git a/site/.gitignore b/site/.gitignore index b2d6de3..bb11e37 100644 --- a/site/.gitignore +++ b/site/.gitignore @@ -4,6 +4,9 @@ # Production /build +# Ignore manually copied pure files to static/css folder +/static/css/pure + # Generated files .docusaurus .cache-loader diff --git a/site/README.md b/site/README.md index 67baf79..91c0825 100644 --- a/site/README.md +++ b/site/README.md @@ -30,4 +30,11 @@ This command generates static content into the `build` directory and can be serv $ GIT_USER= USE_SSH=true npm run deploy ``` -If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. +The site is hosted on [Vercel](https://vercel.com/) and will automatically deploy when commits are merged to `master`. + +### Including Pure + +We want to use the locally built version of Pure so that the [layout examples](https://purecss.io/layouts/) are always using the `master` version, previously they had used a hardcoded CDN link. + +To get Docusaurus to register the css as `static`, they have to exist in the `static/` directory before the site is built. Therefore, we copy the Pure `build/` in manually and `.gitignore` them. Once Docusaurus builds, they resolve as proper CSS files. + diff --git a/site/package.json b/site/package.json index 5019957..5b10d2a 100644 --- a/site/package.json +++ b/site/package.json @@ -3,8 +3,11 @@ "version": "0.0.0", "private": true, "scripts": { + "copy:pure": "cp -r ../build/ ./static/css/pure/", "start": "docusaurus start", "build": "docusaurus build", + "prebuild": "npm run copy:pure", + "prestart": "npm run copy:pure", "swizzle": "docusaurus swizzle", "deploy": "docusaurus deploy" }, diff --git a/site/src/pages/grids/index.js b/site/src/pages/grids/index.js index 2a81f3b..8073e63 100644 --- a/site/src/pages/grids/index.js +++ b/site/src/pages/grids/index.js @@ -474,10 +474,6 @@ function Grids() { {``} -

- Even though Pure Grids are designed to be mobile-first, you may want to show the "desktop-experience" to users who view your website in IE 8 or below. Just include the grids-responsive-old-ie.css file inside an IE conditional statement and Pure Grids will adapt to show the desktop experience. -

-

Pure's Regular Grid vs. Responsive Grid

diff --git a/site/src/pages/tools/index.js b/site/src/pages/tools/index.js index 16267cf..2a14a60 100644 --- a/site/src/pages/tools/index.js +++ b/site/src/pages/tools/index.js @@ -33,14 +33,6 @@ function Tools() { – Return full path to a Pure file. - - -

- You can add Pure to your project through Bower. This works great if your website is SSL-encrypted. -

- - $ bower install pure --save -

@@ -141,78 +133,6 @@ const css = rework('').use(pureGrids.units({ console.log(css);`} - {/* - - -

- Developing your web project from a mobile-first perspective has benefits: -

- -
    -
  • -

    - CSS rules are easier to add than to remove, so it makes sense to start from the smallest and simplest layout, and add styles for larger screens. -

    -
    • -
  • -

    - Forces you to think about your most important content, instead of shoe-horning desktop experiences into small screens. -

    -
    • -
- -

- However, one of the problems with mobile-first designs is that old browsers that don't support CSS Media Queries (such as IE 8) get a mobile-phone experience, which looks odd on a big screen. -

- -

- To solve this, we helped develop the Strip MQ Grunt Plugin. By using this Grunt plugin, you're able to write mobile-first CSS, while ensuring that users on IE 8 and below get to view the desktop experience. It's the best of both worlds! -

- -

Via Grunt

- -

- Install the Strip MQ Grunt Plugin through npm. -

- - 
$ npm install grunt-stripmq --save-dev
- -

- Next, add the Grunt task to your Gruntfile.js -

- - 
grunt.loadNpmTasks('grunt-stripmq');
- -

- Add the necessary configuration through the stripmq task. Check out the README documentation for a full list of available options. -

- - -{`grunt.initConfig({ - stripmq: { - all: { - files: { - // Takes the input file `grid.css`, and generates `grid-old-ie.css`. - 'css/grid-old-ie.css': ['css/grid.css'], - - // Takes the input file `app.css`, and generates `app-old-ie.css`. - 'css/app-old-ie.css': ['css/app.css'] - } - } - } -});`} - - -

- Finally, you'll need to add this block in your <head> to let old IE browsers request the generated CSS files. -

- - - - - - */} -

diff --git a/site/static/layouts/blog/index.html b/site/static/layouts/blog/index.html index 7c0d7c7..8056baa 100644 --- a/site/static/layouts/blog/index.html +++ b/site/static/layouts/blog/index.html @@ -5,8 +5,8 @@ Blog – Layout Examples – Pure - - + + diff --git a/site/static/layouts/email/index.html b/site/static/layouts/email/index.html index de0fe22..fcaadf9 100644 --- a/site/static/layouts/email/index.html +++ b/site/static/layouts/email/index.html @@ -5,7 +5,7 @@ Email – Layout Examples – Pure - + diff --git a/site/static/layouts/gallery/index.html b/site/static/layouts/gallery/index.html index 0b8cf63..a61f15a 100644 --- a/site/static/layouts/gallery/index.html +++ b/site/static/layouts/gallery/index.html @@ -5,8 +5,8 @@ Photo Gallery – Layout Examples – Pure - - + + diff --git a/site/static/layouts/marketing/index.html b/site/static/layouts/marketing/index.html index ad3670c..893e5f5 100644 --- a/site/static/layouts/marketing/index.html +++ b/site/static/layouts/marketing/index.html @@ -5,8 +5,8 @@ Landing Page – Layout Examples – Pure - - + + diff --git a/site/static/layouts/pricing/index.html b/site/static/layouts/pricing/index.html index 451390c..c44a6f6 100644 --- a/site/static/layouts/pricing/index.html +++ b/site/static/layouts/pricing/index.html @@ -5,8 +5,8 @@ Pricing Table – Layout Examples – Pure - - + + diff --git a/site/static/layouts/side-menu/index.html b/site/static/layouts/side-menu/index.html index 5f29067..f4560ac 100644 --- a/site/static/layouts/side-menu/index.html +++ b/site/static/layouts/side-menu/index.html @@ -5,7 +5,7 @@ Responsive Side Menu – Layout Examples – Pure - + diff --git a/site/static/layouts/tucked-menu-vertical/index.html b/site/static/layouts/tucked-menu-vertical/index.html index a81eff9..68d0097 100644 --- a/site/static/layouts/tucked-menu-vertical/index.html +++ b/site/static/layouts/tucked-menu-vertical/index.html @@ -5,8 +5,8 @@ Responsive Horizontal-to-Vertical Menu – Layout Examples – Pure - - + + @@ -180,12 +180,8 @@ window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu); arrange the menus. Code reproduced below:

-
<!--[if lte IE 8]>
-          <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-old-ie-min.css">
-      <![endif]-->
-      <!--[if gt IE 8]><!-->
-          <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">
-      <!--<![endif]-->
+

+      <link rel="stylesheet" href="/css/pure/grids-responsive-min.css">
 
       <style>
       .custom-wrapper {
diff --git a/site/static/layouts/tucked-menu/index.html b/site/static/layouts/tucked-menu/index.html
index 108cb4a..158cd41 100644
--- a/site/static/layouts/tucked-menu/index.html
+++ b/site/static/layouts/tucked-menu/index.html
@@ -5,7 +5,7 @@
     
     
     Responsive Horizontal-to-Scrollable Menu – Layout Examples – Pure
-    
+    
 
 
 
diff --git a/src/base/css/base.css b/src/base/css/base.css
index 6813132..3355e91 100644
--- a/src/base/css/base.css
+++ b/src/base/css/base.css
@@ -8,6 +8,10 @@
  * Extra rules that Pure adds on top of Normalize.css
  */
 
+html {
+    font-family: sans-serif;
+}
+
 /**
  * Always hide an element when it has the `hidden` HTML attribute.
  */
diff --git a/src/buttons/css/buttons-core.css b/src/buttons/css/buttons-core.css
index 2b2118b..986d4a8 100644
--- a/src/buttons/css/buttons-core.css
+++ b/src/buttons/css/buttons-core.css
@@ -1,7 +1,6 @@
 .pure-button {
     /* Structure */
     display: inline-block;
-    zoom: 1;
     line-height: normal;
     white-space: nowrap;
     vertical-align: middle;
@@ -21,8 +20,6 @@
 /* Inherit .pure-g styles */
 .pure-button-group {
     letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
-    *letter-spacing: normal; /* reset IE < 8 */
-    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
     text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
 }
 
diff --git a/src/buttons/css/buttons.css b/src/buttons/css/buttons.css
index b1c56e9..a8e81c7 100644
--- a/src/buttons/css/buttons.css
+++ b/src/buttons/css/buttons.css
@@ -34,9 +34,6 @@
 .pure-button-disabled:active {
     border: none;
     background-image: none;
-    /* csslint ignore:start */
-    filter: alpha(opacity=40);
-    /* csslint ignore:end */
     opacity: 0.40;
     cursor: not-allowed;
     box-shadow: none;
diff --git a/src/forms/css/forms-r.css b/src/forms/css/forms-r.css
index dab2758..0179c58 100644
--- a/src/forms/css/forms-r.css
+++ b/src/forms/css/forms-r.css
@@ -52,8 +52,6 @@
         margin: 1.5em 0 0 0;
     }
 
-    /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
-    .pure-form .pure-help-inline,
     .pure-form-message-inline,
     .pure-form-message {
         display: block;
diff --git a/src/forms/css/forms.css b/src/forms/css/forms.css
index 336bdeb..4698d75 100644
--- a/src/forms/css/forms.css
+++ b/src/forms/css/forms.css
@@ -201,12 +201,8 @@ since IE8 won't execute CSS that contains a CSS3 selector.
 .pure-form-aligned input,
 .pure-form-aligned textarea,
 .pure-form-aligned select,
-/* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
-.pure-form-aligned .pure-help-inline,
 .pure-form-message-inline {
     display: inline-block;
-    *display: inline;
-    *zoom: 1;
     vertical-align: middle;
 }
 .pure-form-aligned textarea {
@@ -294,8 +290,6 @@ since IE8 won't execute CSS that contains a CSS3 selector.
 }
 
 /* Inline help for forms */
-/* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead. */
-.pure-form .pure-help-inline,
 .pure-form-message-inline {
     display: inline-block;
     padding-left: 0.3em;
diff --git a/src/forms/tests/manual/forms.html b/src/forms/tests/manual/forms.html
index 461ce97..c1685ad 100644
--- a/src/forms/tests/manual/forms.html
+++ b/src/forms/tests/manual/forms.html
@@ -110,7 +110,7 @@
 
             
             
-            
+            
 
             
             
@@ -151,7 +151,7 @@
             

                 
                 
-                
+                
             

 
             

diff --git a/src/grids/css/grids-core.css b/src/grids/css/grids-core.css
index e28a779..9f5682a 100644
--- a/src/grids/css/grids-core.css
+++ b/src/grids/css/grids-core.css
@@ -2,8 +2,6 @@
 
 .pure-g {
     letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
-    *letter-spacing: normal; /* reset IE < 8 */
-    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
     text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
 
     /*
@@ -50,8 +48,6 @@
 
 .pure-u {
     display: inline-block;
-    *display: inline; /* IE < 8: fake inline-block */
-    zoom: 1;
     letter-spacing: normal;
     word-spacing: normal;
     vertical-align: top;
diff --git a/src/grids/tests/manual/responsive.html b/src/grids/tests/manual/responsive.html
index 097a1db..6926d8b 100644
--- a/src/grids/tests/manual/responsive.html
+++ b/src/grids/tests/manual/responsive.html
@@ -7,13 +7,7 @@
 
     
     
-
-    
-    
+