mirror of
https://github.com/pure-css/pure.git
synced 2024-11-07 21:34:24 +00:00
refactor: upgrade normalize, remove bower, remove old ie hacks (#790)
This commit is contained in:
parent
d288b16828
commit
f59a16cebe
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,6 +1,5 @@
|
|||||||
.DS_Store
|
.DS_Store
|
||||||
artifacts/
|
artifacts/
|
||||||
bower_components/
|
|
||||||
build/
|
build/
|
||||||
coverage/
|
coverage/
|
||||||
node_modules/
|
node_modules/
|
||||||
|
@ -1,7 +1,5 @@
|
|||||||
.*
|
.*
|
||||||
artifacts/
|
artifacts/
|
||||||
bower_components/
|
|
||||||
bower.json
|
|
||||||
CONTRIBUTING.md
|
CONTRIBUTING.md
|
||||||
Gruntfile.js
|
Gruntfile.js
|
||||||
node_modules/
|
node_modules/
|
||||||
|
35
Gruntfile.js
35
Gruntfile.js
@ -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'
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
15
README.md
15
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].
|
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
|
||||||
|
66
RELEASE.md
66
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:
|
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.
|
||||||
|
@ -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"
|
|
||||||
}
|
|
||||||
}
|
|
@ -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
3
site/.gitignore
vendored
@ -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
|
||||||
|
@ -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.
|
||||||
|
|
||||||
|
@ -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"
|
||||||
},
|
},
|
||||||
|
@ -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>
|
||||||
|
@ -33,14 +33,6 @@ function Tools() {
|
|||||||
– Return full path to a Pure file.
|
– 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('grunt-stripmq');</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 `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']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});`}
|
|
||||||
</CodeBlock>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Finally, you'll need to add this block in your <code><head></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>
|
||||||
|
@ -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 – Layout Examples – Pure</title>
|
<title>Blog – Layout Examples – 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>
|
||||||
|
@ -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 – Layout Examples – Pure</title>
|
<title>Email – Layout Examples – 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>
|
||||||
|
@ -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 – Layout Examples – Pure</title>
|
<title>Photo Gallery – Layout Examples – 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>
|
||||||
|
@ -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 – Layout Examples – Pure</title>
|
<title>Landing Page – Layout Examples – 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>
|
||||||
|
@ -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 – Layout Examples – Pure</title>
|
<title>Pricing Table – Layout Examples – 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>
|
||||||
|
@ -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 – Layout Examples – Pure</title>
|
<title>Responsive Side Menu – Layout Examples – 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>
|
||||||
|
@ -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 – Layout Examples – Pure</title>
|
<title>Responsive Horizontal-to-Vertical Menu – Layout Examples – 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><!--[if lte IE 8]>
|
<pre class="code" data-language="html"><code>
|
||||||
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-old-ie-min.css">
|
<link rel="stylesheet" href="/css/pure/grids-responsive-min.css">
|
||||||
<![endif]-->
|
|
||||||
<!--[if gt IE 8]><!-->
|
|
||||||
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">
|
|
||||||
<!--<![endif]-->
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.custom-wrapper {
|
.custom-wrapper {
|
||||||
|
@ -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 – Layout Examples – Pure</title>
|
<title>Responsive Horizontal-to-Scrollable Menu – Layout Examples – 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>
|
||||||
|
|
||||||
|
@ -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.
|
||||||
*/
|
*/
|
||||||
|
@ -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 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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">
|
||||||
|
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
@ -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, ' '));
|
|
||||||
});
|
|
||||||
};
|
|
Loading…
Reference in New Issue
Block a user