mirror of
https://github.com/pure-css/pure.git
synced 2024-11-07 21:34:24 +00:00
Merge branch 'grunt-bower' of github.com:ericf/pure into ericf-grunt-bower
This commit is contained in:
Eric Ferraiuolo
commit
9ab35b7d82
122
Gruntfile.js
122
Gruntfile.js
@ -7,19 +7,14 @@ module.exports = function (grunt) {
|
||||
grunt.initConfig({
|
||||
|
||||
pkg : grunt.file.readJSON('package.json'),
|
||||
normalize: grunt.file.readJSON('src/base/bower.json'),
|
||||
|
||||
// -- Constants ------------------------------------------------------------
|
||||
|
||||
BUILD_COMMENT: 'THIS FILE IS GENERATED BY A BUILD SCRIPT - DO NOT EDIT!',
|
||||
bower: grunt.file.readJSON('bower.json'),
|
||||
|
||||
// -- 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 ----------------------------------------------------------
|
||||
@ -28,44 +23,21 @@ grunt.initConfig({
|
||||
build: {
|
||||
expand : true,
|
||||
flatten: true,
|
||||
src : 'src/**/css/*.css',
|
||||
dest : 'build/',
|
||||
|
||||
src: [
|
||||
'bower_components/normalize-css/normalize.css',
|
||||
'src/**/css/*.css'
|
||||
],
|
||||
|
||||
rename: function (dest, src) {
|
||||
// normalize -> base
|
||||
src = src.replace(/^normalize(-.+\.css|\.css)$/, 'base$1');
|
||||
if (src === 'normalize.css') {
|
||||
src = 'base.css';
|
||||
}
|
||||
|
||||
return path.join(dest, src);
|
||||
}
|
||||
},
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -80,7 +52,6 @@ grunt.initConfig({
|
||||
]},
|
||||
|
||||
{'build/forms-nr.css': [
|
||||
'build/forms-core.css',
|
||||
'build/forms.css'
|
||||
]},
|
||||
|
||||
@ -141,11 +112,7 @@ grunt.initConfig({
|
||||
},
|
||||
|
||||
src: {
|
||||
src: [
|
||||
'src/**/css/*.css',
|
||||
'!src/base/css/*',
|
||||
'!src/forms/css/forms-core.css'
|
||||
]
|
||||
src: 'src/**/css/*.css'
|
||||
}
|
||||
},
|
||||
|
||||
@ -173,8 +140,12 @@ grunt.initConfig({
|
||||
|
||||
expand : true,
|
||||
flatten: true,
|
||||
src : 'build/*.css',
|
||||
dest : '<%= pkg.name %>/<%= pkg.version %>/'
|
||||
dest : '<%= pkg.name %>/<%= pkg.version %>/',
|
||||
|
||||
src: [
|
||||
'{bower.json,LICENSE.md,README.md,HISTORY.md}',
|
||||
'build/*.css'
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
@ -185,7 +156,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')
|
||||
@ -193,7 +164,7 @@ grunt.initConfig({
|
||||
|
||||
expand: true,
|
||||
cwd : 'build/',
|
||||
src : ['base*.css', 'forms*.css', 'tables*.css', '<%= pkg.name %>*.css']
|
||||
src : ['base*.css', '<%= pkg.name %>*.css']
|
||||
},
|
||||
|
||||
yahoo: {
|
||||
@ -217,12 +188,11 @@ grunt.initConfig({
|
||||
|
||||
contextualize: {
|
||||
normalize: {
|
||||
src : 'src/base/css/normalize.css',
|
||||
dest: 'src/base/css/normalize-context.css',
|
||||
src : 'bower_components/normalize-css/normalize.css',
|
||||
dest: 'build/base-context.css',
|
||||
|
||||
options: {
|
||||
prefix: '.pure',
|
||||
banner: '/* <%= BUILD_COMMENT %> */\n'
|
||||
prefix: '.pure'
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -232,7 +202,7 @@ grunt.initConfig({
|
||||
observe: {
|
||||
src: {
|
||||
files: 'src/**/css/*.css',
|
||||
tasks: ['test', 'suppress', 'default'],
|
||||
tasks: ['test', 'suppress', 'build'],
|
||||
|
||||
options: {
|
||||
interrupt: true
|
||||
@ -251,30 +221,24 @@ grunt.loadNpmTasks('grunt-contrib-cssmin');
|
||||
grunt.loadNpmTasks('grunt-contrib-compress');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
|
||||
grunt.registerTask('default', [
|
||||
grunt.registerTask('default', ['import', 'test', 'build']);
|
||||
grunt.registerTask('import', ['bower-install']);
|
||||
grunt.registerTask('test', ['csslint']);
|
||||
grunt.registerTask('build', [
|
||||
'clean:build',
|
||||
'copy:build',
|
||||
'contextualize:normalize',
|
||||
'concat:build',
|
||||
'clean:build_res',
|
||||
'cssmin',
|
||||
'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',
|
||||
'compress:release'
|
||||
@ -300,23 +264,24 @@ grunt.registerTask('suppress', function () {
|
||||
});
|
||||
});
|
||||
|
||||
// -- Import Tasks -------------------------------------------------------------
|
||||
|
||||
grunt.registerTask('import-normalize', [
|
||||
'clean:base',
|
||||
'copy:normalize',
|
||||
'contextualize:normalize'
|
||||
]);
|
||||
|
||||
// -- Bower Task ---------------------------------------------------------------
|
||||
// -- Bower Tasks --------------------------------------------------------------
|
||||
|
||||
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);
|
||||
.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();
|
||||
});
|
||||
});
|
||||
|
||||
// -- License Task -------------------------------------------------------------
|
||||
@ -352,6 +317,11 @@ grunt.registerMultiTask('contextualize', 'Makes Contextualized CSS files.', func
|
||||
}
|
||||
|
||||
this.files.forEach(function (filePair) {
|
||||
if (!filePair.src.length) {
|
||||
processing += 1;
|
||||
return oneDone();
|
||||
}
|
||||
|
||||
filePair.src.forEach(function (file) {
|
||||
var src = grunt.file.read(file),
|
||||
contextual = banner,
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
"name": "pure",
|
||||
"version": "0.3.0-pre",
|
||||
"devDependencies": {
|
||||
"normalize-css": "1.x"
|
||||
"normalize-css": "1.1.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,15 +4,15 @@
|
||||
"private": true,
|
||||
"repository": "git://github.com/yui/pure.git",
|
||||
"devDependencies": {
|
||||
"bower": "~0.9.2",
|
||||
"bower": "~1.1.0",
|
||||
"grunt": "~0.4.1",
|
||||
"grunt-contrib-cssmin": "~0.6.0",
|
||||
"grunt-contrib-clean": "~0.4.1",
|
||||
"grunt-contrib-clean": "~0.5.0",
|
||||
"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",
|
||||
"grunt-contrib-watch": "~0.5.1",
|
||||
"parserlib": "~0.2.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
@ -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,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 */
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user