Info on project differences between this and original. Normalize latest
This commit is contained in:
Nick Pack
parent
bd0652b523
commit
1dbd6a39db
31
README.md
31
README.md
@ -7,6 +7,20 @@ My fork has one significant difference over the original project, that is a full
|
||||
|
||||
As time goes by I will gradually extend the available options and build a packaging tool that allows you to select all of your customisations in a graphical way, thinking something along the lines of jQuery themeroller, just a bit more lightweight.
|
||||
|
||||
### Some Key Differences
|
||||
* Maintained!
|
||||
* Configurable grid
|
||||
* Default colours, borders, fonts, margins, padding etc are all configurable variables
|
||||
* Normalized elements, rather than the old school CSS resets
|
||||
* Sensible Table styles
|
||||
* Taking advantage of sass, the majority of selector repetition is removed in favour of mixins that generate the selectors
|
||||
* Many issues flagged by CSSLint refactored to resolve them
|
||||
* The original CSS has been split out into individual files and heavily refactored to tidy it up
|
||||
* Golden ratio default line heights
|
||||
* A selection of useful mixins
|
||||
* Push and pull column classes
|
||||
* Bower installable
|
||||
|
||||
## Installing
|
||||
Either clone this repository and drop in manually, or install from bower:
|
||||
|
||||
@ -16,29 +30,30 @@ bower install --save ribs
|
||||
|
||||
## Build status
|
||||
The project is set up to build and run csslint on Travis:
|
||||
Master: [](https://travis-ci.org/nickpack/Ribs)
|
||||
|
||||
Development: [](https://travis-ci.org/nickpack/Ribs)
|
||||
* Master: [](https://travis-ci.org/nickpack/Ribs)
|
||||
* Development: [](https://travis-ci.org/nickpack/Ribs)
|
||||
|
||||
## Building
|
||||
I've added grunt configuration to the repository for those of you that use it.
|
||||
|
||||
There are 4 main tasks added:
|
||||
* default - Runs Sass to create the stylesheet from the source files, places the output in ./css then creates a minified version of the file and places it into the same directory
|
||||
* test - This runs CSSLint over the output CSS file (Note that there are a few bits in skeleton that I need to fix!)
|
||||
* test - This runs CSSLint over the output CSS file (Note that there are a few bits in the original skeleton css that I still need to fix!)
|
||||
* minify - This literally just runs cssmin, useful if you've edited Ribs.css directly
|
||||
* watch - This will monitor the scss directory for changes and automatically rebuild the css and minified css (Effectively the same as sass --watch but with added minification)
|
||||
|
||||
### To get started with the grunt tools
|
||||
You need to npm install grunt-cli to start with, otherwise you wont have a runner!
|
||||
You need to install grunt-cli globally (`npm install -g grunt-cli`) to start with, otherwise you wont have a runner!
|
||||
Then following that, from the root dir of this project, run `npm install` which will set up all of the required dependencies.
|
||||
|
||||
You should be good to go.
|
||||
|
||||
## Changelog
|
||||
* August 7, 2013 - (v1.0.6) Some additional variables, grid push and pull
|
||||
* July 17, 2013 - (v1.0.5) Some additional variables, some base table styling
|
||||
* July 14, 2013 - (v1.0.4) Removed reset and replaced it with normalize
|
||||
* Oct 10, 2013 - (v1.0.7) Documented the differences between the original skeleton project and Ribs, Updated normalize to 2.1.3
|
||||
* Aug 7, 2013 - (v1.0.6) Some additional variables, grid push and pull
|
||||
* Jul 17, 2013 - (v1.0.5) Some additional variables, some base table styling
|
||||
* Jul 14, 2013 - (v1.0.4) Removed reset and replaced it with normalize
|
||||
* May 30, 2013 - (v1.0.3) Added 1.5 * font size line heights to headings and paragraphs
|
||||
* May 28, 2013 - Rename project to Ribs
|
||||
* May 17, 2013 - (v1.0.2) Travis CI build configuration, and minor refactor to remove as many of the warnings from CSSLint as was feasible to do - MAY CAUSE REGRESSIONS.
|
||||
@ -57,7 +72,7 @@ You should be good to go.
|
||||
## Licence
|
||||
Copyright (c) 2013 Nick Pack
|
||||
Based on the original skeleton project which is Copyright 2011 Dave Gamache
|
||||
Licensed under the MIT license.
|
||||
Licensed under the MIT license.
|
||||
|
||||
[](https://bitdeli.com/free "Bitdeli Badge")
|
||||
|
||||
|
||||
@ -1,45 +0,0 @@
|
||||
== HEAD
|
||||
|
||||
== 2.1.1 (April 8, 2013)
|
||||
|
||||
* Normalize root `color` and `background` to counter the effects of system
|
||||
color schemes.
|
||||
|
||||
== 2.1.0 (January 21, 2013)
|
||||
|
||||
* Normalize `text-transform` for `button` and `select`.
|
||||
* Normalize `h1` margin when within HTML5 sectioning elements.
|
||||
* Normalize `hr` element.
|
||||
* Remove unnecessary `pre` styles.
|
||||
* Add `main` element to HTML5 display definitions.
|
||||
* Fix cursor style for disabled button `input`.
|
||||
|
||||
== 2.0.1 (August 20, 2012)
|
||||
|
||||
* Remove stray IE 6/7 `inline-block` hack from HTML5 display settings.
|
||||
|
||||
== 2.0.0 (August 19, 2012)
|
||||
|
||||
* Remove legacy browser form normalizations.
|
||||
* Remove all list normalizations.
|
||||
* Add `quotes` normalizations.
|
||||
* Remove all heading normalizations except `h1` font size.
|
||||
* Form elements automatically inherit `font-family` from ancestor.
|
||||
* Drop support for IE 6/7, Firefox < 4, and Safari < 5.
|
||||
|
||||
== 1.0.1 (August 19, 2012)
|
||||
|
||||
* Adjust `small` font size normalization.
|
||||
|
||||
== 1.0.0 (August 14, 2012)
|
||||
|
||||
(Only the notable changes since public release)
|
||||
|
||||
* Add MIT License.
|
||||
* Hide `audio` elements without controls in iOS 5 (#69).
|
||||
* Normalize heading margins and font size.
|
||||
* Move font-family normalization from `body` to `html` (#62).
|
||||
* Remove scrollbar normalization (#64 #65).
|
||||
* Remove excess padding from checkbox and radio inputs in IE 7 (#42).
|
||||
* Add IE9 correction for SVG overflow (#16).
|
||||
* Add fix for legend not inheriting color in IE 6/7/8/9.
|
||||
@ -1,177 +0,0 @@
|
||||
# Contributing to normalize.css
|
||||
|
||||
Please take a moment to review this document in order to make the contribution
|
||||
process easy and effective for everyone involved.
|
||||
|
||||
Following these guidelines helps to communicate that you respect the time of
|
||||
the developers managing and developing this open source project. In return,
|
||||
they should reciprocate that respect in addressing your issue or assessing
|
||||
patches and features.
|
||||
|
||||
|
||||
## Using the issue tracker
|
||||
|
||||
The issue tracker is the preferred channel for [bug reports](#bugs),
|
||||
[features requests](#features) and [submitting pull
|
||||
requests](#pull-requests), but please respect the following restrictions:
|
||||
|
||||
* Please **do not** use the issue tracker for personal support requests.
|
||||
|
||||
* Please **do not** derail or troll issues. Keep the discussion on topic and
|
||||
respect the opinions of others.
|
||||
|
||||
|
||||
<a name="bugs"></a>
|
||||
## Bug reports
|
||||
|
||||
A bug is a _demonstrable problem_ that is caused by the code in the repository.
|
||||
Good bug reports are extremely helpful - thank you!
|
||||
|
||||
Guidelines for bug reports:
|
||||
|
||||
1. **Use the GitHub issue search** – check if the issue has already been
|
||||
reported.
|
||||
|
||||
2. **Check if the issue has been fixed** – try to reproduce it using the
|
||||
latest `master` branch in the repository.
|
||||
|
||||
3. **Isolate the problem** – create a live example (e.g., on
|
||||
[Codepen](http://codepen.io)) of a [reduced test
|
||||
case](http://css-tricks.com/6263-reduced-test-cases/).
|
||||
|
||||
A good bug report shouldn't leave others needing to chase you up for more
|
||||
information. Please try to be as detailed as possible in your report. What is
|
||||
your environment? What steps will reproduce the issue? What browser(s) and OS
|
||||
experience the problem? What would you expect to be the outcome? All these
|
||||
details will help people to fix any potential bugs.
|
||||
|
||||
Example:
|
||||
|
||||
> Short and descriptive example bug report title
|
||||
>
|
||||
> A summary of the issue and the browser/OS environment in which it occurs. If
|
||||
> suitable, include the steps required to reproduce the bug.
|
||||
>
|
||||
> 1. This is the first step
|
||||
> 2. This is the second step
|
||||
> 3. Further steps, etc.
|
||||
>
|
||||
> `<url>` - a link to the reduced test case
|
||||
>
|
||||
> Any other information you want to share that is relevant to the issue being
|
||||
> reported. This might include the lines of code that you have identified as
|
||||
> causing the bug, and potential solutions (and your opinions on their
|
||||
> merits).
|
||||
|
||||
|
||||
<a name="features"></a>
|
||||
## Feature requests
|
||||
|
||||
Feature requests are welcome. But take a moment to find out whether your idea
|
||||
fits with the scope and aims of the project. It's up to *you* to make a strong
|
||||
case to convince the project's developers of the merits of this feature. Please
|
||||
provide as much detail and context as possible.
|
||||
|
||||
|
||||
<a name="pull-requests"></a>
|
||||
## Pull requests
|
||||
|
||||
Good pull requests - patches, improvements, new features - are a fantastic
|
||||
help. They should remain focused in scope and avoid containing unrelated
|
||||
commits.
|
||||
|
||||
**Please ask first** before embarking on any significant work, otherwise you
|
||||
risk spending a lot of time working on something that the project's developers
|
||||
might not want to merge into the project.
|
||||
|
||||
Please adhere to the coding conventions used throughout a project (whitespace,
|
||||
accurate comments, etc.) and any other requirements (such as test coverage).
|
||||
|
||||
Follow this process if you'd like your work considered for inclusion in the
|
||||
project:
|
||||
|
||||
1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork,
|
||||
and configure the remotes:
|
||||
|
||||
```bash
|
||||
# Clone your fork of the repo into the current directory
|
||||
git clone https://github.com/<your-username>/normalize.css
|
||||
# Navigate to the newly cloned directory
|
||||
cd normalize.css
|
||||
# Assign the original repo to a remote called "upstream"
|
||||
git remote add upstream https://github.com/necolas/normalize.css
|
||||
```
|
||||
|
||||
2. If you cloned a while ago, get the latest changes from upstream:
|
||||
|
||||
```bash
|
||||
git checkout master
|
||||
git pull upstream master
|
||||
```
|
||||
|
||||
3. Never work directly on `master`. Create a new topic branch (off the latest
|
||||
version of `master`) to contain your feature, change, or fix:
|
||||
|
||||
```bash
|
||||
git checkout -b <topic-branch-name>
|
||||
```
|
||||
|
||||
4. Commit your changes in logical chunks. Please adhere to these [git commit
|
||||
message conventions](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
|
||||
or your code is unlikely be merged into the main project. Use Git's
|
||||
[interactive rebase](https://help.github.com/articles/interactive-rebase)
|
||||
feature to tidy up your commits before making them public.
|
||||
|
||||
Make sure to add a test to the `test.html` file if appropriate, and test
|
||||
your change in all supported browsers.
|
||||
|
||||
5. Locally rebase the upstream development branch into your topic branch:
|
||||
|
||||
```bash
|
||||
git pull --rebase upstream master
|
||||
```
|
||||
|
||||
6. Push your topic branch up to your fork:
|
||||
|
||||
```bash
|
||||
git push origin <topic-branch-name>
|
||||
```
|
||||
|
||||
10. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
|
||||
with a clear title and description.
|
||||
|
||||
Please submit a separate pull request for any appropriate changes required
|
||||
in the `v1` branch for legacy browsers.
|
||||
|
||||
**IMPORTANT**: By submitting a patch, you agree to allow the project owner to
|
||||
license your work under the same license as that used by the project.
|
||||
|
||||
|
||||
<a name="maintainers"></a>
|
||||
## Maintainers
|
||||
|
||||
If you have commit access, please follow this process for merging patches and
|
||||
cutting new releases.
|
||||
|
||||
### Accepting patches
|
||||
|
||||
1. Check that a patch is within the scope and philosophy of the project.
|
||||
2. Check that a patch has any necessary tests and a proper, descriptive commit
|
||||
message.
|
||||
3. Test the patch locally.
|
||||
4. Do not use GitHub's merge button. Apply the patch to `master` locally
|
||||
(either via `git am` or by checking the whole branch out). Amend minor
|
||||
problems with the author's original commit if necessary. Then push to GitHub.
|
||||
5. If a patch should be included in `v1`, cherry-pick the commits or manually
|
||||
apply if all else fails.
|
||||
|
||||
### Releasing a new version
|
||||
|
||||
1. Include all new functional changes in the CHANGELOG.
|
||||
2. Use a dedicated commit to increment the version. The version needs to be
|
||||
added to the CHANGELOG (inc. date), and edited in the README,
|
||||
`component.json`, and `normalize.css` files.
|
||||
3. The commit message must be of `v0.0.0` format.
|
||||
4. Create an annotated tag for the version: `git tag -m "v0.0.0" v0.0.0`.
|
||||
5. Push the changes and tags to GitHub: `git push --tags origin master`
|
||||
6. Checkout the `gh-pages` branch and follow the instructions in the README.
|
||||
@ -1,13 +1,13 @@
|
||||
# normalize.css v2.1.1
|
||||
# normalize.css v2
|
||||
|
||||
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.
|
||||
elements more consistently and in line with modern standards.
|
||||
|
||||
[Check out the demo](http://necolas.github.io/normalize.css/2.1.0/test.html)
|
||||
The project relies on researching the differences between default browser
|
||||
styles in order to precisely target only the styles that need or benefit from
|
||||
normalizing.
|
||||
|
||||
[Legacy browser support is available in v1](https://github.com/necolas/normalize.css/tree/v1)
|
||||
[Check out the demo](http://necolas.github.io/normalize.css/latest/test.html)
|
||||
|
||||
## Install
|
||||
|
||||
@ -15,6 +15,8 @@ Download from the [project page](http://necolas.github.io/normalize.css/).
|
||||
|
||||
Install with [Bower](http://bower.io/): `bower install --save normalize-css`
|
||||
|
||||
Install with [Component(1)](http://component.io/): `component install necolas/normalize.css`
|
||||
|
||||
## What does it do?
|
||||
|
||||
* Preserves useful defaults, unlike many CSS resets.
|
||||
@ -25,11 +27,10 @@ Install with [Bower](http://bower.io/): `bower install --save normalize-css`
|
||||
|
||||
## How to use it
|
||||
|
||||
Normalize.css is intended to be used as an alternative to CSS resets.
|
||||
No other styles should come before Normalize.css.
|
||||
|
||||
It's suggested that you read the `normalize.css` file and consider customising
|
||||
it to meet your needs. Alternatively, include the file in your project and
|
||||
override the defaults later in your CSS.
|
||||
It is recommended that you include the `normalize.css` file as untouched
|
||||
library code.
|
||||
|
||||
## Browser support
|
||||
|
||||
@ -39,7 +40,11 @@ override the defaults later in your CSS.
|
||||
* Opera 12+
|
||||
* Internet Explorer 8+
|
||||
|
||||
## Contribute
|
||||
[Normalize.css v1 provides legacy browser
|
||||
support](https://github.com/necolas/normalize.css/tree/v1) (IE 6+, Safari 4+),
|
||||
but is no longer actively developed.
|
||||
|
||||
## Contributing
|
||||
|
||||
Please read the CONTRIBUTING.md
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
|
||||
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
@ -339,8 +339,8 @@ html input[disabled] {
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9.
|
||||
* 2. Remove excess padding in IE 8/9.
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
@ -403,4 +403,4 @@ textarea {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "normalize-css",
|
||||
"version": "2.1.1",
|
||||
"author": "Nicolas Gallagher",
|
||||
"homepage": "http://necolas.github.com/normalize.css/",
|
||||
"main": "normalize.css",
|
||||
"styles": ["normalize.css"]
|
||||
}
|
||||
@ -1,354 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>Normalize CSS</title>
|
||||
<link rel="stylesheet" href="normalize.css">
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<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>
|
||||
Loading…
Reference in New Issue
Block a user