refactor: upgrade normalize, remove bower, remove old ie hacks (#790)

This commit is contained in:
Seth Bertalotto 2020-05-05 08:15:25 -07:00 committed by GitHub
parent d288b16828
commit f59a16cebe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 45 additions and 302 deletions

View File

@ -1,4 +0,0 @@
{
"directory": "bower_components",
"json" : "bower.json"
}

1
.gitignore vendored
View File

@ -1,6 +1,5 @@
.DS_Store .DS_Store
artifacts/ artifacts/
bower_components/
build/ build/
coverage/ coverage/
node_modules/ node_modules/

View File

@ -1,7 +1,5 @@
.* .*
artifacts/ artifacts/
bower_components/
bower.json
CONTRIBUTING.md CONTRIBUTING.md
Gruntfile.js Gruntfile.js
node_modules/ node_modules/

View File

@ -6,19 +6,6 @@ grunt.initConfig({
nick : 'pure', nick : 'pure',
pkg : grunt.file.readJSON('package.json'), 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 --------------------------------------------------------- // -- Clean Config ---------------------------------------------------------
@ -50,7 +37,7 @@ grunt.initConfig({
build: { build: {
files: [ files: [
{'build/base.css': [ {'build/base.css': [
'bower_components/normalize-css/normalize.css', 'node_modules/normalize.css/normalize.css',
'build/base.css' 'build/base.css'
]}, ]},
@ -168,7 +155,7 @@ grunt.initConfig({
options: { options: {
banner: [ 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', 'Copyright (c) Nicolas Gallagher and Jonathan Neal',
'*/\n' '*/\n'
].join('\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 Config -------------------------------------------------
css_selectors: { css_selectors: {
@ -273,19 +248,16 @@ 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');
grunt.loadNpmTasks('grunt-stripmq');
// Local tasks. // Local tasks.
grunt.loadTasks('tasks/'); grunt.loadTasks('tasks/');
grunt.registerTask('default', ['import', 'test', 'build']); grunt.registerTask('default', ['test', 'build']);
grunt.registerTask('import', ['bower_install']);
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',
'stripmq',
'concat:build', 'concat:build',
'clean:build_res', 'clean:build_res',
'css_selectors:base', 'css_selectors:base',
@ -302,7 +274,6 @@ grunt.registerTask('release', [
'default', 'default',
'clean:release', 'clean:release',
'copy:release', 'copy:release',
'bower_json:release',
'compress:release' 'compress:release'
]); ]);

View File

@ -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]. Note: You can [customize which Pure modules you need][customize].
**Install with Bower:**
```shell
$ bower install --save pure
```
**Install with NPM:** **Install with NPM:**
```shell ```shell
@ -33,7 +27,6 @@ $ npm install purecss
``` ```
[Pure]: http://purecss.io/ [Pure]: http://purecss.io/
[Bower]: http://bower.io/
[Build Status]: https://travis-ci.org/pure-css/pure [Build Status]: https://travis-ci.org/pure-css/pure
[customize]: http://purecss.io/customize/ [customize]: http://purecss.io/customize/
@ -80,13 +73,7 @@ You can include the Pure CSS file in your project by fetching it from unpkg:
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
``` ```
You can also install Pure using [Bower][], using the following command: You can also install Pure using NPM:
```shell
$ bower install --save pure
```
Or you can install Pure using NPM:
```shell ```shell
$ npm install purecss $ npm install purecss

View File

@ -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: This assumes the following repo's are cloned and `npm` installed:
- https://github.com/pure-css/pure - 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 ## First, check everything
@ -31,7 +27,6 @@ You will also need `bower` installed globally.
- [ ] **Review all src/.../tests/manual/ files in target environments, including:** - [ ] **Review all src/.../tests/manual/ files in target environments, including:**
- [ ] IE 10
- [ ] IE 11 - [ ] IE 11
- [ ] Edge - [ ] Edge
- [ ] Chrome - [ ] 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)** - [ ] **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 - [ ] IE 11
- [ ] Edge - [ ] Edge
- [ ] Chrome - [ ] 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): 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 - [ ] package.json
- [ ] HISTORY.md (Update "NEXT") - [ ] HISTORY.md (Update "NEXT")
- [ ] README.md (x2 CDN URLs) - [ ] 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. **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 ## 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.** - [ ] **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**
- [ ] **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 <new pure deployment> purecss.io
```
## Formally publish Pure ## 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** - [ ] **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 ## 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.

View File

@ -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"
}
}

View File

@ -1,6 +1,6 @@
{ {
"name": "purecss", "name": "purecss",
"version": "1.0.1", "version": "2.0.0-rc.1",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git://github.com/pure-css/pure.git" "url": "git://github.com/pure-css/pure.git"
@ -15,7 +15,6 @@
"files": "build/", "files": "build/",
"devDependencies": { "devDependencies": {
"autoprefixer": "^9.6.1", "autoprefixer": "^9.6.1",
"bower": "^1.8.2",
"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",
@ -27,8 +26,8 @@
"grunt-contrib-watch": "^1.0.0", "grunt-contrib-watch": "^1.0.0",
"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": "^1.0.0", "grunt-pure-grids": "^2.0.0",
"grunt-stripmq": "0.0.6", "normalize.css": "^8.0.1",
"tap": "^14.4.1" "tap": "^14.4.1"
}, },
"description": "Pure is a ridiculously tiny CSS library you can use to start any web project.", "description": "Pure is a ridiculously tiny CSS library you can use to start any web project.",

3
site/.gitignore vendored
View File

@ -4,6 +4,9 @@
# Production # Production
/build /build
# Ignore manually copied pure files to static/css folder
/static/css/pure
# Generated files # Generated files
.docusaurus .docusaurus
.cache-loader .cache-loader

View File

@ -30,4 +30,11 @@ This command generates static content into the `build` directory and can be serv
$ GIT_USER=<Your GitHub username> USE_SSH=true npm run deploy $ GIT_USER=<Your GitHub username> 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.

View File

@ -3,8 +3,11 @@
"version": "0.0.0", "version": "0.0.0",
"private": true, "private": true,
"scripts": { "scripts": {
"copy:pure": "cp -r ../build/ ./static/css/pure/",
"start": "docusaurus start", "start": "docusaurus start",
"build": "docusaurus build", "build": "docusaurus build",
"prebuild": "npm run copy:pure",
"prestart": "npm run copy:pure",
"swizzle": "docusaurus swizzle", "swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy" "deploy": "docusaurus deploy"
}, },

View File

@ -474,10 +474,6 @@ function Grids() {
{`<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css" />`} {`<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css" />`}
</CodeBlock> </CodeBlock>
<p>
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 <code>grids-responsive-old-ie.css</code> file inside an IE conditional statement and Pure Grids will adapt to show the desktop experience.
</p>
<h3>Pure's Regular Grid vs. Responsive Grid</h3> <h3>Pure's Regular Grid vs. Responsive Grid</h3>
<p> <p>

View File

@ -33,14 +33,6 @@ function Tools() {
&ndash; Return full path to a Pure file. &ndash; Return full path to a Pure file.
</ul> </ul>
<SectionHeader heading="Installing Pure with Bower" />
<p>
You can add Pure to your project through <a href="http://bower.io">Bower</a>. This works great if your website is SSL-encrypted.
</p>
<CodeBlock>$ bower install pure --save</CodeBlock>
<SectionHeader heading="Installing Pure with Composer" /> <SectionHeader heading="Installing Pure with Composer" />
<p> <p>
@ -141,78 +133,6 @@ const css = rework('').use(pureGrids.units({
console.log(css);`} console.log(css);`}
</CodeBlock> </CodeBlock>
{/*
<SectionHeader heading="Adapting Mobile-first Designs for Old Browsers" />
<p>
Developing your web project from a mobile-first perspective has benefits:
</p>
<ul>
<li>
<p>
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.
</p>
</li>
<li>
<p>
Forces you to think about your most important content, instead of shoe-horning desktop experiences into small screens.
</p>
</li>
</ul>
<p>
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.
</p>
<p>
To solve this, we helped develop the <a href="https://www.npmjs.org/package/grunt-stripmq">Strip MQ Grunt Plugin</a>. 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!
</p>
<h3>Via Grunt</h3>
<p>
Install the <a href="https://www.npmjs.org/package/grunt-stripmq">Strip MQ Grunt Plugin</a> through npm.
</p>
<pre className="code" data-language="shell"><code>$ npm install grunt-stripmq --save-dev</code></pre>
<p>
Next, add the Grunt task to your <code>Gruntfile.js</code>
</p>
<pre className="code" data-language="js"><code>grunt.loadNpmTasks(&#x27;grunt-stripmq&#x27;);</code></pre>
<p>
Add the necessary configuration through the <code>stripmq</code> task. Check out the <a href="https://www.npmjs.org/package/grunt-stripmq#readme">README documentation</a> for a full list of available options.
</p>
<CodeBlock>
{`grunt.initConfig({
stripmq: {
all: {
files: {
// Takes the input file &#x60;grid.css&#x60;, and generates &#x60;grid-old-ie.css&#x60;.
&#x27;css/grid-old-ie.css&#x27;: [&#x27;css/grid.css&#x27;],
// Takes the input file &#x60;app.css&#x60;, and generates &#x60;app-old-ie.css&#x60;.
&#x27;css/app-old-ie.css&#x27;: [&#x27;css/app.css&#x27;]
}
}
}
});`}
</CodeBlock>
<p>
Finally, you'll need to add this block in your <code>&lt;head&gt;</code> to let old IE browsers request the generated CSS files.
</p>
<CodeBlock>
<link rel="stylesheet" href="css/grid.css" />
<link rel="stylesheet" href="css/app.css" />
</CodeBlock>
*/}
<SectionHeader heading="Mutating Selectors" /> <SectionHeader heading="Mutating Selectors" />
<p> <p>

View File

@ -5,8 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A layout example that shows off a blog page with a list of posts."> <meta name="description" content="A layout example that shows off a blog page with a list of posts.">
<title>Blog &ndash; Layout Examples &ndash; Pure</title> <title>Blog &ndash; Layout Examples &ndash; Pure</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> <link rel="stylesheet" href="/css/pure/pure-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css"> <link rel="stylesheet" href="/css/pure/grids-responsive-min.css">
<link rel="stylesheet" href="/layouts/blog/styles.css"> <link rel="stylesheet" href="/layouts/blog/styles.css">
</head> </head>
<body> <body>

View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A layout example that shows off a responsive email layout."> <meta name="description" content="A layout example that shows off a responsive email layout.">
<title>Email &ndash; Layout Examples &ndash; Pure</title> <title>Email &ndash; Layout Examples &ndash; Pure</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> <link rel="stylesheet" href="/css/pure/pure-min.css">
<link rel="stylesheet" href="/layouts/email/styles.css"> <link rel="stylesheet" href="/layouts/email/styles.css">
</head> </head>
<body> <body>

View File

@ -5,8 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A layout example that shows off a responsive photo gallery."> <meta name="description" content="A layout example that shows off a responsive photo gallery.">
<title>Photo Gallery &ndash; Layout Examples &ndash; Pure</title> <title>Photo Gallery &ndash; Layout Examples &ndash; Pure</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> <link rel="stylesheet" href="/css/pure/pure-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css"> <link rel="stylesheet" href="/css/pure/grids-responsive-min.css">
<link rel="stylesheet" href="/layouts/gallery/styles.css"> <link rel="stylesheet" href="/layouts/gallery/styles.css">
</head> </head>
<body> <body>

View File

@ -5,8 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A layout example that shows off a responsive product landing page."> <meta name="description" content="A layout example that shows off a responsive product landing page.">
<title>Landing Page &ndash; Layout Examples &ndash; Pure</title> <title>Landing Page &ndash; Layout Examples &ndash; Pure</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> <link rel="stylesheet" href="/css/pure/pure-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css"> <link rel="stylesheet" href="/css/pure/grids-responsive-min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="/layouts/marketing/styles.css"> <link rel="stylesheet" href="/layouts/marketing/styles.css">
</head> </head>

View File

@ -5,8 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A layout example that shows off a responsive pricing table."> <meta name="description" content="A layout example that shows off a responsive pricing table.">
<title>Pricing Table &ndash; Layout Examples &ndash; Pure</title> <title>Pricing Table &ndash; Layout Examples &ndash; Pure</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> <link rel="stylesheet" href="/css/pure/pure-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css"> <link rel="stylesheet" href="/css/pure/grids-responsive-min.css">
<link rel="stylesheet" href="/layouts/pricing/styles.css"> <link rel="stylesheet" href="/layouts/pricing/styles.css">
</head> </head>
<body> <body>

View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A layout example with a side menu that hides on mobile, just like the Pure website."> <meta name="description" content="A layout example with a side menu that hides on mobile, just like the Pure website.">
<title>Responsive Side Menu &ndash; Layout Examples &ndash; Pure</title> <title>Responsive Side Menu &ndash; Layout Examples &ndash; Pure</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> <link rel="stylesheet" href="/css/pure/pure-min.css">
<link rel="stylesheet" href="/layouts/side-menu/styles.css"> <link rel="stylesheet" href="/layouts/side-menu/styles.css">
</head> </head>
<body> <body>

View File

@ -5,8 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A set of horizontal menus that switch to vertical and which hide at small window widths."> <meta name="description" content="A set of horizontal menus that switch to vertical and which hide at small window widths.">
<title>Responsive Horizontal-to-Vertical Menu &ndash; Layout Examples &ndash; Pure</title> <title>Responsive Horizontal-to-Vertical Menu &ndash; Layout Examples &ndash; Pure</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> <link rel="stylesheet" href="/css/pure/pure-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css"> <link rel="stylesheet" href="/css/pure/grids-responsive-min.css">
</head> </head>
<body> <body>
@ -180,12 +180,8 @@ window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
arrange the menus. arrange the menus.
Code reproduced below:</p> Code reproduced below:</p>
<pre class="code" data-language="html"><code>&lt;!--[if lte IE 8]&gt; <pre class="code" data-language="html"><code>
&lt;link rel&#x3D;&quot;stylesheet&quot; href&#x3D;&quot;https://unpkg.com/purecss@1.0.1/build/grids-responsive-old-ie-min.css&quot;&gt; &lt;link rel&#x3D;&quot;stylesheet&quot; href&#x3D;&quot;/css/pure/grids-responsive-min.css&quot;&gt;
&lt;![endif]--&gt;
&lt;!--[if gt IE 8]&gt;&lt;!--&gt;
&lt;link rel&#x3D;&quot;stylesheet&quot; href&#x3D;&quot;https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css&quot;&gt;
&lt;!--&lt;![endif]--&gt;
&lt;style&gt; &lt;style&gt;
.custom-wrapper { .custom-wrapper {

View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed."> <meta name="description" content="Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.">
<title>Responsive Horizontal-to-Scrollable Menu &ndash; Layout Examples &ndash; Pure</title> <title>Responsive Horizontal-to-Scrollable Menu &ndash; Layout Examples &ndash; Pure</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> <link rel="stylesheet" href="/css/pure/pure-min.css">
</head> </head>
<body> <body>

View File

@ -8,6 +8,10 @@
* Extra rules that Pure adds on top of Normalize.css * 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. * Always hide an element when it has the `hidden` HTML attribute.
*/ */

View File

@ -1,7 +1,6 @@
.pure-button { .pure-button {
/* Structure */ /* Structure */
display: inline-block; display: inline-block;
zoom: 1;
line-height: normal; line-height: normal;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
@ -21,8 +20,6 @@
/* Inherit .pure-g styles */ /* Inherit .pure-g styles */
.pure-button-group { .pure-button-group {
letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ 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 */ text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
} }

View File

@ -34,9 +34,6 @@
.pure-button-disabled:active { .pure-button-disabled:active {
border: none; border: none;
background-image: none; background-image: none;
/* csslint ignore:start */
filter: alpha(opacity=40);
/* csslint ignore:end */
opacity: 0.40; opacity: 0.40;
cursor: not-allowed; cursor: not-allowed;
box-shadow: none; box-shadow: none;

View File

@ -52,8 +52,6 @@
margin: 1.5em 0 0 0; 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-inline,
.pure-form-message { .pure-form-message {
display: block; display: block;

View File

@ -201,12 +201,8 @@ since IE8 won't execute CSS that contains a CSS3 selector.
.pure-form-aligned input, .pure-form-aligned input,
.pure-form-aligned textarea, .pure-form-aligned textarea,
.pure-form-aligned select, .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 { .pure-form-message-inline {
display: inline-block; display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle; vertical-align: middle;
} }
.pure-form-aligned textarea { .pure-form-aligned textarea {
@ -294,8 +290,6 @@ since IE8 won't execute CSS that contains a CSS3 selector.
} }
/* Inline help for forms */ /* 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 { .pure-form-message-inline {
display: inline-block; display: inline-block;
padding-left: 0.3em; padding-left: 0.3em;

View File

@ -110,7 +110,7 @@
<label>E-Mail</label> <label>E-Mail</label>
<input type="email" required> <input type="email" required>
<aside class="pure-help-inline">This is a required field.</aside> <aside class="pure-form-message-inline">This is a required field.</aside>
<label>City</label> <label>City</label>
<input type="text"> <input type="text">
@ -151,7 +151,7 @@
<div class="pure-control-group"> <div class="pure-control-group">
<label>Password</label> <label>Password</label>
<input type="password" placeholder="Password"> <input type="password" placeholder="Password">
<aside class="pure-help-inline">This is a <code>pure-help-inline</code> field. Deprecated.</aside> <aside class="pure-form-message-inline">This is a <code>pure-form-message-inline</code> field.</aside>
</div> </div>
<div class="pure-control-group"> <div class="pure-control-group">

View File

@ -2,8 +2,6 @@
.pure-g { .pure-g {
letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ 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 */ text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
/* /*
@ -50,8 +48,6 @@
.pure-u { .pure-u {
display: inline-block; display: inline-block;
*display: inline; /* IE < 8: fake inline-block */
zoom: 1;
letter-spacing: normal; letter-spacing: normal;
word-spacing: normal; word-spacing: normal;
vertical-align: top; vertical-align: top;

View File

@ -7,13 +7,7 @@
<link rel="stylesheet" href="../../../../build/base.css"> <link rel="stylesheet" href="../../../../build/base.css">
<link rel="stylesheet" href="../../../../build/grids.css"> <link rel="stylesheet" href="../../../../build/grids.css">
<link rel="stylesheet" href="../../../../build/grids-responsive.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="../../../../build/grids-responsive-old-ie.css">
<![endif]-->
<!--[if gt IE 8]>
<link rel="stylesheet" href="../../../../build/grids-responsive.css">
<!--<![endif]-->
<style> <style>
.content { .content {

View File

@ -13,7 +13,5 @@
.pure-menu-horizontal .pure-menu-heading, .pure-menu-horizontal .pure-menu-heading,
.pure-menu-horizontal .pure-menu-separator { .pure-menu-horizontal .pure-menu-separator {
display: inline-block; display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle; vertical-align: middle;
} }

View File

@ -1,21 +0,0 @@
'use strict';
module.exports = function (grunt) {
grunt.registerTask('bower_install', 'Installs Bower dependencies.', function () {
var bower = require('bower'),
done = this.async();
bower.commands.install()
.on('log', function (data) {
if (data.id !== 'install') { return; }
grunt.log.writeln('bower ' + data.id.cyan + ' ' + data.message);
})
.on('end', function (results) {
if (!Object.keys(results).length) {
grunt.log.writeln('No bower packages to install.');
}
done();
});
});
};

View File

@ -1,18 +0,0 @@
'use strict';
var path = require('path');
module.exports = function (grunt) {
grunt.registerMultiTask('bower_json', 'Modifies bower.json file.', function (target) {
var values = this.data.values;
Object.keys(values).forEach(function (key) {
grunt.config.set('bower.' + key, values[key]);
grunt.log.writeln('Updated Bower ' +
String(key).cyan + ': ' + String(values[key]).cyan);
});
grunt.file.write(path.join(this.data.dest, 'bower.json'),
JSON.stringify(grunt.config('bower'), null, ' '));
});
};