mirror of
https://github.com/pure-css/pure
synced 2024-11-22 05:32:20 +01: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
|
||||
artifacts/
|
||||
bower_components/
|
||||
build/
|
||||
coverage/
|
||||
node_modules/
|
||||
|
@ -1,7 +1,5 @@
|
||||
.*
|
||||
artifacts/
|
||||
bower_components/
|
||||
bower.json
|
||||
CONTRIBUTING.md
|
||||
Gruntfile.js
|
||||
node_modules/
|
||||
|
35
Gruntfile.js
35
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'
|
||||
]);
|
||||
|
||||
|
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].
|
||||
|
||||
**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:
|
||||
<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:
|
||||
|
||||
```shell
|
||||
$ bower install --save pure
|
||||
```
|
||||
|
||||
Or you can install Pure using NPM:
|
||||
You can also install Pure using NPM:
|
||||
|
||||
```shell
|
||||
$ 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:
|
||||
|
||||
- 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 <new pure deployment> 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.
|
||||
|
@ -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",
|
||||
"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.",
|
||||
|
3
site/.gitignore
vendored
3
site/.gitignore
vendored
@ -4,6 +4,9 @@
|
||||
# Production
|
||||
/build
|
||||
|
||||
# Ignore manually copied pure files to static/css folder
|
||||
/static/css/pure
|
||||
|
||||
# Generated files
|
||||
.docusaurus
|
||||
.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
|
||||
```
|
||||
|
||||
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",
|
||||
"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"
|
||||
},
|
||||
|
@ -474,10 +474,6 @@ function Grids() {
|
||||
{`<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css" />`}
|
||||
</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>
|
||||
|
||||
<p>
|
||||
|
@ -33,14 +33,6 @@ function Tools() {
|
||||
– Return full path to a Pure file.
|
||||
</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" />
|
||||
|
||||
<p>
|
||||
@ -141,78 +133,6 @@ const css = rework('').use(pureGrids.units({
|
||||
console.log(css);`}
|
||||
</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" />
|
||||
|
||||
<p>
|
||||
|
@ -5,8 +5,8 @@
|
||||
<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.">
|
||||
<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="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">
|
||||
<link rel="stylesheet" href="/css/pure/pure-min.css">
|
||||
<link rel="stylesheet" href="/css/pure/grids-responsive-min.css">
|
||||
<link rel="stylesheet" href="/layouts/blog/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
@ -5,7 +5,7 @@
|
||||
<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.">
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
|
@ -5,8 +5,8 @@
|
||||
<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.">
|
||||
<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="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">
|
||||
<link rel="stylesheet" href="/css/pure/pure-min.css">
|
||||
<link rel="stylesheet" href="/css/pure/grids-responsive-min.css">
|
||||
<link rel="stylesheet" href="/layouts/gallery/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
@ -5,8 +5,8 @@
|
||||
<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.">
|
||||
<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="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">
|
||||
<link rel="stylesheet" href="/css/pure/pure-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="/layouts/marketing/styles.css">
|
||||
</head>
|
||||
|
@ -5,8 +5,8 @@
|
||||
<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.">
|
||||
<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="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">
|
||||
<link rel="stylesheet" href="/css/pure/pure-min.css">
|
||||
<link rel="stylesheet" href="/css/pure/grids-responsive-min.css">
|
||||
<link rel="stylesheet" href="/layouts/pricing/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
@ -5,7 +5,7 @@
|
||||
<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.">
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
|
@ -5,8 +5,8 @@
|
||||
<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.">
|
||||
<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="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">
|
||||
<link rel="stylesheet" href="/css/pure/pure-min.css">
|
||||
<link rel="stylesheet" href="/css/pure/grids-responsive-min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -180,12 +180,8 @@ window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
|
||||
arrange the menus.
|
||||
Code reproduced below:</p>
|
||||
|
||||
<pre class="code" data-language="html"><code><!--[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]-->
|
||||
<pre class="code" data-language="html"><code>
|
||||
<link rel="stylesheet" href="/css/pure/grids-responsive-min.css">
|
||||
|
||||
<style>
|
||||
.custom-wrapper {
|
||||
|
@ -5,7 +5,7 @@
|
||||
<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.">
|
||||
<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>
|
||||
<body>
|
||||
|
||||
|
@ -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.
|
||||
*/
|
||||
|
@ -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 */
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -110,7 +110,7 @@
|
||||
|
||||
<label>E-Mail</label>
|
||||
<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>
|
||||
<input type="text">
|
||||
@ -151,7 +151,7 @@
|
||||
<div class="pure-control-group">
|
||||
<label>Password</label>
|
||||
<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 class="pure-control-group">
|
||||
|
@ -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;
|
||||
|
@ -7,13 +7,7 @@
|
||||
|
||||
<link rel="stylesheet" href="../../../../build/base.css">
|
||||
<link rel="stylesheet" href="../../../../build/grids.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]-->
|
||||
<link rel="stylesheet" href="../../../../build/grids-responsive.css">
|
||||
|
||||
<style>
|
||||
.content {
|
||||
|
@ -13,7 +13,5 @@
|
||||
.pure-menu-horizontal .pure-menu-heading,
|
||||
.pure-menu-horizontal .pure-menu-separator {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
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