mirror of
https://github.com/pure-css/pure.git
synced 2024-11-07 21:34:24 +00:00
Merge branch 'master' of github.com:yui/pure into new-menu
Conflicts: src/menus/css/menus-core.css src/menus/tests/manual/menus.html
This commit is contained in:
Tilo Mitra
commit
e8c024525c
@ -1,5 +1,6 @@
|
||||
{
|
||||
"box-sizing" : false,
|
||||
"display-property-grouping": false,
|
||||
"star-property-hack" : false
|
||||
"star-property-hack" : false,
|
||||
"unqualified-attributes" : false
|
||||
}
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- "0.10"
|
||||
before_script:
|
||||
- npm install -g grunt-cli
|
||||
script: grunt test
|
||||
|
||||
@ -47,7 +47,7 @@ Building Pure is easy, run `grunt`:
|
||||
$ grunt
|
||||
```
|
||||
|
||||
Pure use [CSSLint][] for basic testing to make sure we're shipping valid CSS
|
||||
Pure uses [CSSLint][] for basic testing to make sure we're shipping valid CSS
|
||||
which complies with standard best practices. To run Pure's tests, run
|
||||
`grunt test`:
|
||||
|
||||
|
||||
356
Gruntfile.js
356
Gruntfile.js
@ -1,71 +1,45 @@
|
||||
var path = require('path');
|
||||
|
||||
module.exports = function (grunt) {
|
||||
|
||||
// -- Config -------------------------------------------------------------------
|
||||
|
||||
grunt.initConfig({
|
||||
|
||||
pkg : grunt.file.readJSON('package.json'),
|
||||
normalize: grunt.file.readJSON('src/base/bower.json'),
|
||||
pkg : grunt.file.readJSON('package.json'),
|
||||
bower: grunt.file.readJSON('bower.json'),
|
||||
|
||||
// -- Constants ------------------------------------------------------------
|
||||
// -- bower.json Config ---------------------------------------------------------
|
||||
|
||||
BUILD_COMMENT: 'THIS FILE IS GENERATED BY A BUILD SCRIPT - DO NOT EDIT!',
|
||||
bower_json: {
|
||||
release: {
|
||||
values: {
|
||||
main: 'pure.css'
|
||||
},
|
||||
|
||||
dest: 'build/'
|
||||
}
|
||||
},
|
||||
|
||||
// -- Clean Config ---------------------------------------------------------
|
||||
|
||||
clean: {
|
||||
build : ['build/'],
|
||||
build_res: ['build/*-r.css'],
|
||||
release : ['release/<%= pkg.version %>/'],
|
||||
base : ['src/base/css/', 'src/base/bower.json', 'src/base/LICENSE.md']
|
||||
release : ['release/<%= pkg.version %>/']
|
||||
},
|
||||
|
||||
// -- Copy Config ----------------------------------------------------------
|
||||
|
||||
copy: {
|
||||
build: {
|
||||
expand : true,
|
||||
flatten: true,
|
||||
src : 'src/**/css/*.css',
|
||||
dest : 'build/',
|
||||
|
||||
rename: function (dest, src) {
|
||||
// normalize -> base
|
||||
src = src.replace(/^normalize(-.+\.css|\.css)$/, 'base$1');
|
||||
return path.join(dest, src);
|
||||
}
|
||||
expand : true,
|
||||
flatten: true
|
||||
},
|
||||
|
||||
normalize: {
|
||||
expand : true,
|
||||
flatten: true,
|
||||
cwd : 'bower_components/normalize-css/',
|
||||
src : '{bower.json,LICENSE.md,normalize.css}',
|
||||
dest : 'src/base/',
|
||||
|
||||
rename: function (dest, file) {
|
||||
if (grunt.file.isMatch('*.css', file)) {
|
||||
return path.join(dest, 'css', file);
|
||||
}
|
||||
|
||||
return path.join(dest, file);
|
||||
},
|
||||
|
||||
options: {
|
||||
processContent: function (content, file) {
|
||||
var comment = grunt.config('BUILD_COMMENT');
|
||||
|
||||
if (grunt.file.isMatch({matchBase: true}, '*.css', file)) {
|
||||
content = '/* ' + comment + ' */\n' + content;
|
||||
} else if (grunt.file.isMatch({matchBase: true}, '*.html', file)) {
|
||||
content = '<!-- ' + comment + ' -->\n' + content;
|
||||
}
|
||||
|
||||
return content;
|
||||
}
|
||||
}
|
||||
release: {
|
||||
src : '{LICENSE.md,README.md,HISTORY.md}',
|
||||
dest: 'build/'
|
||||
}
|
||||
},
|
||||
|
||||
@ -74,13 +48,17 @@ grunt.initConfig({
|
||||
concat: {
|
||||
build: {
|
||||
files: [
|
||||
{'build/base.css': [
|
||||
'bower_components/normalize-css/normalize.css',
|
||||
'build/base.css'
|
||||
]},
|
||||
|
||||
{'build/buttons.css': [
|
||||
'build/buttons-core.css',
|
||||
'build/buttons.css'
|
||||
]},
|
||||
|
||||
{'build/forms-nr.css': [
|
||||
'build/forms-core.css',
|
||||
'build/forms.css'
|
||||
]},
|
||||
|
||||
@ -89,16 +67,11 @@ grunt.initConfig({
|
||||
'build/forms-r.css'
|
||||
]},
|
||||
|
||||
{'build/grids-nr.css': [
|
||||
{'build/grids.css': [
|
||||
'build/grids-core.css',
|
||||
'build/grids-units.css'
|
||||
]},
|
||||
|
||||
{'build/grids.css': [
|
||||
'build/grids-nr.css',
|
||||
'build/grids-r.css'
|
||||
]},
|
||||
|
||||
{'build/menus-nr.css': [
|
||||
'build/menus-core.css',
|
||||
'build/menus.css',
|
||||
@ -108,30 +81,28 @@ grunt.initConfig({
|
||||
{'build/menus.css': [
|
||||
'build/menus-nr.css',
|
||||
'build/menus-r.css'
|
||||
]},
|
||||
|
||||
// Rollups
|
||||
|
||||
{'build/<%= pkg.name %>.css': [
|
||||
'build/base.css',
|
||||
'build/grids.css',
|
||||
'build/buttons.css',
|
||||
'build/forms.css',
|
||||
'build/menus.css',
|
||||
'build/tables.css'
|
||||
]},
|
||||
|
||||
{'build/<%= pkg.name %>-nr.css': [
|
||||
'build/base.css',
|
||||
'build/grids.css',
|
||||
'build/buttons.css',
|
||||
'build/forms-nr.css',
|
||||
'build/menus-nr.css',
|
||||
'build/tables.css'
|
||||
]}
|
||||
]
|
||||
},
|
||||
|
||||
all: {
|
||||
files: {
|
||||
'build/<%= pkg.name %>-min.css': [
|
||||
'build/base-min.css',
|
||||
'build/buttons-min.css',
|
||||
'build/forms-min.css',
|
||||
'build/grids-min.css',
|
||||
'build/menus-min.css',
|
||||
'build/tables-min.css'
|
||||
],
|
||||
|
||||
'build/<%= pkg.name %>-nr-min.css': [
|
||||
'build/base-min.css',
|
||||
'build/buttons-min.css',
|
||||
'build/forms-nr-min.css',
|
||||
'build/grids-nr-min.css',
|
||||
'build/menus-nr-min.css',
|
||||
'build/tables-min.css'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -142,20 +113,19 @@ grunt.initConfig({
|
||||
csslintrc: '.csslintrc'
|
||||
},
|
||||
|
||||
src: {
|
||||
src: [
|
||||
'src/**/css/*.css',
|
||||
'!src/base/css/*',
|
||||
'!src/forms/css/forms-core.css'
|
||||
]
|
||||
}
|
||||
base : ['src/base/css/*.css'],
|
||||
buttons: ['src/buttons/css/*.css'],
|
||||
forms : ['src/forms/css/*.css'],
|
||||
grids : ['src/grids/css/*.css'],
|
||||
menus : ['src/menus/css/*.css'],
|
||||
tables : ['src/tables/css/*.css']
|
||||
},
|
||||
|
||||
// -- CSSMin Config --------------------------------------------------------
|
||||
|
||||
cssmin: {
|
||||
options: {
|
||||
// report: 'gzip'
|
||||
noAdvanced: true
|
||||
},
|
||||
|
||||
files: {
|
||||
@ -170,12 +140,12 @@ grunt.initConfig({
|
||||
compress: {
|
||||
release: {
|
||||
options: {
|
||||
archive: 'release/<%= pkg.version %>/<%= pkg.name %>-<%= pkg.version %>.zip'
|
||||
archive: 'release/<%= pkg.version %>/<%= pkg.name %>-<%= pkg.version %>.tar.gz'
|
||||
},
|
||||
|
||||
expand : true,
|
||||
flatten: true,
|
||||
src : 'build/*.css',
|
||||
src : 'build/*',
|
||||
dest : '<%= pkg.name %>/<%= pkg.version %>/'
|
||||
}
|
||||
},
|
||||
@ -187,7 +157,7 @@ grunt.initConfig({
|
||||
options: {
|
||||
banner: [
|
||||
'/*!',
|
||||
'normalize.css v<%= normalize.version %> | MIT License | git.io/normalize',
|
||||
'normalize.css v<%= bower.devDependencies["normalize-css"] %> | MIT License | git.io/normalize',
|
||||
'Copyright (c) Nicolas Gallagher and Jonathan Neal',
|
||||
'*/\n'
|
||||
].join('\n')
|
||||
@ -195,7 +165,7 @@ grunt.initConfig({
|
||||
|
||||
expand: true,
|
||||
cwd : 'build/',
|
||||
src : ['base*.css', 'forms*.css', 'tables*.css', '<%= pkg.name %>*.css']
|
||||
src : ['base*.css', '<%= pkg.name %>*.css']
|
||||
},
|
||||
|
||||
yahoo: {
|
||||
@ -203,7 +173,7 @@ grunt.initConfig({
|
||||
banner: [
|
||||
'/*!',
|
||||
'Pure v<%= pkg.version %>',
|
||||
'Copyright 2013 Yahoo! Inc. All rights reserved.',
|
||||
'Copyright 2014 Yahoo! Inc. All rights reserved.',
|
||||
'Licensed under the BSD License.',
|
||||
'https://github.com/yui/pure/blob/master/LICENSE.md',
|
||||
'*/\n'
|
||||
@ -215,16 +185,52 @@ grunt.initConfig({
|
||||
}
|
||||
},
|
||||
|
||||
// -- Contextualize Config -------------------------------------------------
|
||||
// -- Pure Grids Units Config ----------------------------------------------
|
||||
|
||||
contextualize: {
|
||||
normalize: {
|
||||
src : 'src/base/css/normalize.css',
|
||||
dest: 'src/base/css/normalize-context.css',
|
||||
pure_grids: {
|
||||
default_units: {
|
||||
dest: 'build/grids-units.css',
|
||||
|
||||
options: {
|
||||
prefix: '.pure',
|
||||
banner: '/* <%= BUILD_COMMENT %> */\n'
|
||||
units: [5, 24]
|
||||
}
|
||||
},
|
||||
|
||||
responsive: {
|
||||
dest: 'build/grids-responsive.css',
|
||||
|
||||
options: {
|
||||
mediaQueries: {
|
||||
sm: 'screen and (min-width: 35.5em)', // 568px
|
||||
md: 'screen and (min-width: 48em)', // 768px
|
||||
lg: 'screen and (min-width: 64em)', // 1024px
|
||||
xl: 'screen and (min-width: 80em)' // 1280px
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// -- 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: {
|
||||
base: {
|
||||
src : 'build/base.css',
|
||||
dest: 'build/base-context.css',
|
||||
|
||||
options: {
|
||||
mutations: [{prefix: '.pure'}]
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -234,7 +240,7 @@ grunt.initConfig({
|
||||
observe: {
|
||||
src: {
|
||||
files: 'src/**/css/*.css',
|
||||
tasks: ['test', 'suppress', 'default'],
|
||||
tasks: ['test', 'suppress', 'build'],
|
||||
|
||||
options: {
|
||||
interrupt: true
|
||||
@ -245,6 +251,7 @@ grunt.initConfig({
|
||||
|
||||
// -- Main Tasks ---------------------------------------------------------------
|
||||
|
||||
// npm tasks.
|
||||
grunt.loadNpmTasks('grunt-contrib-clean');
|
||||
grunt.loadNpmTasks('grunt-contrib-copy');
|
||||
grunt.loadNpmTasks('grunt-contrib-concat');
|
||||
@ -252,169 +259,38 @@ grunt.loadNpmTasks('grunt-contrib-csslint');
|
||||
grunt.loadNpmTasks('grunt-contrib-cssmin');
|
||||
grunt.loadNpmTasks('grunt-contrib-compress');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-css-selectors');
|
||||
grunt.loadNpmTasks('grunt-pure-grids');
|
||||
grunt.loadNpmTasks('grunt-stripmq');
|
||||
|
||||
grunt.registerTask('default', [
|
||||
// Local tasks.
|
||||
grunt.loadTasks('tasks/');
|
||||
|
||||
grunt.registerTask('default', ['import', 'test', 'build']);
|
||||
grunt.registerTask('import', ['bower_install']);
|
||||
grunt.registerTask('test', ['csslint']);
|
||||
grunt.registerTask('build', [
|
||||
'clean:build',
|
||||
'copy:build',
|
||||
'pure_grids',
|
||||
'stripmq',
|
||||
'concat:build',
|
||||
'clean:build_res',
|
||||
'css_selectors:base',
|
||||
'cssmin',
|
||||
'concat:all',
|
||||
'license'
|
||||
]);
|
||||
|
||||
grunt.registerTask('test', [
|
||||
'csslint'
|
||||
]);
|
||||
|
||||
// Makes the `watch` task run a build first.
|
||||
grunt.renameTask('watch', 'observe');
|
||||
grunt.registerTask('watch', ['default', 'observe']);
|
||||
|
||||
grunt.registerTask('import', [
|
||||
'bower-install',
|
||||
'import-normalize'
|
||||
]);
|
||||
|
||||
grunt.registerTask('release', [
|
||||
'test',
|
||||
'default',
|
||||
'clean:release',
|
||||
'copy:release',
|
||||
'bower_json:release',
|
||||
'compress:release'
|
||||
]);
|
||||
|
||||
// -- Suppress Task ------------------------------------------------------------
|
||||
|
||||
grunt.registerTask('suppress', function () {
|
||||
var allowed = ['success', 'fail', 'warn', 'error'];
|
||||
|
||||
grunt.util.hooker.hook(grunt.log, {
|
||||
passName: true,
|
||||
|
||||
pre: function (name) {
|
||||
if (allowed.indexOf(name) === -1) {
|
||||
grunt.log.muted = true;
|
||||
}
|
||||
},
|
||||
|
||||
post: function () {
|
||||
grunt.log.muted = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// -- Import Tasks -------------------------------------------------------------
|
||||
|
||||
grunt.registerTask('import-normalize', [
|
||||
'clean:base',
|
||||
'copy:normalize',
|
||||
'contextualize:normalize'
|
||||
]);
|
||||
|
||||
// -- Bower Task ---------------------------------------------------------------
|
||||
|
||||
grunt.registerTask('bower-install', 'Installs Bower dependencies.', function () {
|
||||
var bower = require('bower'),
|
||||
done = this.async();
|
||||
|
||||
bower.commands.install()
|
||||
.on('data', function (data) { grunt.log.write(data); })
|
||||
.on('end', done);
|
||||
});
|
||||
|
||||
// -- License Task -------------------------------------------------------------
|
||||
|
||||
grunt.registerMultiTask('license', 'Stamps license banners on files.', function () {
|
||||
var options = this.options({banner: ''}),
|
||||
banner = grunt.template.process(options.banner),
|
||||
tally = 0;
|
||||
|
||||
this.files.forEach(function (filePair) {
|
||||
filePair.src.forEach(function (file) {
|
||||
grunt.file.write(file, banner + grunt.file.read(file));
|
||||
tally += 1;
|
||||
});
|
||||
});
|
||||
|
||||
grunt.log.writeln('Stamped license on ' + String(tally).cyan + ' files.');
|
||||
});
|
||||
|
||||
// -- Contextualize Task -------------------------------------------------------
|
||||
|
||||
grunt.registerMultiTask('contextualize', 'Makes Contextualized CSS files.', function () {
|
||||
var Parser = require('parserlib').css.Parser,
|
||||
done = this.async(),
|
||||
options = this.options({banner: ''}),
|
||||
banner = grunt.template.process(options.banner),
|
||||
processing = 0;
|
||||
|
||||
function oneDone() {
|
||||
if (!(processing -= 1)) {
|
||||
done();
|
||||
}
|
||||
}
|
||||
|
||||
this.files.forEach(function (filePair) {
|
||||
filePair.src.forEach(function (file) {
|
||||
var src = grunt.file.read(file),
|
||||
contextual = banner,
|
||||
parser = new Parser();
|
||||
|
||||
parser.addListener('endstylesheet', function () {
|
||||
grunt.file.write(filePair.dest, contextual);
|
||||
grunt.log.writeln('File "' + filePair.dest + '" created.');
|
||||
oneDone();
|
||||
});
|
||||
|
||||
// Fired right before CSS properties are parsed for a certain rule.
|
||||
// Go through and add all the selectors to the `css` string.
|
||||
parser.addListener('startrule', function (event) {
|
||||
var prefix = options.prefix;
|
||||
|
||||
event.selectors.forEach(function (selector, i) {
|
||||
var nextSelector = event.selectors[i + 1];
|
||||
|
||||
// If the selector does not contain the html selector, we
|
||||
// can go ahead and prepend `prefix` in front of it.
|
||||
if (selector.text.indexOf('html') === -1) {
|
||||
contextual += prefix + ' ' + selector.text;
|
||||
} else if (selector.text.indexOf('html') !== -1) {
|
||||
// If it contains `html`, replace the `html` with the
|
||||
// `prefix`. Replace multiple spaces with a single
|
||||
// space. This is for the case where
|
||||
// `html input[type='button']` comes through as
|
||||
// `html input[type='button']`.
|
||||
contextual += selector.text.replace('html', prefix).replace(/ +/g, ' ');
|
||||
}
|
||||
|
||||
// If theres another selector, add a comma.
|
||||
if (nextSelector) {
|
||||
contextual += ',\n';
|
||||
} else {
|
||||
// Otherwise, add an opening bracket for properties
|
||||
contextual += ' {\n';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Fired right after CSS properties are parsed for a certain rule.
|
||||
// Add the closing bracket to end the CSS Rule.
|
||||
parser.addListener('endrule', function (event) {
|
||||
contextual += '}\n';
|
||||
});
|
||||
|
||||
// Fired for each property that the parser encounters. Add these
|
||||
// properties to the `css` string with 4 spaces.
|
||||
parser.addListener('property', function (event) {
|
||||
// Add 4 spaces tab.
|
||||
contextual += ' ' + event.property + ': ' + event.value + ';\n';
|
||||
});
|
||||
|
||||
// Do the parsing.
|
||||
processing += 1;
|
||||
parser.parse(src);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
264
HISTORY.md
264
HISTORY.md
@ -1,10 +1,243 @@
|
||||
Pure Change History
|
||||
===================
|
||||
|
||||
NEXT
|
||||
----
|
||||
0.5.0 (2014-05-27)
|
||||
------------------
|
||||
|
||||
### Base
|
||||
|
||||
* Added the `.pure-img` class name for make images scale with the viewport in
|
||||
fluid layouts.
|
||||
|
||||
### Grids
|
||||
|
||||
* __[!]__ Removed `.pure-g-r` from core, in favor of a mobile-first responsive
|
||||
grid system. ([#24][], [#267][])
|
||||
|
||||
To use the mobile-first grid system, you need to pull in `pure.css`, along
|
||||
with `grids-responsive.css`. We also have `grids-responsive-old-ie.css` that
|
||||
you can serve to IE < 9 users so that they can view a desktop-version of your
|
||||
website:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/pure-min.css">
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/grids-responsive-old-ie-min.css">
|
||||
<![endif]-->
|
||||
<!--[if gt IE 8]><!-->
|
||||
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/grids-responsive-min.css">
|
||||
<!--<![endif]-->
|
||||
```
|
||||
|
||||
Find out more about the new grid system at <http://purecss.io/grids/>.
|
||||
|
||||
### Tables
|
||||
|
||||
* Switched cell padding in Tables from `px` to `em` units, and also increased
|
||||
the amount of padding to `padding: 0.5em 1em`.
|
||||
|
||||
|
||||
[#24]: https://github.com/yui/pure/issues/24
|
||||
[#267]: https://github.com/yui/pure/pull/267
|
||||
|
||||
|
||||
0.4.2 (2014-02-13)
|
||||
------------------
|
||||
|
||||
* Added `main` to Pure's `bower.json` file to allow easier integration with
|
||||
build processes and tooling. ([#286][] @stevenvachon)
|
||||
|
||||
### Forms
|
||||
|
||||
* Improved how `<input type="color">` elements look in Chrome by fixing
|
||||
paddings. ([#283][] @jpetto)
|
||||
|
||||
* Removed `font-size` rules from `<input>`, `<legend>`, and `<fieldset>`
|
||||
elements within `.pure-form`. Font sizes are now inherited from the
|
||||
application's CSS file. ([#265][])
|
||||
|
||||
* Invalid `<input>` elements within a Pure Form no longer explicitly set a
|
||||
`border-width`. ([#295][] @kwando)
|
||||
|
||||
|
||||
[#265]: https://github.com/yui/pure/issues/265
|
||||
[#283]: https://github.com/yui/pure/issues/283
|
||||
[#286]: https://github.com/yui/pure/issues/286
|
||||
[#295]: https://github.com/yui/pure/issues/295
|
||||
|
||||
|
||||
0.4.1 (2014-02-06)
|
||||
------------------
|
||||
|
||||
### Base
|
||||
|
||||
* Elements that have Pure classnames which set a `display` declaration _and_ use
|
||||
the `hidden` HTML attribute will now properly be hidden. With these changes,
|
||||
the following button will be hidden from view:
|
||||
|
||||
```html
|
||||
<button class="pure-button" hidden>No showy</button>
|
||||
```
|
||||
|
||||
A new rule for the `[hidden]` selector has been added with the declaration:
|
||||
`display: none !important;`. This is a time where it's appropriate for a
|
||||
project like Pure to use `!important`. ([#177][])
|
||||
|
||||
### Buttons
|
||||
|
||||
* Removed all the occurrences of `-ms-linear-gradient()` from Buttons since it
|
||||
has never been in the final version of IE 10. ([#200][]: @AurelioDeRosa)
|
||||
|
||||
* `<input>` Buttons now have the same height as non-input buttons.
|
||||
`font-family: inherit;` has been added to the `.pure-button` selector to
|
||||
normalize the difference in height. ([#221][] @narcis-radu)
|
||||
|
||||
* Buttons now have visually uniform default `padding` on all four sides. The
|
||||
left/right padding is 2x the top/bottom padding. ([#191][] @achalv)
|
||||
|
||||
### Forms
|
||||
|
||||
* Added `vertical-align: top;` to `<textarea>`s within `.pure-form-aligned`
|
||||
Forms to fix an alignment issue where its label was aligned to the middle.
|
||||
([#174][] @rictorres, @ItsAsbreuk)
|
||||
|
||||
* Added styling for `<input>` elements that don't have a `type` attribute.
|
||||
([#261][] @dougdavies)
|
||||
|
||||
### Grids
|
||||
|
||||
* Added all non-reduced fractions to Grids default 5ths- and 24ths-based units.
|
||||
There are now styles specified for `.pure-u-1-24` – `.pure-u-24-24`. All 5ths-
|
||||
based units and reduced factions still remain; e.g., both `.pure-u-12-24` and
|
||||
`.pure-u-1-2` exist. ([#144][] @mike-engel)
|
||||
|
||||
* Removed `grids-units.css` from `src/`, this file is now generated via a Grunt
|
||||
task. The units generation is done via the new
|
||||
[`rework-pure-grids`][rework-pure-grids] [Rework][] plugin, and it can be used
|
||||
to create any custom nth-based units for Pure's Grids system.
|
||||
|
||||
### Menus
|
||||
|
||||
* Removed hard-coded height for horizontal menus. ([#164][])
|
||||
|
||||
|
||||
[#144]: https://github.com/yui/pure/issues/144
|
||||
[#164]: https://github.com/yui/pure/issues/164
|
||||
[#174]: https://github.com/yui/pure/issues/174
|
||||
[#177]: https://github.com/yui/pure/issues/177
|
||||
[#191]: https://github.com/yui/pure/issues/191
|
||||
[#200]: https://github.com/yui/pure/issues/200
|
||||
[#221]: https://github.com/yui/pure/issues/221
|
||||
[#261]: https://github.com/yui/pure/issues/261
|
||||
|
||||
[rework-pure-grids]: https://github.com/ericf/rework-pure-grids
|
||||
[Rework]: https://github.com/visionmedia/rework
|
||||
|
||||
|
||||
0.4.0 (2014-02-06)
|
||||
------------------
|
||||
|
||||
* __[!]__ Corrupted release build, use `0.4.1`.
|
||||
|
||||
|
||||
0.3.0 (2013-09-09)
|
||||
------------------
|
||||
|
||||
* __[!]__ Pure now requires the Base module (which is Normalize.css) to be on
|
||||
the page. Pure has essentially always required the styles provided by
|
||||
Normalize.css via the Base module, and this now makes it a firm requirement.
|
||||
The `pure-min.css` and `pure-nr-min.css` rollup files already include the Base
|
||||
module.
|
||||
|
||||
**Note:** When using a [custom subset][Customize] of Pure, be sure to include
|
||||
the Base module.
|
||||
|
||||
* Added non-minified rollup files: `pure.css` and `pure-nr.css`. These files are
|
||||
created in addition to the minified rollups: `pure-min.css` and
|
||||
`pure-nr-min.css`. The minified rollups _should_ be used in production.
|
||||
([#171][] @omeid)
|
||||
|
||||
### Base
|
||||
|
||||
* __[!]__ Removed Normalize.css from checked-in `src/`. Bower is now used to
|
||||
programmatically import Normalize.css into `bower_components/` if it's not
|
||||
already installed. Normalize.css is still bundled with Pure, this change is a
|
||||
development-time change only. ([#160][])
|
||||
|
||||
### Buttons
|
||||
|
||||
* Removed `-webkit-font-smoothing: antialiased` rule from Buttons. Pure should
|
||||
not dictate sub-pixel font rendering, that should be left to the person's
|
||||
browser settings and/or the developer. ([#170][] @dchest)
|
||||
|
||||
### Forms
|
||||
|
||||
* __[!]__ Removed `forms-core.css`. This was a copy of Normalize.css' form
|
||||
related styles. Now that Pure requires the Base module (Normalize.css) to be
|
||||
on the page, the Forms Core submodule is no longer needed. ([#160][])
|
||||
|
||||
* Added `:focus` styles to `[readonly]` `<input>` elements. ([#143][])
|
||||
|
||||
* Removed `-webkit-font-smoothing: antialiased` rule from Forms input styles.
|
||||
Pure should not dictate sub-pixel font rendering, that should be left to the
|
||||
person's browser settings and/or the developer. ([#185][] @dchest)
|
||||
|
||||
### Grids
|
||||
|
||||
* __[!]__ Improved support for Grids across OS/browser combinations, and its
|
||||
ability to withstand the use of non-default fonts when set by either the
|
||||
person in their browser settings or by the developer using custom fonts.
|
||||
|
||||
Grids now uses CSS3 Flexbox when possible to avoid the side-effects of setting
|
||||
a negative `letter-spacing` — the fallback for older browsers. Grids also now
|
||||
uses a specific font stack on `.pure-g` and `.pure-g-r` classes to ensure the
|
||||
greatest OS/browser compatibility when non-default fonts are being used. By
|
||||
default grid units will now have `font-family: sans-serif;` applied — this is
|
||||
the default font stack Pure's Base module (Normalize.css) applies to the
|
||||
`<body>`.
|
||||
|
||||
This is a **breaking change** if you are using any non-default fonts in your
|
||||
web project. Fortunately, it's quite easy to make sure your custom font stacks
|
||||
apply to content within Pure Girds. Instead of applying your custom font to
|
||||
only the `<body>` element, apply it to the grid units as well:
|
||||
|
||||
```css
|
||||
body,
|
||||
.pure-g [class *= "pure-u"],
|
||||
.pure-g-r [class *= "pure-u"] {
|
||||
/* Set you're content font stack here: */
|
||||
font-family: Georgia, Times, "Times New Roman", serif;
|
||||
}
|
||||
```
|
||||
|
||||
Refer to the [Grids Documentation][Grids-fonts] for more details on using
|
||||
non-default fonts with Pure Grids.
|
||||
([#41][], [#162][], [#166][], [#189][]: @adapterik @dannyfritz, @pandeiro)
|
||||
|
||||
* Fixed grid units from falling to a new line on IE 6 and IE 7. Grid units now
|
||||
have a separate `*width` value for these older versions of IE. This value is
|
||||
`0.005%` less than the standard `width` value. This fix does not affect modern
|
||||
browsers because it uses the star hack. ([#154][])
|
||||
|
||||
* Added a `height: auto` rule to images within a `.pure-g-r` so that their
|
||||
aspect ratios are maintained when the page is resized. ([#172][]: @dchest)
|
||||
|
||||
|
||||
[#41]: https://github.com/yui/pure/issues/41
|
||||
[#143]: https://github.com/yui/pure/issues/143
|
||||
[#154]: https://github.com/yui/pure/issues/154
|
||||
[#160]: https://github.com/yui/pure/issues/160
|
||||
[#162]: https://github.com/yui/pure/issues/162
|
||||
[#166]: https://github.com/yui/pure/issues/166
|
||||
[#170]: https://github.com/yui/pure/issues/170
|
||||
[#171]: https://github.com/yui/pure/issues/171
|
||||
[#172]: https://github.com/yui/pure/issues/172
|
||||
[#185]: https://github.com/yui/pure/issues/185
|
||||
[#189]: https://github.com/yui/pure/issues/189
|
||||
|
||||
[Customize]: http://purecss.io/customize/
|
||||
[Grids-fonts]: http://purecss.io/grids/#using-grids-with-custom-fonts
|
||||
|
||||
|
||||
0.2.1 (2013-07-17)
|
||||
@ -12,8 +245,8 @@ NEXT
|
||||
|
||||
### Forms
|
||||
|
||||
* (!) Made `[readonly]` `<input>`s look visually different to `[disabled]` and
|
||||
regular `<input>`s. ([#102][]: @jaseg)
|
||||
* __[!]__ Made `[readonly]` `<input>`s look visually different to `[disabled]`
|
||||
and regular `<input>`s. ([#102][]: @jaseg)
|
||||
|
||||
* Fixed copy/paste bug that mapped text inputs to `.pure-form` instead of
|
||||
`.pure-group`. The `.pure-form-group input` styles are now applied to all
|
||||
@ -32,7 +265,7 @@ NEXT
|
||||
|
||||
### Grids
|
||||
|
||||
* (!) Changed `.pure-u-1` grid unit to now use `width: 100%` instead of
|
||||
* __[!]__ Changed `.pure-u-1` grid unit to now use `width: 100%` instead of
|
||||
`display: block` to achieve taking up the full width of its container. This
|
||||
makes it easier to override and align since it's using `display: inline-block`
|
||||
like the other grid units. ([#94][])
|
||||
@ -42,9 +275,9 @@ NEXT
|
||||
|
||||
### Menus
|
||||
|
||||
* (!) Fixed broken styling of active paginator items by using Grids CSS rules to
|
||||
layout items horizontally; this makes sure the active item isn't overlapped.
|
||||
([#127][])
|
||||
* __[!]__ Fixed broken styling of active paginator items by using Grids CSS
|
||||
rules to layout items horizontally; this makes sure the active item isn't
|
||||
overlapped. ([#127][])
|
||||
|
||||
### Tables
|
||||
|
||||
@ -61,15 +294,16 @@ NEXT
|
||||
[#109]: https://github.com/yui/pure/issues/109
|
||||
[#115]: https://github.com/yui/pure/issues/115
|
||||
[#127]: https://github.com/yui/pure/issues/127
|
||||
[#172]: https://github.com/yui/pure/pull/172
|
||||
|
||||
|
||||
0.2.0 (2013-06-11)
|
||||
------------------
|
||||
|
||||
* (!) Fixed accessibility mistake by removing `a:focus {outline: none;}` rule
|
||||
from `buttons-core.css`.
|
||||
* __[!]__ Fixed accessibility mistake by removing `a:focus {outline: none;}`
|
||||
rule from `buttons-core.css`.
|
||||
|
||||
* (!) Improved `:focus` styles by applying the same rules that are used by
|
||||
* __[!]__ Improved `:focus` styles by applying the same rules that are used by
|
||||
`:hover` styles. When overriding Pure's `:hover` styles, be sure to include
|
||||
`:focus` selectors as well.
|
||||
|
||||
@ -91,7 +325,7 @@ NEXT
|
||||
|
||||
### Forms
|
||||
|
||||
* (!) `.pure-help-inline` has been replaced with `.pure-form-message-inline`. We
|
||||
* __[!]__ Replaced `.pure-help-inline` with `.pure-form-message-inline`. We
|
||||
still support the older classname but it is deprecated and will be going away
|
||||
in a future release. ([#32][]: @dannytatom)
|
||||
|
||||
@ -142,7 +376,7 @@ NEXT
|
||||
0.1.0 (2013-05-24)
|
||||
------------------
|
||||
|
||||
* (!) Initial public release.
|
||||
* __[!]__ Initial public release.
|
||||
|
||||
* Upgraded Normalize.css to 1.1.2.
|
||||
|
||||
@ -166,9 +400,9 @@ NEXT
|
||||
0.0.2 (2013-05-16)
|
||||
------------------
|
||||
|
||||
* (!) Renamed to Pure.
|
||||
* __[!]__ Renamed to Pure.
|
||||
|
||||
* (!) Renamed CSS classname prefix to `pure`.
|
||||
* __[!]__ Renamed CSS classname prefix to `pure`.
|
||||
|
||||
* Preview release (2).
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
Software License Agreement (BSD License)
|
||||
========================================
|
||||
|
||||
Copyright 2013 Yahoo! Inc. All rights reserved.
|
||||
Copyright 2014 Yahoo! Inc. All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
43
README.md
43
README.md
@ -11,13 +11,20 @@ A set of small, responsive CSS modules that you can use in every web project.
|
||||
**Use From the CDN:**
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css">
|
||||
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
|
||||
```
|
||||
|
||||
Alternatively, you can [customize how you use Pure][customize].
|
||||
Note: You can [customize which Pure modules you need][customize].
|
||||
|
||||
**Install with Bower:**
|
||||
|
||||
```shell
|
||||
$ bower install --save pure
|
||||
```
|
||||
|
||||
|
||||
[Pure]: http://purecss.io/
|
||||
[Bower]: http://bower.io/
|
||||
[Build Status]: https://travis-ci.org/yui/pure
|
||||
[customize]: http://purecss.io/customize/
|
||||
|
||||
@ -48,7 +55,7 @@ of all the CSS work that every site needs, without making it look cookie-cutter:
|
||||
|
||||
* Easy one-click customization with the [Skin Builder][].
|
||||
|
||||
* Extremely small file size: **4.3KB minified + gzip**.
|
||||
* Extremely small file size: **4.5KB minified + gzip**.
|
||||
|
||||
|
||||
[Normalize.css]: http://necolas.github.io/normalize.css/
|
||||
@ -65,7 +72,13 @@ You can include the Pure CSS file in your project by fetching it from Yahoo's
|
||||
CDN:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css">
|
||||
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
|
||||
```
|
||||
|
||||
You can also install Pure using [Bower][], using the following command:
|
||||
|
||||
```shell
|
||||
$ bower install --save pure
|
||||
```
|
||||
|
||||
|
||||
@ -100,11 +113,23 @@ conventions of the files in the `build/` directory follow these rules:
|
||||
|
||||
* `*-min.css`: A minified file version of the files of the same name.
|
||||
|
||||
* `pure-min.css`: A rollup of all `[module]-min.css` files in the `build/` dir.
|
||||
This is a responsive roll-up of everything.
|
||||
* `pure.css`: A rollup of all `[module].css` files in the `build/` dir. This is
|
||||
a responsive roll-up of everything, non-minified.
|
||||
|
||||
* `pure-nr-min.css`: A Rollup of all modules without @media queries. This is a
|
||||
non-responsive roll-up of everything.
|
||||
* `pure-min.css`: Minified version of `pure.css` that should be used in
|
||||
production.
|
||||
|
||||
* `pure-nr.css`: A Rollup of all modules without @media queries. This is a
|
||||
non-responsive roll-up of everything, non-minified.
|
||||
|
||||
* `pure-nr-min.css`: Minified version of `pure-nr.css` that should be used in
|
||||
production.
|
||||
|
||||
* `grids-responsive.css`: Unminified version of Pure's grid stylesheet which
|
||||
includes @media queries.
|
||||
|
||||
* `grids-responsive-min.css`: Minified version of `grids-responsive.css` that
|
||||
should be used in production.
|
||||
|
||||
|
||||
[Grunt]: http://gruntjs.com/
|
||||
@ -117,7 +142,7 @@ Pure is tested and works in:
|
||||
|
||||
* IE 7+
|
||||
* Latest Stable: Firefox, Chrome, Safari
|
||||
* iOS 6.x
|
||||
* iOS 6.x, 7.x
|
||||
* Android 4.x
|
||||
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
{
|
||||
"name": "pure",
|
||||
"version": "0.2.2-pre",
|
||||
"version": "0.5.0",
|
||||
"main": "build/pure.css",
|
||||
"devDependencies": {
|
||||
"normalize-css": "1.x"
|
||||
"normalize-css": "1.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
28
package.json
28
package.json
@ -1,18 +1,24 @@
|
||||
{
|
||||
"name": "pure",
|
||||
"version": "0.2.2-pre",
|
||||
"version": "0.5.0",
|
||||
"private": true,
|
||||
"repository": "git://github.com/yui/pure.git",
|
||||
"scripts": {
|
||||
"test": "grunt test"
|
||||
},
|
||||
"devDependencies": {
|
||||
"bower": "~0.9.2",
|
||||
"grunt": "~0.4.1",
|
||||
"grunt-contrib-cssmin": "~0.6.0",
|
||||
"grunt-contrib-clean": "~0.4.1",
|
||||
"grunt-contrib-copy": "~0.4.1",
|
||||
"grunt-contrib-concat": "~0.3.0",
|
||||
"grunt-contrib-compress": "~0.5.0",
|
||||
"grunt-contrib-csslint": "~0.1.2",
|
||||
"grunt-contrib-watch": "~0.3.1",
|
||||
"parserlib": "~0.2.2"
|
||||
"bower": "^1.3.7",
|
||||
"grunt": "^0.4.5",
|
||||
"grunt-cli": "^0.1.13",
|
||||
"grunt-contrib-clean": "^0.5.0",
|
||||
"grunt-contrib-compress": "^0.9.1",
|
||||
"grunt-contrib-concat": "^0.4.0",
|
||||
"grunt-contrib-copy": "^0.5.0",
|
||||
"grunt-contrib-csslint": "^0.2.0",
|
||||
"grunt-contrib-cssmin": "^0.6.2",
|
||||
"grunt-contrib-watch": "^0.6.1",
|
||||
"grunt-css-selectors": "^1.1.0",
|
||||
"grunt-pure-grids": "^1.0.0",
|
||||
"grunt-stripmq": "0.0.6"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
Copyright (c) Nicolas Gallagher and Jonathan Neal
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||
of the Software, and to permit persons to whom the Software is furnished to do
|
||||
so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -1,17 +0,0 @@
|
||||
Base
|
||||
====
|
||||
|
||||
Base comprises of Normalize.css - a modern, HTML5-ready alternative to CSS
|
||||
resets.
|
||||
|
||||
This component is a port of the original Normalize.css project, which can be
|
||||
found at <http://necolas.github.com/normalize.css/>.
|
||||
|
||||
|
||||
Differences
|
||||
-----------
|
||||
|
||||
Changes are minimal. Base uses Normalize v1.1.1.
|
||||
|
||||
- Create a contextual normalize.css (normalize-context.css) toggled off a
|
||||
parent classname: `.pure`.
|
||||
@ -1,23 +0,0 @@
|
||||
{
|
||||
"name": "normalize-css",
|
||||
"version": "1.1.2",
|
||||
"main": "normalize.css",
|
||||
"author": {
|
||||
"name": "Nicolas Gallagher"
|
||||
},
|
||||
"ignore": [
|
||||
"CHANGELOG.md",
|
||||
"CONTRIBUTING.md",
|
||||
"component.json",
|
||||
"test.html"
|
||||
],
|
||||
"gitHead": "223bec90d51f76d81a58a6ba8c0133b87d0f4ffc",
|
||||
"readme": "# normalize.css v1\n\nNormalize.css is a customisable CSS file that makes browsers render all\nelements more consistently and in line with modern standards. We researched the\ndifferences between default browser styles in order to precisely target only\nthe styles that need normalizing.\n\n[Check out the demo](http://necolas.github.io/normalize.css/1.1.0/test.html)\n\n## What does it do?\n\n* Preserves useful defaults, unlike many CSS resets.\n* Normalizes styles for a wide range of elements.\n* Corrects bugs and common browser inconsistencies.\n* Improves usability with subtle improvements.\n* Explains what code does using detailed comments.\n\n## How to use it\n\nNormalize.css is intended to be used as an alternative to CSS resets.\n\nIt's suggested that you read the `normalize.css` file and consider customising\nit to meet your needs. Alternatively, include the file in your project and\noverride the defaults later in your CSS.\n\n## Browser support\n\n* Google Chrome\n* Mozilla Firefox 3+\n* Apple Safari 4+\n* Opera 10+\n* Internet Explorer 6+\n\n## Contribute\n\nPlease read the CONTRIBUTING.md\n\n## Acknowledgements\n\nNormalize.css is a project by [Nicolas Gallagher](https://github.com/necolas),\nco-created with [Jonathan Neal](https://github.com/jonathantneal).\n",
|
||||
"readmeFilename": "README.md",
|
||||
"_id": "normalize-css@1.1.2",
|
||||
"description": "Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/necolas/normalize.css.git"
|
||||
}
|
||||
}
|
||||
27
src/base/css/base.css
Normal file
27
src/base/css/base.css
Normal file
@ -0,0 +1,27 @@
|
||||
/*csslint important:false*/
|
||||
|
||||
/* ==========================================================================
|
||||
Pure Base Extras
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Extra rules that Pure adds on top of Normalize.css
|
||||
*/
|
||||
|
||||
/**
|
||||
* Always hide an element when it has the `hidden` HTML attribute.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add this class to an image to make it fit within it's fluid parent wrapper while maintaining
|
||||
* aspect ratio.
|
||||
*/
|
||||
.pure-img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
@ -1,233 +0,0 @@
|
||||
/* THIS FILE IS GENERATED BY A BUILD SCRIPT - DO NOT EDIT! */
|
||||
.pure article,
|
||||
.pure aside,
|
||||
.pure details,
|
||||
.pure figcaption,
|
||||
.pure figure,
|
||||
.pure footer,
|
||||
.pure header,
|
||||
.pure hgroup,
|
||||
.pure main,
|
||||
.pure nav,
|
||||
.pure section,
|
||||
.pure summary {
|
||||
display: block;
|
||||
}
|
||||
.pure audio,
|
||||
.pure canvas,
|
||||
.pure video {
|
||||
display: inline-block;
|
||||
}
|
||||
.pure audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
.pure [hidden] {
|
||||
display: none;
|
||||
}
|
||||
.pure {
|
||||
font-size: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
.pure,
|
||||
.pure button,
|
||||
.pure input,
|
||||
.pure select,
|
||||
.pure textarea {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.pure body {
|
||||
margin: 0;
|
||||
}
|
||||
.pure a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
.pure a:active,
|
||||
.pure a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
.pure h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
.pure h2 {
|
||||
font-size: 1.5em;
|
||||
margin: 0.83em 0;
|
||||
}
|
||||
.pure h3 {
|
||||
font-size: 1.17em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
.pure h4 {
|
||||
font-size: 1em;
|
||||
margin: 1.33em 0;
|
||||
}
|
||||
.pure h5 {
|
||||
font-size: 0.83em;
|
||||
margin: 1.67em 0;
|
||||
}
|
||||
.pure h6 {
|
||||
font-size: 0.67em;
|
||||
margin: 2.33em 0;
|
||||
}
|
||||
.pure abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
.pure b,
|
||||
.pure strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.pure blockquote {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
.pure dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
.pure hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
.pure mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
.pure p,
|
||||
.pure pre {
|
||||
margin: 1em 0;
|
||||
}
|
||||
.pure code,
|
||||
.pure kbd,
|
||||
.pure pre,
|
||||
.pure samp {
|
||||
font-family: monospace , serif;
|
||||
_font-family: 'courier new' , monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
.pure pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.pure q {
|
||||
quotes: none;
|
||||
}
|
||||
.pure q:before,
|
||||
.pure q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
.pure small {
|
||||
font-size: 80%;
|
||||
}
|
||||
.pure sub,
|
||||
.pure sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.pure sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
.pure sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
.pure dl,
|
||||
.pure menu,
|
||||
.pure ol,
|
||||
.pure ul {
|
||||
margin: 1em 0;
|
||||
}
|
||||
.pure dd {
|
||||
margin: 0 0 0 40px;
|
||||
}
|
||||
.pure menu,
|
||||
.pure ol,
|
||||
.pure ul {
|
||||
padding: 0 0 0 40px;
|
||||
}
|
||||
.pure nav ul,
|
||||
.pure nav ol {
|
||||
list-style: none;
|
||||
list-style-image: none;
|
||||
}
|
||||
.pure img {
|
||||
border: 0;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
.pure svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
.pure figure {
|
||||
margin: 0;
|
||||
}
|
||||
.pure form {
|
||||
margin: 0;
|
||||
}
|
||||
.pure fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
.pure legend {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
.pure button,
|
||||
.pure input,
|
||||
.pure select,
|
||||
.pure textarea {
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.pure button,
|
||||
.pure input {
|
||||
line-height: normal;
|
||||
}
|
||||
.pure button,
|
||||
.pure select {
|
||||
text-transform: none;
|
||||
}
|
||||
.pure button,
|
||||
.pure input[type="button"],
|
||||
.pure input[type="reset"],
|
||||
.pure input[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pure button[disabled],
|
||||
.pure input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
.pure input[type="checkbox"],
|
||||
.pure input[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
.pure input[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.pure input[type="search"]::-webkit-search-cancel-button,
|
||||
.pure input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.pure button::-moz-focus-inner,
|
||||
.pure input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.pure textarea {
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
.pure table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
528
src/base/css/normalize.css
vendored
528
src/base/css/normalize.css
vendored
@ -1,528 +0,0 @@
|
||||
/* THIS FILE IS GENERATED BY A BUILD SCRIPT - DO NOT EDIT! */
|
||||
/*! normalize.css v1.1.2 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
|
||||
* Known issue: no IE 6 support.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
|
||||
* `em` units.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-size: 100%; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `font-family` inconsistency between `textarea` and other form
|
||||
* elements.
|
||||
*/
|
||||
|
||||
html,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address margins handled incorrectly in IE 6/7.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address font sizes and margins set differently in IE 6/7.
|
||||
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
|
||||
* and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
margin: 0.83em 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.17em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
margin: 1.33em 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.83em;
|
||||
margin: 1.67em 0;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.67em;
|
||||
margin: 2.33em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
* Known issue: no IE 6/7 normalization.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 6/7/8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address margins set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
p,
|
||||
pre {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
_font-family: 'courier new', monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address CSS quotes not supported in IE 6/7.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `quotes` property not supported in Safari 4.
|
||||
*/
|
||||
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Lists
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margins set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
dl,
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 0 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address paddings set differently in IE 6/7.
|
||||
*/
|
||||
|
||||
menu,
|
||||
ol,
|
||||
ul {
|
||||
padding: 0 0 0 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct list images handled incorrectly in IE 7.
|
||||
*/
|
||||
|
||||
nav ul,
|
||||
nav ol {
|
||||
list-style: none;
|
||||
list-style-image: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
|
||||
* 2. Improve image quality when scaled in IE 7.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0; /* 1 */
|
||||
-ms-interpolation-mode: bicubic; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct margin displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited in IE 6/7/8/9.
|
||||
* 2. Correct text not wrapping in Firefox 3.
|
||||
* 3. Correct alignment displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0;
|
||||
white-space: normal; /* 2 */
|
||||
*margin-left: -7px; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct font size not being inherited in all browsers.
|
||||
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
|
||||
* and Chrome.
|
||||
* 3. Improve appearance and consistency in all browsers.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
vertical-align: baseline; /* 3 */
|
||||
*vertical-align: middle; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
|
||||
* Known issue: inner spacing remains in IE 6.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
*overflow: visible; /* 4 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address box sizing set to content-box in IE 8/9.
|
||||
* 2. Remove excess padding in IE 8/9.
|
||||
* 3. Remove excess padding in IE 7.
|
||||
* Known issue: excess padding remains in IE 6.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
*height: 13px; /* 3 */
|
||||
*width: 13px; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 3+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
|
||||
* 2. Improve readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@ -1,354 +0,0 @@
|
||||
<!-- THIS FILE IS GENERATED BY A BUILD SCRIPT - DO NOT EDIT! -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>Normalize CSS</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/base-min.css">
|
||||
<style>
|
||||
#boxsize button,
|
||||
#boxsize input,
|
||||
#boxsize select,
|
||||
#boxsize textarea {
|
||||
width: 200px;
|
||||
padding: 5px;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
|
||||
<section>
|
||||
<h1>Heading 1 (in section)</h1>
|
||||
<h2>Heading 2 (in section)</h2>
|
||||
<h3>Heading 3 (in section)</h3>
|
||||
<h4>Heading 4 (in section)</h4>
|
||||
<h5>Heading 5 (in section)</h5>
|
||||
<h6>Heading 6 (in section)</h6>
|
||||
</section>
|
||||
|
||||
<article>
|
||||
<h1>Heading 1 (in article)</h1>
|
||||
<h2>Heading 2 (in article)</h2>
|
||||
<h3>Heading 3 (in article)</h3>
|
||||
<h4>Heading 4 (in article)</h4>
|
||||
<h5>Heading 5 (in article)</h5>
|
||||
<h6>Heading 6 (in article)</h6>
|
||||
</article>
|
||||
|
||||
<header>
|
||||
<hgroup>
|
||||
<h1>Heading 1 (in hgroup)</h1>
|
||||
<h2>Heading 2 (in hgroup)</h2>
|
||||
</hgroup>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">navigation item #1</a></li>
|
||||
<li><a href="#">navigation item #2</a></li>
|
||||
<li><a href="#">navigation item #3</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<h1>Text-level semantics</h1>
|
||||
|
||||
<p hidden>This should be hidden in all browsers, apart from IE6</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
|
||||
|
||||
<address>Address: somewhere, world</address>
|
||||
|
||||
<hr>
|
||||
|
||||
<hr style="height:4px; border:solid #000; border-width:1px 0;">
|
||||
|
||||
<p>
|
||||
The <a href="#">a element</a> example<br>
|
||||
The <abbr>abbr element</abbr> and <abbr title="Title text">abbr element with title</abbr> examples<br>
|
||||
The <b>b element</b> example<br>
|
||||
The <cite>cite element</cite> example<br>
|
||||
The <code>code element</code> example<br>
|
||||
The <del>del element</del> example<br>
|
||||
The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples<br>
|
||||
The <em>em element</em> example<br>
|
||||
The <i>i element</i> example<br>
|
||||
The img element <img src="http://lorempixel.com/16/16" alt=""> example<br>
|
||||
The <ins>ins element</ins> example<br>
|
||||
The <kbd>kbd element</kbd> example<br>
|
||||
The <mark>mark element</mark> example<br>
|
||||
The <q>q element <q>inside</q> a q element</q> example<br>
|
||||
The <s>s element</s> example<br>
|
||||
The <samp>samp element</samp> example<br>
|
||||
The <small>small element</small> example<br>
|
||||
The <span>span element</span> example<br>
|
||||
The <strong>strong element</strong> example<br>
|
||||
The <sub>sub element</sub> example<br>
|
||||
The <sup>sup element</sup> example<br>
|
||||
The <u>u element</u> example<br>
|
||||
The <var>var element</var> example
|
||||
</p>
|
||||
|
||||
<h1>Embedded content</h1>
|
||||
|
||||
<h3>audio</h3>
|
||||
|
||||
<audio controls></audio>
|
||||
<audio></audio>
|
||||
|
||||
<h3>img</h3>
|
||||
|
||||
<img src="http://lorempixel.com/100/100" alt="">
|
||||
<a href="#"><img src="http://lorempixel.com/100/100" alt=""></a>
|
||||
|
||||
<h3>svg</h3>
|
||||
|
||||
<svg width="100px" height="100px">
|
||||
<circle cx="100" cy="100" r="100" fill="#ff0000" />
|
||||
</svg>
|
||||
|
||||
<h3>video</h3>
|
||||
|
||||
<video controls></video>
|
||||
<video></video>
|
||||
|
||||
<h1>Interactive content</h1>
|
||||
|
||||
<h3>details / summary</h3>
|
||||
<details>
|
||||
<summary>More info</summary>
|
||||
<p>Additional information</p>
|
||||
<ul>
|
||||
<li>Point 1</li>
|
||||
<li>Point 2</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
<h1>Grouping content</h1>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
|
||||
|
||||
<h3>pre</h3>
|
||||
|
||||
<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</pre>
|
||||
|
||||
<pre><code><html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main"> <div>
|
||||
</body>
|
||||
</html></code></pre>
|
||||
|
||||
<h3>blockquote</h3>
|
||||
|
||||
<blockquote>
|
||||
<p>Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.</p>
|
||||
</blockquote>
|
||||
|
||||
<blockquote>Even better philosophical quote marked up with just a <blockquote> element.</blockquote>
|
||||
|
||||
<h3>ordered list</h3>
|
||||
|
||||
<ol>
|
||||
<li>list item 1</li>
|
||||
<li>list item 1
|
||||
<ol>
|
||||
<li>list item 2</li>
|
||||
<li>list item 2
|
||||
<ol>
|
||||
<li>list item 3</li>
|
||||
<li>list item 3</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>list item 2</li>
|
||||
<li>list item 2</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>list item 1</li>
|
||||
<li>list item 1</li>
|
||||
</ol>
|
||||
|
||||
<h3>unordered list</h3>
|
||||
|
||||
<ul>
|
||||
<li>list item 1</li>
|
||||
<li>list item 1
|
||||
<ul>
|
||||
<li>list item 2</li>
|
||||
<li>list item 2
|
||||
<ul>
|
||||
<li>list item 3</li>
|
||||
<li>list item 3</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>list item 2</li>
|
||||
<li>list item 2</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>list item 1</li>
|
||||
<li>list item 1</li>
|
||||
</ul>
|
||||
|
||||
<h3>description list</h3>
|
||||
|
||||
<dl>
|
||||
<dt>Description name</dt>
|
||||
<dd>Description value</dd>
|
||||
<dt>Description name</dt>
|
||||
<dd>Description value</dd>
|
||||
<dd>Description value</dd>
|
||||
<dt>Description name</dt>
|
||||
<dt>Description name</dt>
|
||||
<dd>Description value</dd>
|
||||
</dl>
|
||||
|
||||
<h3>figure</h3>
|
||||
|
||||
<figure>
|
||||
<img src="http://lorempixel.com/400/200" alt="">
|
||||
<figcaption>Figcaption content</figcaption>
|
||||
</figure>
|
||||
|
||||
<h1>Tabular data</h1>
|
||||
|
||||
<table>
|
||||
<caption>Jimi Hendrix - albums</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Album</th>
|
||||
<th>Year</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Album</th>
|
||||
<th>Year</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Are You Experienced</td>
|
||||
<td>1967</td>
|
||||
<td>$10.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Axis: Bold as Love</td>
|
||||
<td>1967</td>
|
||||
<td>$12.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Electric Ladyland</td>
|
||||
<td>1968</td>
|
||||
<td>$10.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Band of Gypsys</td>
|
||||
<td>1970</td>
|
||||
<td>$12.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h1>Forms</h1>
|
||||
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.</legend>
|
||||
<p><label>Text input <input type="text" value="default value that goes on and on without stopping or punctuation"></label></p>
|
||||
<p><label>Email input <input type="email"></label></p>
|
||||
<p><label>Search input <input type="search"></label></p>
|
||||
<p><label>Tel input <input type="tel"></label></p>
|
||||
<p><label>URL input <input type="url" placeholder="http://"></label></p>
|
||||
<p><label>Password input <input type="password" value="password"></label></p>
|
||||
<p><label>File input <input type="file"></label></p>
|
||||
|
||||
<p><label>Radio input <input type="radio" name="rad"></label></p>
|
||||
<p><label>Checkbox input <input type="checkbox"></label></p>
|
||||
<p><label><input type="radio" name="rad"> Radio input</label></p>
|
||||
<p><label><input type="checkbox"> Checkbox input</label></p>
|
||||
|
||||
<p><label>Select field <select><option>Option 01</option><option>Option 02</option></select></label></p>
|
||||
<p><label>Textarea <textarea cols="30" rows="5" >Textarea text</textarea></label></p>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Inputs as siblings of labels</legend>
|
||||
<p><label for="ic">Color input</label> <input type="color" id="ic" value="#000000"></p>
|
||||
<p><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></p>
|
||||
<p><label for="ir">Range input</label> <input type="range" id="ir" value="10"></p>
|
||||
<p><label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01"></p>
|
||||
<p><label for="idm">Month input</label> <input type="month" id="idm" value="1970-01"></p>
|
||||
<p><label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01"></p>
|
||||
<p><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"></p>
|
||||
<p><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00"></p>
|
||||
|
||||
<p><label for="irb">Radio input</label> <input type="radio" id="irb" name="rad"></p>
|
||||
<p><label for="icb">Checkbox input</label> <input type="checkbox" id="icb"></p>
|
||||
<p><input type="radio" id="irb2" name="rad"> <label for="irb2">Radio input</label></p>
|
||||
<p><input type="checkbox" id="icb2"> <label for="icb2">Checkbox input</label></p>
|
||||
|
||||
<p><label for="s">Select field</label> <select id="s"><option>Option 01</option><option>Option 02</option></select></p>
|
||||
<p><label for="t">Textarea</label> <textarea id="t" cols="30" rows="5" >Textarea text</textarea></p>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Clickable inputs and buttons</legend>
|
||||
<p><input type="image" src="http://lorempixel.com/90/24" alt="Image (input)"></p>
|
||||
<p><input type="reset" value="Reset (input)"></p>
|
||||
<p><input type="button" value="Button (input)"></p>
|
||||
<p><input type="submit" value="Submit (input)"></p>
|
||||
<p><input type="submit" value="Disabled (input)" disabled></p>
|
||||
|
||||
|
||||
<p><button type="reset">Reset (button)</button></p>
|
||||
<p><button type="button">Button (button)</button></p>
|
||||
<p><button type="submit">Submit (button)</button></p>
|
||||
<p><button type="submit" disabled>Disabled (button)</button></p>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="boxsize">
|
||||
<legend>box-sizing tests</legend>
|
||||
<div><input type="text" value="text"></div>
|
||||
<div><input type="email" value="email"></div>
|
||||
<div><input type="search" value="search"></div>
|
||||
<div><input type="url" value="http://example.com"></div>
|
||||
<div><input type="password" value="password"></div>
|
||||
|
||||
<div><input type="color" value="#000000"></div>
|
||||
<div><input type="number" value="5"></div>
|
||||
<div><input type="range" value="10"></div>
|
||||
<div><input type="date" value="1970-01-01"></div>
|
||||
<div><input type="month" value="1970-01"></div>
|
||||
<div><input type="week" value="1970-W01"></div>
|
||||
<div><input type="datetime" value="1970-01-01T00:00:00Z"></div>
|
||||
<div><input type="datetime-local" value="1970-01-01T00:00"></div>
|
||||
|
||||
<div><input type="radio"></div>
|
||||
<div><input type="checkbox"></div>
|
||||
|
||||
<div><select><option>Option 01</option><option>Option 02</option></select></div>
|
||||
<div><textarea cols="30" rows="5">Textarea text</textarea></div>
|
||||
|
||||
<div><input type="image" src="http://lorempixel.com/90/24" alt="Image (input)"></div>
|
||||
<div><input type="reset" value="Reset (input)"></div>
|
||||
<div><input type="button" value="Button (input)"></div>
|
||||
<div><input type="submit" value="Submit (input)"></div>
|
||||
|
||||
<div><button type="reset">Reset (button)</button></div>
|
||||
<div><button type="button">Button (button)</button></div>
|
||||
<div><button type="submit">Submit (button)</button></div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,10 +1,11 @@
|
||||
/*csslint unqualified-attributes:false, outline-none:false*/
|
||||
/*csslint outline-none:false*/
|
||||
|
||||
.pure-button {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
*font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/
|
||||
*overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */
|
||||
padding: 0.5em 1.5em 0.5em;
|
||||
padding: 0.5em 1em;
|
||||
color: #444; /* rgba not supported (IE 8) */
|
||||
color: rgba(0, 0, 0, 0.80); /* rgba supported */
|
||||
*color: #444; /* IE 6 & 7 */
|
||||
@ -13,13 +14,6 @@
|
||||
background-color: #E6E6E6;
|
||||
text-decoration: none;
|
||||
border-radius: 2px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Transitions */
|
||||
-webkit-transition: 0.1s linear -webkit-box-shadow;
|
||||
-moz-transition: 0.1s linear -moz-box-shadow;
|
||||
-ms-transition: 0.1s linear box-shadow;
|
||||
-o-transition: 0.1s linear box-shadow;
|
||||
transition: 0.1s linear box-shadow;
|
||||
}
|
||||
|
||||
.pure-button-hover,
|
||||
@ -29,7 +23,6 @@
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
|
||||
background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
|
||||
background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
|
||||
background-image: -ms-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
|
||||
background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
|
||||
background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
|
||||
}
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Button Manual Tests</title>
|
||||
<link rel="stylesheet" href="../../../../build/pure-min.css">
|
||||
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome-ie7.css">
|
||||
<meta charset="utf-8">
|
||||
<title>Buttons Tests</title>
|
||||
|
||||
<link rel="stylesheet" href="../../../../build/base.css">
|
||||
<link rel="stylesheet" href="../../../../build/buttons.css">
|
||||
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome-ie7.css">
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
|
||||
|
||||
<style>
|
||||
.pure-button-green {
|
||||
@ -44,11 +48,15 @@
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.custom-fonts {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Test Button Styles</h1>
|
||||
<h1>Buttons Tests</h1>
|
||||
|
||||
<h2>Regular Buttons</h2>
|
||||
<p>
|
||||
@ -89,13 +97,13 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button class="pure-button pure-button-wedding" href="#">
|
||||
<i class="icon-film"></i>
|
||||
<button class="pure-button pure-button-wedding">
|
||||
<i class="fa fa-film"></i>
|
||||
Start Playing Movie
|
||||
</button>
|
||||
|
||||
<a class="pure-button pure-button-wedding" href="#">
|
||||
<i class="icon-film"></i>
|
||||
<i class="fa fa-film"></i>
|
||||
Start Playing Movie
|
||||
</a>
|
||||
</p>
|
||||
@ -108,5 +116,14 @@
|
||||
<input type="button" class="pure-button pure-button-primary" value="Input Button">
|
||||
<input type="reset" class="pure-button pure-button-primary" value="Reset">
|
||||
</p>
|
||||
|
||||
<h2>Primary Form Buttons (Custom Fonts)</h2>
|
||||
<p class="custom-fonts">
|
||||
<a class="pure-button pure-button-primary" href="#">Anchor</a>
|
||||
<button class="pure-button pure-button-primary">Button</button>
|
||||
<input type="submit" class="pure-button pure-button-primary" value="Submit">
|
||||
<input type="button" class="pure-button pure-button-primary" value="Input Button">
|
||||
<input type="reset" class="pure-button pure-button-primary" value="Reset">
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,149 +0,0 @@
|
||||
/* This page has Normalize.css form-specific style rules applied to a .pure-form context */
|
||||
|
||||
/* ==========
|
||||
Forms Core
|
||||
=========*/
|
||||
|
||||
/*
|
||||
* Corrects margin displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
.pure-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
.pure-form fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects color not being inherited in IE 6/7/8/9.
|
||||
* 2. Corrects text not wrapping in Firefox 3.
|
||||
* 3. Corrects alignment displayed oddly in IE 6/7.
|
||||
*/
|
||||
|
||||
.pure-form legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0;
|
||||
white-space: normal; /* 2 */
|
||||
*margin-left: -7px; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects font size not being inherited in all browsers.
|
||||
* 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
|
||||
* and Chrome.
|
||||
* 3. Improves appearance and consistency in all browsers.
|
||||
*/
|
||||
|
||||
.pure-form button,
|
||||
.pure-form input,
|
||||
.pure-form select,
|
||||
.pure-form textarea {
|
||||
font-size: 100%; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
vertical-align: baseline; /* 3 */
|
||||
*vertical-align: middle; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
.pure-form button,
|
||||
.pure-form input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Corrects inability to style clickable `input` types in iOS.
|
||||
* 3. Improves usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
|
||||
* Known issue: inner spacing remains in IE 6.
|
||||
*/
|
||||
|
||||
.pure-form button,
|
||||
.pure-form input[type="button"], /* 1 */
|
||||
.pure-form input[type="reset"],
|
||||
.pure-form input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
*overflow: visible; /* 4 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
.pure-form button[disabled],
|
||||
.pure-form input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses box sizing set to content-box in IE 8/9.
|
||||
* 2. Removes excess padding in IE 8/9.
|
||||
* 3. Removes excess padding in IE 7.
|
||||
* Known issue: excess padding remains in IE 6.
|
||||
*/
|
||||
|
||||
.pure-form input[type="checkbox"],
|
||||
.pure-form input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
*height: 13px; /* 3 */
|
||||
*width: 13px; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
.pure-form input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
.pure-form input[type="search"]::-webkit-search-cancel-button,
|
||||
.pure-form input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and border in Firefox 3+.
|
||||
*/
|
||||
|
||||
.pure-form button::-moz-focus-inner,
|
||||
.pure-form input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Removes default vertical scrollbar in IE 6/7/8/9.
|
||||
* 2. Improves readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
.pure-form textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
@ -3,6 +3,7 @@
|
||||
margin: 0.7em 0 0;
|
||||
}
|
||||
|
||||
.pure-form input:not([type]),
|
||||
.pure-form input[type="text"],
|
||||
.pure-form input[type="password"],
|
||||
.pure-form input[type="email"],
|
||||
@ -22,6 +23,7 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pure-group input:not([type]),
|
||||
.pure-group input[type="text"],
|
||||
.pure-group input[type="password"],
|
||||
.pure-group input[type="email"],
|
||||
@ -55,7 +57,7 @@
|
||||
.pure-form-message-inline,
|
||||
.pure-form-message {
|
||||
display: block;
|
||||
font-size: 80%;
|
||||
font-size: 0.75em;
|
||||
/* Increased bottom padding to make it group with its related input element. */
|
||||
padding: 0.2em 0 0.8em;
|
||||
}
|
||||
|
||||
@ -17,20 +17,36 @@
|
||||
padding: 0.5em 0.6em;
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 0.8em;
|
||||
box-shadow: inset 0 1px 3px #ddd;
|
||||
border-radius: 4px;
|
||||
-webkit-transition: 0.3s linear border;
|
||||
-moz-transition: 0.3s linear border;
|
||||
-ms-transition: 0.3s linear border;
|
||||
-o-transition: 0.3s linear border;
|
||||
transition: 0.3s linear border;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/*
|
||||
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
|
||||
since IE8 won't execute CSS that contains a CSS3 selector.
|
||||
*/
|
||||
.pure-form input:not([type]) {
|
||||
padding: 0.5em 0.6em;
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: inset 0 1px 3px #ddd;
|
||||
border-radius: 4px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
|
||||
/* May be able to remove this tweak as color inputs become more standardized across browsers. */
|
||||
.pure-form input[type="color"] {
|
||||
padding: 0.2em 0.5em;
|
||||
}
|
||||
|
||||
|
||||
.pure-form input[type="text"]:focus,
|
||||
.pure-form input[type="password"]:focus,
|
||||
.pure-form input[type="email"]:focus,
|
||||
@ -52,6 +68,16 @@
|
||||
border-color: #129FEA;
|
||||
}
|
||||
|
||||
/*
|
||||
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
|
||||
since IE8 won't execute CSS that contains a CSS3 selector.
|
||||
*/
|
||||
.pure-form input:not([type]):focus {
|
||||
outline: 0;
|
||||
outline: thin dotted \9; /* IE6-9 */
|
||||
border-color: #129FEA;
|
||||
}
|
||||
|
||||
.pure-form input[type="file"]:focus,
|
||||
.pure-form input[type="radio"]:focus,
|
||||
.pure-form input[type="checkbox"]:focus {
|
||||
@ -63,6 +89,7 @@
|
||||
margin: 0.5em 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pure-form input[type="text"][disabled],
|
||||
.pure-form input[type="password"][disabled],
|
||||
.pure-form input[type="email"][disabled],
|
||||
@ -83,23 +110,29 @@
|
||||
background-color: #eaeded;
|
||||
color: #cad2d3;
|
||||
}
|
||||
|
||||
/*
|
||||
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
|
||||
since IE8 won't execute CSS that contains a CSS3 selector.
|
||||
*/
|
||||
.pure-form input:not([type])[disabled] {
|
||||
cursor: not-allowed;
|
||||
background-color: #eaeded;
|
||||
color: #cad2d3;
|
||||
}
|
||||
.pure-form input[readonly],
|
||||
.pure-form select[readonly],
|
||||
.pure-form textarea[readonly],
|
||||
.pure-form input[readonly]:focus,
|
||||
.pure-form select[readonly]:focus,
|
||||
.pure-form textarea[readonly]:focus {
|
||||
.pure-form textarea[readonly] {
|
||||
background: #eee; /* menu hover bg color */
|
||||
color: #777; /* menu text color */
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
|
||||
.pure-form input:focus:invalid,
|
||||
.pure-form textarea:focus:invalid,
|
||||
.pure-form select:focus:invalid {
|
||||
color: #b94a48;
|
||||
border: 1px solid #ee5f5b;
|
||||
border-color: #ee5f5b;
|
||||
}
|
||||
.pure-form input:focus:invalid:focus,
|
||||
.pure-form textarea:focus:invalid:focus,
|
||||
@ -120,7 +153,6 @@
|
||||
}
|
||||
.pure-form label {
|
||||
margin: 0.5em 0 0.2em;
|
||||
font-size: 90%;
|
||||
}
|
||||
.pure-form fieldset {
|
||||
margin: 0;
|
||||
@ -132,7 +164,6 @@
|
||||
width: 100%;
|
||||
padding: 0.3em 0;
|
||||
margin-bottom: 0.3em;
|
||||
font-size: 125%;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
@ -158,6 +189,14 @@
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
|
||||
since IE8 won't execute CSS that contains a CSS3 selector.
|
||||
*/
|
||||
.pure-form-stacked input:not([type]) {
|
||||
display: block;
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
.pure-form-aligned input,
|
||||
.pure-form-aligned textarea,
|
||||
.pure-form-aligned select,
|
||||
@ -169,6 +208,9 @@
|
||||
*zoom: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.pure-form-aligned textarea {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Aligned Forms */
|
||||
.pure-form-aligned .pure-control-group {
|
||||
@ -243,12 +285,12 @@
|
||||
padding-left: 0.3em;
|
||||
color: #666;
|
||||
vertical-align: middle;
|
||||
font-size: 90%;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
/* Block help for forms */
|
||||
.pure-form-message {
|
||||
display: block;
|
||||
color: #666;
|
||||
font-size: 90%;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
@ -1,334 +1,349 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name="viewport" content="width = device-width">
|
||||
<title>Forms CSS Manual Test</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/base-min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/grids-min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/forms-min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/buttons-min.css">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>Forms Tests</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
color: #333;
|
||||
font-size:1.2em;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" href="../../../../build/base.css">
|
||||
<link rel="stylesheet" href="../../../../build/grids.css">
|
||||
<link rel="stylesheet" href="../../../../build/grids-responsive.css">
|
||||
<link rel="stylesheet" href="../../../../build/buttons.css">
|
||||
<link rel="stylesheet" href="../../../../build/forms.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content">
|
||||
<body>
|
||||
<h1>Forms Tests</h1>
|
||||
|
||||
<h2>Default Form</h2>
|
||||
|
||||
<form class="pure-form">
|
||||
<fieldset>
|
||||
<legend>A default inline form.</legend>
|
||||
<input type="text" placeholder="Email">
|
||||
<input type="password" placeholder="Password">
|
||||
<label>
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
<button type="submit" class="pure-button">Sign in</button>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>A default inline form.</legend>
|
||||
|
||||
<input type="text" placeholder="Email">
|
||||
<input type="password" placeholder="Password">
|
||||
|
||||
<label>
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
|
||||
<button type="submit" class="pure-button">Sign in</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<h2>Multi-Column Form (with YUI Grids)</h2>
|
||||
|
||||
<p>
|
||||
Multi-column forms such as the one below can be created by pulling down YUI Grids.
|
||||
</p>
|
||||
<h2>Multi-Column Form with Grids</h2>
|
||||
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
|
||||
<div class='pure-g-r'>
|
||||
<div class='pure-u-1-3'>
|
||||
<label>First Name</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class='pure-u-1-3'>
|
||||
<label>Password</label>
|
||||
<input type="password">
|
||||
</div>
|
||||
<div class='pure-u-1-3'>
|
||||
<label>E-Mail</label>
|
||||
<input type="email" required>
|
||||
</div>
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1 pure-u-md-1-3">
|
||||
<label>First Name</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-md-1-3">
|
||||
<label>Password</label>
|
||||
<input type="password">
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-md-1-3">
|
||||
<label>E-Mail</label>
|
||||
<input type="email" required>
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-md-1-3">
|
||||
<label>City</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-md-1-3">
|
||||
<label>State</label>
|
||||
<select class="pure-input-medium">
|
||||
<option>AL</option>
|
||||
<option>CA</option>
|
||||
<option>IL</option>
|
||||
<option>MD</option>
|
||||
<option>NY</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='pure-u-1-3'>
|
||||
<label>City</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox"> I've read the terms and conditions
|
||||
</label>
|
||||
|
||||
<div class='pure-u-1-3'>
|
||||
<label>State</label>
|
||||
<select class='pure-input-medium'>
|
||||
<option>AL</option>
|
||||
<option>CA</option>
|
||||
<option>IL</option>
|
||||
<option>MD</option>
|
||||
<option>NY</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox"> I've read the terms and conditions
|
||||
</label>
|
||||
<button type="submit" class='pure-button'>Submit</button>
|
||||
<button type="reset" class='pure-button'>Reset</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
<button type="submit" class="pure-button">Submit</button>
|
||||
<button type="reset" class="pure-button">Reset</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Stacked Form</h2>
|
||||
|
||||
<p>
|
||||
Apply stacked label styling to any form by applying the <code>pure-form-stacked</code> classname.
|
||||
</p>
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
<label>First Name</label>
|
||||
<input type="text">
|
||||
<label>Password</label>
|
||||
<input type="password">
|
||||
<label>E-Mail</label>
|
||||
<input type="email" required>
|
||||
<aside class='pure-help-inline'>This is a required field.</aside>
|
||||
<label>City</label>
|
||||
<input type="text">
|
||||
<aside class='pure-form-message'>This is another required field.</aside>
|
||||
<fieldset>
|
||||
<legend>Legend</legend>
|
||||
|
||||
<label>State</label>
|
||||
<select class='pure-input-medium'>
|
||||
<option>AL</option>
|
||||
<option>CA</option>
|
||||
<option>IL</option>
|
||||
<option>MD</option>
|
||||
<option>NY</option>
|
||||
</select>
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox"> I've read the terms and conditions
|
||||
</label>
|
||||
<button type="submit" class='pure-button notice'>Submit</button>
|
||||
<button type="reset" class='pure-button'>Reset</button>
|
||||
<label>First Name</label>
|
||||
<input type="text">
|
||||
|
||||
</fieldset>
|
||||
</form>
|
||||
<label>Password</label>
|
||||
<input type="password">
|
||||
|
||||
<h2>Aligned Form</h2>
|
||||
<label>E-Mail</label>
|
||||
<input type="email" required>
|
||||
<aside class="pure-help-inline">This is a required field.</aside>
|
||||
|
||||
<p>Aligned forms are great for standard forms that look well-aligned. The labels are right-aligned against the form input controls.</p>
|
||||
<label>City</label>
|
||||
<input type="text">
|
||||
<aside class="pure-form-message">This is another required field.</aside>
|
||||
|
||||
<form class="pure-form pure-form-aligned">
|
||||
<fieldset>
|
||||
<div class="pure-control-group">
|
||||
<label>Username</label>
|
||||
<input type="text" placeholder="Username">
|
||||
<aside class='pure-form-message-inline'>This is a <code>pure-form-message-inline</code> field.</aside>
|
||||
</div>
|
||||
<label>State</label>
|
||||
<select class="pure-input-medium">
|
||||
<option>AL</option>
|
||||
<option>CA</option>
|
||||
<option>IL</option>
|
||||
<option>MD</option>
|
||||
<option>NY</option>
|
||||
</select>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<label>Color</label>
|
||||
<input type="color">
|
||||
|
||||
<div class="pure-control-group">
|
||||
<label>Email Address</label>
|
||||
<input type="text" placeholder="Email Address">
|
||||
</div>
|
||||
<div class="pure-control-group">
|
||||
<label>Here's a button</label>
|
||||
<input type="button" value="Button" class="pure-button">
|
||||
</div>
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox"> I've read the terms and conditions
|
||||
</label>
|
||||
|
||||
<div class="pure-control-group">
|
||||
<label>Supercalifragilistic Label</label>
|
||||
<input type="text" placeholder="Enter something here...">
|
||||
</div>
|
||||
|
||||
<div class="pure-controls">
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox"> Remember Me
|
||||
</label>
|
||||
<button type="submit" class="pure-button">Submit</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<h2>Grouped Inputs</h2>
|
||||
|
||||
<p>Grouped inputs are great for grouping small sets of text-based input elements. They work well for sign-up forms, and look natural on mobile devices.</p>
|
||||
|
||||
<form class="pure-form">
|
||||
<fieldset class='pure-group'>
|
||||
<input type="text" class="pure-input-1-3" placeholder='Username'>
|
||||
<input type="text" class="pure-input-1-3" placeholder='Password'>
|
||||
<input type="text" class="pure-input-1-3" placeholder='Email'>
|
||||
</fieldset>
|
||||
<fieldset class='pure-group'>
|
||||
<input type="text" class="pure-input-1-3" placeholder='Another Group'>
|
||||
<input type="text" class="pure-input-1-3" placeholder='More Stuff'>
|
||||
<button type="submit" class="pure-button pure-input-1-3">Sign in</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
|
||||
<h2>Input Sizing</h2>
|
||||
|
||||
<p>You can take advantage of YUI Grids and the <code>pure-input-block</code> class to create fluid width inputs in practically any size that you want.</p>
|
||||
|
||||
<form class="pure-form">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-input-1"><br/>
|
||||
<input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br/>
|
||||
<input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2"><br/>
|
||||
<input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br/>
|
||||
<input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br/>
|
||||
</form>
|
||||
|
||||
<div class="pure-g sizing">
|
||||
<form class="pure-form">
|
||||
<div class="pure-u-1-4">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
|
||||
</div>
|
||||
<div class="pure-u-3-4">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-3-4">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pure-u-1-2">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
|
||||
</div>
|
||||
<div class="pure-u-1-2">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pure-u-1-8">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
|
||||
</div>
|
||||
<div class="pure-u-1-8">
|
||||
<input class="v" type="text" placeholder=".pure-u-1-8">
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
|
||||
</div>
|
||||
<div class="pure-u-1-2">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pure-u-1-5">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-5">
|
||||
</div>
|
||||
<div class="pure-u-2-5">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
|
||||
</div>
|
||||
<div class="pure-u-2-5">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<h2>Invalid Inputs</h2>
|
||||
<p>Add the required attribute to any form control.</p>
|
||||
<form class="pure-form">
|
||||
<input type="email" placeholder="Requires an email" required>
|
||||
</form>
|
||||
|
||||
<h2>Disabled Inputs</h2>
|
||||
<p>Add the disabled attribute to any form control.</p>
|
||||
<form class="pure-form">
|
||||
<input class="pure-input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." value="Foo bar baz" disabled>
|
||||
</form>
|
||||
|
||||
<h2>Readonly Inputs</h2>
|
||||
<p>Add the readonly attribute to any form control.</p>
|
||||
<form class="pure-form">
|
||||
<input class="pure-input-xlarge" id="readonlyInput" type="text" placeholder="Readonly input here..." value="Foo bar baz" readonly>
|
||||
</form>
|
||||
|
||||
<h2>Rounded Form</h2>
|
||||
<p>Add the pure-input-rounded classname to any form control.</p>
|
||||
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<label>Subject</label>
|
||||
<input type="text" class="pure-input-rounded" placeholder="Subject" />
|
||||
<label>Message</label>
|
||||
<textarea class="pure-input-rounded" rows="5" cols="40" placeholder="Message..."></textarea>
|
||||
<button type="submit" class="pure-button pure-input-rounded">Search</button>
|
||||
<input type="reset" class="pure-button pure-input-rounded" value="Reset" />
|
||||
<button type="submit" class="pure-button notice">Submit</button>
|
||||
<button type="reset" class="pure-button">Reset</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Selects</h2>
|
||||
<form class="pure-form">
|
||||
<select class='pure-input-medium'>
|
||||
<option>Brazil</option>
|
||||
<option>Canada</option>
|
||||
<option>United States</option>
|
||||
<option>United Kingdom</option>
|
||||
<option>Venezuela</option>
|
||||
</select>
|
||||
<h2>Aligned Form</h2>
|
||||
|
||||
<form class="pure-form pure-form-aligned">
|
||||
<fieldset>
|
||||
<div class="pure-control-group">
|
||||
<label>Username</label>
|
||||
<input type="text" placeholder="Username">
|
||||
<aside class="pure-form-message-inline">This is a <code>pure-form-message-inline</code> field.</aside>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group">
|
||||
<label>Email Address</label>
|
||||
<input type="text" placeholder="Email Address">
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group">
|
||||
<label>Here's a button</label>
|
||||
<input type="button" value="Button" class="pure-button">
|
||||
</div>
|
||||
|
||||
<div class="pure-control-group">
|
||||
<label>Supercalifragilistic Label</label>
|
||||
<input type="text" placeholder="Enter something here...">
|
||||
</div>
|
||||
|
||||
<div class="pure-controls">
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox"> Remember Me
|
||||
</label>
|
||||
|
||||
<button type="submit" class="pure-button">Submit</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
<select multiple="multiple" class="pure-input-large">
|
||||
<option>Brazil</option>
|
||||
<option>Canada</option>
|
||||
<option>United States</option>
|
||||
<option>United Kingdom</option>
|
||||
<option>Venezuela</option>
|
||||
</select>
|
||||
</form>
|
||||
<h2>Grouped Inputs</h2>
|
||||
|
||||
<h2>Checkboxes and Radios</h2>
|
||||
<form class="pure-form">
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox" value="">
|
||||
Here's option one.
|
||||
</label>
|
||||
<form class="pure-form">
|
||||
<fieldset class="pure-group">
|
||||
<input type="text" class="pure-input-1-3" placeholder="Username">
|
||||
<input type="text" class="pure-input-1-3" placeholder="Password">
|
||||
<input type="text" class="pure-input-1-3" placeholder="Email">
|
||||
</fieldset>
|
||||
|
||||
<label class="pure-radio">
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||
Here's a radio button. You can choose this one..
|
||||
</label>
|
||||
<label class="pure-radio">
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||||
..Or this one!
|
||||
</label>
|
||||
</form>
|
||||
<fieldset class="pure-group">
|
||||
<input type="text" class="pure-input-1-3" placeholder="Another Group">
|
||||
<input type="text" class="pure-input-1-3" placeholder="More Stuff">
|
||||
<button type="submit" class="pure-button pure-input-1-3">Sign in</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<h2>Help text</h2>
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<fieldset>
|
||||
<label>Last Name</label>
|
||||
<input type="text" />
|
||||
<aside class="pure-form-message">Block help text</aside>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class= "pure-g-r">
|
||||
<div class= "pure-u-1">
|
||||
<form class="pure-form">
|
||||
<a class="pure-button pure-button-primary">Anchor</a>
|
||||
<button class="pure-button pure-button-primary">Button</button>
|
||||
<input type="submit" class="pure-button pure-button-primary" value="Submit" />
|
||||
<input type="button" class="pure-button pure-button-primary" value="Input Button" />
|
||||
<input type="reset" class="pure-button pure-button-primary" value="Reset" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Input Sizing</h2>
|
||||
|
||||
<form class="pure-form">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-input-1"><br/>
|
||||
<input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br/>
|
||||
<input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2"><br/>
|
||||
<input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br/>
|
||||
<input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br/>
|
||||
</form>
|
||||
|
||||
|
||||
<form class="pure-form">
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-4">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-3-4">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-3-4">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-2">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1-2">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-8">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1-8">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1-4">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1-2">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-5">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1-5">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-2-5">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-2-5">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1">
|
||||
<input class="pure-input-1" type="text" placeholder=".pure-u-1">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Invalid Inputs</h2>
|
||||
|
||||
<form class="pure-form">
|
||||
<input type="email" placeholder="Requires an email" required>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Disabled Inputs</h2>
|
||||
|
||||
<form class="pure-form">
|
||||
<input class="pure-input-xlarge" type="text" placeholder="Disabled input here..." value="Foo bar baz" disabled>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Readonly Inputs</h2>
|
||||
|
||||
<form class="pure-form">
|
||||
<input class="pure-input-xlarge" type="text" placeholder="Readonly input here..." value="Foo bar baz" readonly>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Rounded Form</h2>
|
||||
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<label>Subject</label>
|
||||
<input type="text" class="pure-input-rounded" placeholder="Subject" />
|
||||
|
||||
<label>Message</label>
|
||||
<textarea class="pure-input-rounded" rows="5" cols="40" placeholder="Message..."></textarea>
|
||||
|
||||
<button type="submit" class="pure-button pure-input-rounded">Search</button>
|
||||
<input type="reset" class="pure-button pure-input-rounded" value="Reset" />
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Selects</h2>
|
||||
|
||||
<form class="pure-form">
|
||||
<select class="pure-input-medium">
|
||||
<option>Brazil</option>
|
||||
<option>Canada</option>
|
||||
<option>United States</option>
|
||||
<option>United Kingdom</option>
|
||||
<option>Venezuela</option>
|
||||
</select>
|
||||
|
||||
<select multiple="multiple" class="pure-input-large">
|
||||
<option>Brazil</option>
|
||||
<option>Canada</option>
|
||||
<option>United States</option>
|
||||
<option>United Kingdom</option>
|
||||
<option>Venezuela</option>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Checkboxes and Radios</h2>
|
||||
|
||||
<form class="pure-form">
|
||||
<label class="pure-checkbox">
|
||||
<input type="checkbox" value="">
|
||||
Here's option one.
|
||||
</label>
|
||||
|
||||
<label class="pure-radio">
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||
Here's a radio button. You can choose this one...
|
||||
</label>
|
||||
|
||||
<label class="pure-radio">
|
||||
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||||
...Or this one!
|
||||
</label>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Help text</h2>
|
||||
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<fieldset>
|
||||
<label>Last Name</label>
|
||||
<input type="text" />
|
||||
<aside class="pure-form-message">Block help text</aside>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Buttons</h2>
|
||||
|
||||
<form class="pure-form">
|
||||
<a class="pure-button pure-button-primary">Anchor</a>
|
||||
<button class="pure-button pure-button-primary">Button</button>
|
||||
<input type="submit" class="pure-button pure-button-primary" value="Submit" />
|
||||
<input type="button" class="pure-button pure-button-primary" value="Input Button" />
|
||||
<input type="reset" class="pure-button pure-button-primary" value="Reset" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
13
src/grids/README.md
Normal file
13
src/grids/README.md
Normal file
@ -0,0 +1,13 @@
|
||||
Pure Grids
|
||||
==========
|
||||
|
||||
Pure Grids ship with build-in 5ths- and 24ths-based units styles. The unit style
|
||||
rules are generated via Pure's [`rework-pure-grids`][rework-pure-grids]
|
||||
[Rework][] plugin.
|
||||
|
||||
The tooling used by Pure to generate its built-in Grids can also be used to
|
||||
create custom Grids that use any nth-unit base.
|
||||
|
||||
|
||||
[rework-pure-grids]: https://github.com/ericf/rework-pure-grids
|
||||
[Rework]: https://github.com/visionmedia/rework
|
||||
@ -1,8 +1,42 @@
|
||||
/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/
|
||||
|
||||
.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 */
|
||||
|
||||
/*
|
||||
Sets the font stack to fonts known to work properly with the above letter
|
||||
and word spacings. See: https://github.com/yui/pure/issues/41/
|
||||
|
||||
The following font stack makes Pure Grids work on all known environments.
|
||||
|
||||
* FreeSans: Ships with many Linux distros, including Ubuntu
|
||||
|
||||
* Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
|
||||
Arial to get picked up by the browser, even though neither is available
|
||||
in Chrome OS.
|
||||
|
||||
* Droid Sans: Ships with all versions of Android.
|
||||
|
||||
* Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
|
||||
*/
|
||||
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
|
||||
|
||||
/*
|
||||
Use flexbox when possible to avoid `letter-spacing` side-effects.
|
||||
|
||||
NOTE: Firefox (as of 25) does not currently support flex-wrap, so the
|
||||
`-moz-` prefix version is omitted.
|
||||
*/
|
||||
|
||||
display: -webkit-flex;
|
||||
-webkit-flex-flow: row wrap;
|
||||
|
||||
/* IE10 uses display: flexbox */
|
||||
display: -ms-flexbox;
|
||||
-ms-flex-flow: row wrap;
|
||||
}
|
||||
|
||||
/* Opera as of 12 on Windows needs word-spacing.
|
||||
@ -23,3 +57,11 @@
|
||||
vertical-align: top;
|
||||
text-rendering: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
Resets the font family back to the OS/browser's default sans-serif font,
|
||||
this the same font stack that Normalize.css sets for the `body`.
|
||||
*/
|
||||
.pure-g [class *= "pure-u"] {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
@ -1,61 +0,0 @@
|
||||
/*csslint regex-selectors:false, unqualified-attributes:false*/
|
||||
|
||||
.pure-g-r {
|
||||
letter-spacing: -0.31em;
|
||||
*letter-spacing: normal;
|
||||
*word-spacing: -0.43em;
|
||||
}
|
||||
|
||||
/* Opera as of 12 on Windows needs word-spacing.
|
||||
The ".opera-only" selector is used to prevent actual prefocus styling
|
||||
and is not required in markup.
|
||||
*/
|
||||
.opera-only :-o-prefocus,
|
||||
.pure-g-r {
|
||||
word-spacing: -0.43em;
|
||||
}
|
||||
|
||||
.pure-g-r img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 980px) {
|
||||
.pure-visible-phone {
|
||||
display: none;
|
||||
}
|
||||
.pure-visible-tablet {
|
||||
display: none;
|
||||
}
|
||||
.pure-hidden-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.pure-g-r > .pure-u,
|
||||
.pure-g-r > [class *= "pure-u-"] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.pure-g-r > .pure-u,
|
||||
.pure-g-r > [class *= "pure-u-"] {
|
||||
width: 100%;
|
||||
}
|
||||
.pure-hidden-phone {
|
||||
display: none;
|
||||
}
|
||||
.pure-visible-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
.pure-hidden-tablet {
|
||||
display: none;
|
||||
}
|
||||
.pure-visible-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -1,148 +0,0 @@
|
||||
.pure-u-1,
|
||||
.pure-u-1-2,
|
||||
.pure-u-1-3,
|
||||
.pure-u-2-3,
|
||||
.pure-u-1-4,
|
||||
.pure-u-3-4,
|
||||
.pure-u-1-5,
|
||||
.pure-u-2-5,
|
||||
.pure-u-3-5,
|
||||
.pure-u-4-5,
|
||||
.pure-u-1-6,
|
||||
.pure-u-5-6,
|
||||
.pure-u-1-8,
|
||||
.pure-u-3-8,
|
||||
.pure-u-5-8,
|
||||
.pure-u-7-8,
|
||||
.pure-u-1-12,
|
||||
.pure-u-5-12,
|
||||
.pure-u-7-12,
|
||||
.pure-u-11-12,
|
||||
.pure-u-1-24,
|
||||
.pure-u-5-24,
|
||||
.pure-u-7-24,
|
||||
.pure-u-11-24,
|
||||
.pure-u-13-24,
|
||||
.pure-u-17-24,
|
||||
.pure-u-19-24,
|
||||
.pure-u-23-24 {
|
||||
display: inline-block;
|
||||
*display: inline; /* IE < 8: fake inline-block */
|
||||
zoom: 1;
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
vertical-align: top;
|
||||
text-rendering: auto;
|
||||
}
|
||||
|
||||
.pure-u-1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pure-u-1-2 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.pure-u-1-3 {
|
||||
width: 33.33333%;
|
||||
}
|
||||
|
||||
.pure-u-2-3 {
|
||||
width: 66.66666%;
|
||||
}
|
||||
|
||||
.pure-u-1-4 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.pure-u-3-4 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.pure-u-1-5 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.pure-u-2-5 {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.pure-u-3-5 {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.pure-u-4-5 {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.pure-u-1-6 {
|
||||
width: 16.666%;
|
||||
}
|
||||
|
||||
.pure-u-5-6 {
|
||||
width: 83.33%;
|
||||
}
|
||||
|
||||
.pure-u-1-8 {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.pure-u-3-8 {
|
||||
width: 37.5%;
|
||||
}
|
||||
|
||||
.pure-u-5-8 {
|
||||
width: 62.5%;
|
||||
}
|
||||
|
||||
.pure-u-7-8 {
|
||||
width: 87.5%;
|
||||
}
|
||||
|
||||
.pure-u-1-12 {
|
||||
width: 8.3333%;
|
||||
}
|
||||
|
||||
.pure-u-5-12 {
|
||||
width: 41.6666%;
|
||||
}
|
||||
|
||||
.pure-u-7-12 {
|
||||
width: 58.3333%;
|
||||
}
|
||||
|
||||
.pure-u-11-12 {
|
||||
width: 91.6666%;
|
||||
}
|
||||
|
||||
.pure-u-1-24 {
|
||||
width: 4.1666%;
|
||||
}
|
||||
|
||||
.pure-u-5-24 {
|
||||
width: 20.8333%;
|
||||
}
|
||||
|
||||
.pure-u-7-24 {
|
||||
width: 29.1666%;
|
||||
}
|
||||
|
||||
.pure-u-11-24 {
|
||||
width: 45.8333%;
|
||||
}
|
||||
|
||||
.pure-u-13-24 {
|
||||
width: 54.1666%;
|
||||
}
|
||||
|
||||
.pure-u-17-24 {
|
||||
width: 70.8333%;
|
||||
}
|
||||
|
||||
.pure-u-19-24 {
|
||||
width: 79.1666%;
|
||||
}
|
||||
|
||||
.pure-u-23-24 {
|
||||
width: 95.8333%;
|
||||
}
|
||||
@ -1,174 +1,450 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/grids-min.css">
|
||||
<title>Responsive Grids Test</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Responsive Grids Tests</title>
|
||||
|
||||
<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]-->
|
||||
|
||||
<style>
|
||||
.content {
|
||||
text-align: center;
|
||||
border: 1px solid #999;
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
}
|
||||
|
||||
.serif,
|
||||
.serif .content {
|
||||
font-family: Georgia, Times, "Times New Roman", serif;
|
||||
}
|
||||
|
||||
.monospace,
|
||||
.monospace .content {
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="pure-g-r">
|
||||
|
||||
<div class="header pure-u-1">
|
||||
<body>
|
||||
<h1>Grids Tests</h1>
|
||||
|
||||
<h1 class="pure-u-1">Pure Responsive Grids</h1>
|
||||
<h2 class="pure-u">An example of making your Pure Grids behave responsively.</h2>
|
||||
<h2>Base Grid</h2>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">1/2</div>
|
||||
</div>
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">1/2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='pure-g'>
|
||||
<h1 class="pure-u-1 centered">How does it work?</h1>
|
||||
<div class='pure-u-1'>
|
||||
<div class='cell'>
|
||||
<p>Pure Responsive Grids builds on top of the existing Pure Grids implementation. It adds a single new class name called <code>.pure-g-r</code>. You can use this instead of using <code>.pure-g</code> as you normally do. All elements with a class name of <code>.pure-u-*-*</code> will automatically become responsive if they are direct descendents of a <code>.pure-g-r.</code></p>
|
||||
|
||||
<h2>The HTML</h2>
|
||||
<p>The first gist shows how regular Pure grids are written. These grids are unresponsive. They'll always be one-thirds irrespective of the width of the screen. The second gist replaces the <code>pure-g</code> with <code>pure-g-r</code>, thereby making the one-third columns collapse to full width on lower screen widths.</p>
|
||||
</div>
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">1/4</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h1 class="pure-u-1 centered">Features.</h1>
|
||||
<div class="pure-u-1">
|
||||
<div class="cell">
|
||||
<ul>
|
||||
<li>Adds configurable media queries for different screen widths (Desktops, Landscape Tablets, Portrait Tablets, Phones)</li>
|
||||
<li>Collapses elements to 100% if smaller than a certain width (767px by default)</li>
|
||||
<li>Adjusts images to fit on smaller screens</li>
|
||||
<li>Works with as many columns as you want (or as few)</li>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">1/4</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="pure-g-r">
|
||||
<h1 class="pure-u-1 centered">Example.</h1>
|
||||
<div class="pure-foo pure-u-1-4">
|
||||
<div class="cell">
|
||||
<h3>Fast</h3>
|
||||
<p>YUI's lightweight core and modular architecture make it scalable, fast, and robust. Built by frontend engineers at Yahoo!, YUI powers the most popular websites in the world.</p>
|
||||
</div>
|
||||
</div><!--/span-->
|
||||
|
||||
<div class="pure-u-1-4 pure-foo">
|
||||
<div class="cell">
|
||||
<h3>Complete</h3>
|
||||
<p>YUI's intuitive and well-documented API takes you from basic DOM handling to building performant and maintainable applications on desktop browsers, mobile devices, and servers.</p>
|
||||
</div>
|
||||
</div><!--/span-->
|
||||
<div class="pure-u-1-4">
|
||||
<div class="cell">
|
||||
<h3>Industrial Strength</h3>
|
||||
<p>A thriving community, a carefully architected infrastructure, and a comprehensive suite of tools help you code like a pro, from simple web pages to complex web applications.</p>
|
||||
</div>
|
||||
</div><!--/span-->
|
||||
<div class="pure-u-1-4">
|
||||
<div class="cell">
|
||||
<h3>Free and Open</h3>
|
||||
<p>YUI is free for all uses and is developed in the open on GitHub. Core team members can always be found in the forums and the #yui IRC channel on Freenode. Pull requests welcome!</p>
|
||||
</div>
|
||||
</div><!--/span-->
|
||||
|
||||
<div class="pure-u-1 centered">
|
||||
<img class="pure-u" src="http://lorempixel.com/800/400/" alt="test image">
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-3-4">
|
||||
<div class="content">3/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">1/4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-3">
|
||||
<div class="content">1/3</div>
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="content">1/3</div>
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="content">1/3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-3">
|
||||
<div class="content">1/3</div>
|
||||
</div>
|
||||
<div class="pure-u-2-3">
|
||||
<div class="content">2/3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-5">
|
||||
<div class="content">1/5</div>
|
||||
</div>
|
||||
<div class="pure-u-2-5">
|
||||
<div class="cell">
|
||||
<h3>Two-Fifth Column</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis. Duis nulla dolor, suscipit in venenatis vitae, auctor eu nibh. Proin lobortis arcu nec tellus vehicula vitae pellentesque nisi molestie. Aenean felis ligula, hendrerit id dictum sed, ornare nec leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec non lectus et quam porttitor dignissim vitae ac odio. Aenean mattis dui porta lacus egestas ultricies. Mauris vel dolor libero, sit amet rhoncus nibh.</p>
|
||||
</div>
|
||||
<div class="content">2/5</div>
|
||||
</div>
|
||||
<div class="pure-u-2-5">
|
||||
<div class="content">2/5</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-3-5">
|
||||
<div class="cell">
|
||||
<h3>Three-Fifth Column</h3>
|
||||
<p>Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl, vitae luctus velit vulputate vel. Aliquam sed sodales orci. Proin varius placerat magna tristique tincidunt. Morbi non dignissim felis. Proin bibendum libero nec felis eleifend porttitor. Morbi auctor venenatis justo, molestie luctus mi pulvinar nec. Pellentesque vitae ornare lacus. Nulla hendrerit tempor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus facilisis cursus. Integer in lacinia dui. Phasellus ullamcorper, sem at congue pretium, velit sapien ornare mi, eu eleifend risus sapien ac eros.</p>
|
||||
<div class="content">3/5</div>
|
||||
</div>
|
||||
<div class="pure-u-2-5">
|
||||
<div class="content">2/5</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam viverra, augue et sollicitudin dignissim, lectus tellus imperdiet lectus, a tempor ipsum mauris vitae augue. Nullam vel nulla a purus cursus consequat. Nulla orci elit, malesuada nec egestas non, ornare quis nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-6">
|
||||
<div class="content">1/6</div>
|
||||
</div>
|
||||
<div class="pure-u-1-6">
|
||||
<div class="content">1/6</div>
|
||||
</div>
|
||||
<div class="pure-u-1-6">
|
||||
<div class="content">1/6</div>
|
||||
</div>
|
||||
<div class="pure-u-1-6">
|
||||
<div class="content">1/6</div>
|
||||
</div>
|
||||
<div class="pure-u-1-6">
|
||||
<div class="content">1/6</div>
|
||||
</div>
|
||||
<div class="pure-u-1-6">
|
||||
<div class="content">1/6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-6">
|
||||
<div class="content">1/6</div>
|
||||
</div>
|
||||
<div class="pure-u-5-6">
|
||||
<div class="content">5/6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-8">
|
||||
<div class="content">1/8</div>
|
||||
</div>
|
||||
<div class="pure-u-3-8">
|
||||
<div class="content">3/8</div>
|
||||
</div>
|
||||
<div class="pure-u-3-8">
|
||||
<div class="content">3/8</div>
|
||||
</div>
|
||||
<div class="pure-u-1-8">
|
||||
<div class="content">1/8</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-3-8">
|
||||
<div class="content">3/8</div>
|
||||
</div>
|
||||
<div class="pure-u-5-8">
|
||||
<div class="content">5/8</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-7-8">
|
||||
<div class="content">7/8</div>
|
||||
</div>
|
||||
<div class="pure-u-1-8">
|
||||
<div class="content">1/8</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">1/2</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">1/4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-8">
|
||||
<div class="content">1/8</div>
|
||||
</div>
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">1/2</div>
|
||||
</div>
|
||||
<div class="pure-u-1-8">
|
||||
<div class="content">1/8</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">1/4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-12">
|
||||
<div class="content">1/12</div>
|
||||
</div>
|
||||
<div class="pure-u-5-12">
|
||||
<div class="content">5/12</div>
|
||||
</div>
|
||||
<div class="pure-u-1-12">
|
||||
<div class="content">1/12</div>
|
||||
</div>
|
||||
<div class="pure-u-5-12">
|
||||
<div class="content">5/12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-7-12">
|
||||
<div class="content">7/12</div>
|
||||
</div>
|
||||
<div class="pure-u-5-12">
|
||||
<div class="content">5/12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-12">
|
||||
<div class="content">1/12</div>
|
||||
</div>
|
||||
<div class="pure-u-11-12">
|
||||
<div class="content">11/12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-24">
|
||||
<div class="content">1/24</div>
|
||||
</div>
|
||||
<div class="pure-u-5-24">
|
||||
<div class="content">5/24</div>
|
||||
</div>
|
||||
<div class="pure-u-7-24">
|
||||
<div class="content">7/24</div>
|
||||
</div>
|
||||
<div class="pure-u-11-24">
|
||||
<div class="content">11/24</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-17-24">
|
||||
<div class="content">17/24</div>
|
||||
</div>
|
||||
<div class="pure-u-7-24">
|
||||
<div class="content">7/24</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-19-24">
|
||||
<div class="content">19/24</div>
|
||||
</div>
|
||||
<div class="pure-u-5-24">
|
||||
<div class="content">5/24</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-24">
|
||||
<div class="content">1/24</div>
|
||||
</div>
|
||||
<div class="pure-u-23-24">
|
||||
<div class="content">23/24</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Custom Font and Grids</h2>
|
||||
|
||||
<div class="serif">
|
||||
<p>
|
||||
Grids with a serif font stack.
|
||||
</p>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">Nested 1/2</div>
|
||||
</div>
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">Nested 1/2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">r1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">r1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">r1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">r1/4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='pure-g'>
|
||||
<h1 class="pure-u-1 centered">Grids on mobile</h1>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='pure-g'>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='pure-g'>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="cell">
|
||||
<h4>Thirds</h4>
|
||||
<p>This cell will be a grid even on mobile devices.</p>
|
||||
</div>
|
||||
|
||||
<div class="monospace">
|
||||
<p>
|
||||
Grids with a monospace font stack.
|
||||
</p>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">Nested 1/2</div>
|
||||
</div>
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">Nested 1/2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">r1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">r1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">r1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4">
|
||||
<div class="content">r1/4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class='pure-g-r'>
|
||||
<h1 class="pure-u-1 centered">Helper Classes</h1>
|
||||
<div class="pure-u-1 pure-hidden-phone">
|
||||
<div class="cell">
|
||||
<h4>No Phones Allowed</h4>
|
||||
<p>Should be hidden on phones</p>
|
||||
</div>
|
||||
<h2>Wrapping Grids</h2>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">Wrapping 1/2</div>
|
||||
</div>
|
||||
<div class="pure-u-1 pure-hidden-tablet">
|
||||
<div class="cell">
|
||||
<h4>No Tablets Allowed</h4>
|
||||
<p>Should be hidden on tablets</p>
|
||||
</div>
|
||||
<div class="pure-u-1-2">
|
||||
<div class="content">Wrapping 1/2</div>
|
||||
</div>
|
||||
<div class="pure-u-1 pure-hidden-desktop">
|
||||
<div class="cell">
|
||||
<h4>No big screens allowed.</h4>
|
||||
<p>Should be hidden on desktops/laptops</p>
|
||||
</div>
|
||||
<div class="pure-u-1-3">
|
||||
<div class="content">Wrapping 1/3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Responsive Grids</h2>
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
|
||||
<div class="content">1 -> 1/2 -> 1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
|
||||
<div class="content">1 -> 1/2 -> 1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
|
||||
<div class="content">1 -> 1/2 -> 1/4</div>
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
|
||||
<div class="content">1 -> 1/2 -> 1/4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Nested Responsive Grids</h2>
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1 pure-u-md-1-2">
|
||||
<div class="content">
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1 pure-u-lg-1-2">
|
||||
<div class="content">1 -> 1/2</div>
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-lg-1-2">
|
||||
<div class="content">1 -> 1/2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1 pure-u-md-1-2">
|
||||
<div class="content">
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1-4 pure-u-lg-1-8">
|
||||
<div class="content">1/4 -> 1/8</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4 pure-u-lg-1-8">
|
||||
<div class="content">1/4 -> 1/8</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4 pure-u-lg-3-8">
|
||||
<div class="content">1/4 -> 3/8</div>
|
||||
</div>
|
||||
<div class="pure-u-1-4 pure-u-lg-3-8">
|
||||
<div class="content">1/4 -> 3/8</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2><code>.pure-img</code> Images</h2>
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
|
||||
<img class="pure-img" src="http://placehold.it/350x200">
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
|
||||
<img class="pure-img" src="http://placehold.it/350x200">
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
|
||||
<img class="pure-img" src="http://placehold.it/350x200">
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
|
||||
<img class="pure-img" src="http://placehold.it/350x200">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -4,22 +4,26 @@
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pure-menu-list,
|
||||
.pure-menu-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pure-menu-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pure-menu-item {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pure-menu-link,
|
||||
.pure-menu-heading,
|
||||
.pure-menu-responsive-toggle {
|
||||
@ -36,7 +40,6 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
/* FIXED MENU */
|
||||
.pure-menu-fixed {
|
||||
position: fixed;
|
||||
@ -45,7 +48,6 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* HORIZONTAL MENU */
|
||||
.pure-menu-horizontal {
|
||||
width: 100%;
|
||||
|
||||
@ -49,9 +49,6 @@
|
||||
margin-right: 15px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
overflow: visible; /*to make ths where the title is really long work*/
|
||||
padding: 6px 12px; /* cell padding */
|
||||
padding: 0.5em 1em; /* cell padding */
|
||||
}
|
||||
.pure-table td:first-child,
|
||||
.pure-table th:first-child {
|
||||
@ -55,8 +55,7 @@ striping:
|
||||
.pure-table-bordered td {
|
||||
border-bottom: 1px solid #cbcbcb;
|
||||
}
|
||||
.pure-table-bordered tbody > tr:last-child td,
|
||||
.pure-table-horizontal tbody > tr:last-child td {
|
||||
.pure-table-bordered tbody > tr:last-child > td {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
@ -68,6 +67,6 @@ striping:
|
||||
border-width: 0 0 1px 0;
|
||||
border-bottom: 1px solid #cbcbcb;
|
||||
}
|
||||
.pure-table-horizontal tbody > tr:last-child td {
|
||||
.pure-table-horizontal tbody > tr:last-child > td {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
@ -1,251 +1,329 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../build/tables-min.css">
|
||||
<style>
|
||||
<meta charset="utf-8">
|
||||
<title>Tables Tests</title>
|
||||
|
||||
table {
|
||||
width:480px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" href="../../../../build/base.css">
|
||||
<link rel="stylesheet" href="../../../../build/tables.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="intro">
|
||||
<h1>Pure Table CSS</h1>
|
||||
<h2>
|
||||
Simple CSS for HTML Tables
|
||||
</h2>
|
||||
</div>
|
||||
<h1>Tables Tests</h1>
|
||||
|
||||
<h2>Default Table</h2>
|
||||
<h2>Default Table</h2>
|
||||
|
||||
<p>Add the <code>pure-table</code> classname to a table to style an HTML table This class adds appropriate padding and borders to table elements, and increases the emphasis on the header.</p>
|
||||
<table class="pure-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="pure-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Bordered Table</h2>
|
||||
<p>To add horizontal and vertical borders to all cells, add the <code>pure-table-bordered</code> classname to the <code>table</code> element.</p>
|
||||
<table class="pure-table pure-table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Bordered Table</h2>
|
||||
|
||||
<h2>Table with Horizontal Borders</h2>
|
||||
<p>If you prefer to just have horizontal lines, add the <code>pure-table-horizontal</code> classname to the <code>table</code> element.</p>
|
||||
<table class="pure-table pure-table-horizontal">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="pure-table pure-table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Striped Table</h2>
|
||||
<p>Large tables are easier to parse visually if rows are easily distinguishable. Adding the <code>pure-table-odd</code> class name to every other <code>tr</code> element changes the background of the row and creates a zebra-styled effect.</p>
|
||||
<table class="pure-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class='pure-table-odd'>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr class='pure-table-odd'>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Ford</td>
|
||||
<td>Focus</td>
|
||||
<td>2008</td>
|
||||
</tr>
|
||||
<tr class='pure-table-odd'>
|
||||
<td>5</td>
|
||||
<td>Nissan</td>
|
||||
<td>Sentra</td>
|
||||
<td>2011</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>BMW</td>
|
||||
<td>M3</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr class='pure-table-odd'>
|
||||
<td>7</td>
|
||||
<td>Honda</td>
|
||||
<td>Civic</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Kia</td>
|
||||
<td>Soul</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Table with Horizontal Borders</h2>
|
||||
|
||||
<table class="pure-table pure-table-horizontal">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Striped Table</h2>
|
||||
|
||||
<h3>Nth Child Selector Styling</h3>
|
||||
<p>Here's a striped table that's zebra-styled using <code>nth-child</code> selectors.</p>
|
||||
<table class="pure-table pure-table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Ford</td>
|
||||
<td>Focus</td>
|
||||
<td>2008</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Nissan</td>
|
||||
<td>Sentra</td>
|
||||
<td>2011</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>BMW</td>
|
||||
<td>M3</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Honda</td>
|
||||
<td>Civic</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Kia</td>
|
||||
<td>Soul</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="pure-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="pure-table-odd">
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr class="pure-table-odd">
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Ford</td>
|
||||
<td>Focus</td>
|
||||
<td>2008</td>
|
||||
</tr>
|
||||
<tr class="pure-table-odd">
|
||||
<td>5</td>
|
||||
<td>Nissan</td>
|
||||
<td>Sentra</td>
|
||||
<td>2011</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>BMW</td>
|
||||
<td>M3</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr class="pure-table-odd">
|
||||
<td>7</td>
|
||||
<td>Honda</td>
|
||||
<td>Civic</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Kia</td>
|
||||
<td>Soul</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Nth Child Selector Styling</h3>
|
||||
|
||||
<table class="pure-table pure-table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Ford</td>
|
||||
<td>Focus</td>
|
||||
<td>2008</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Nissan</td>
|
||||
<td>Sentra</td>
|
||||
<td>2011</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>BMW</td>
|
||||
<td>M3</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Honda</td>
|
||||
<td>Civic</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Kia</td>
|
||||
<td>Soul</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Nested Table</h2>
|
||||
|
||||
<table class="pure-table pure-table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Make</th>
|
||||
<th>Model</th>
|
||||
<th>Type</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Honda</td>
|
||||
<td>Accord</td>
|
||||
<td>
|
||||
<table class="pure-table pure-table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Fuel</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Diesel</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Petrol</td>
|
||||
<td>2009</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Toyota</td>
|
||||
<td>Camry</td>
|
||||
<td>
|
||||
<table class="pure-table pure-table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Fuel</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Diesel</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Petrol</td>
|
||||
<td>2012</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Hyundai</td>
|
||||
<td>Elantra</td>
|
||||
<td>
|
||||
<table class="pure-table pure-table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Fuel</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Diesel</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Petrol</td>
|
||||
<td>2010</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
21
tasks/bower_install.js
Normal file
21
tasks/bower_install.js
Normal file
@ -0,0 +1,21 @@
|
||||
'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();
|
||||
});
|
||||
});
|
||||
};
|
||||
18
tasks/bower_json.js
Normal file
18
tasks/bower_json.js
Normal file
@ -0,0 +1,18 @@
|
||||
'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, ' '));
|
||||
});
|
||||
};
|
||||
18
tasks/license.js
Normal file
18
tasks/license.js
Normal file
@ -0,0 +1,18 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = function (grunt) {
|
||||
grunt.registerMultiTask('license', 'Stamps license banners on files.', function () {
|
||||
var options = this.options({banner: ''}),
|
||||
banner = grunt.template.process(options.banner),
|
||||
tally = 0;
|
||||
|
||||
this.files.forEach(function (filePair) {
|
||||
filePair.src.forEach(function (file) {
|
||||
grunt.file.write(file, banner + grunt.file.read(file));
|
||||
tally += 1;
|
||||
});
|
||||
});
|
||||
|
||||
grunt.log.writeln('Stamped license on ' + String(tally).cyan + ' files.');
|
||||
});
|
||||
};
|
||||
21
tasks/suppress.js
Normal file
21
tasks/suppress.js
Normal file
@ -0,0 +1,21 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = function (grunt) {
|
||||
grunt.registerTask('suppress', 'Suppresses noisy logs', function () {
|
||||
var allowed = ['success', 'fail', 'warn', 'error'];
|
||||
|
||||
grunt.util.hooker.hook(grunt.log, {
|
||||
passName: true,
|
||||
|
||||
pre: function (name) {
|
||||
if (allowed.indexOf(name) === -1) {
|
||||
grunt.log.muted = true;
|
||||
}
|
||||
},
|
||||
|
||||
post: function () {
|
||||
grunt.log.muted = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user