mirror of
https://github.com/h5bp/html5-boilerplate.git
synced 2026-01-09 14:48:02 -05:00
Update elements.html template to match that of index.html
This commit is contained in:
necolas
@@ -1,11 +1,9 @@
|
||||
<!doctype html>
|
||||
|
||||
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
|
||||
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
|
||||
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
|
||||
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
|
||||
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
|
||||
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
|
||||
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
|
||||
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@@ -17,7 +15,7 @@
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
|
||||
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
|
||||
@@ -25,12 +23,10 @@
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
|
||||
|
||||
<!-- CSS : implied media="all" -->
|
||||
<!-- CSS: implied media="all" -->
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
|
||||
<!-- Uncomment if you are specifically targeting less enabled mobile browsers
|
||||
<link rel="stylesheet" media="handheld" href="../css/handheld.css"> -->
|
||||
|
||||
|
||||
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
|
||||
<script src="../js/libs/modernizr-1.7.min.js"></script>
|
||||
|
||||
@@ -43,7 +39,7 @@
|
||||
|
||||
</header>
|
||||
|
||||
<div id="main">
|
||||
<div id="main" role="main">
|
||||
|
||||
<!-- demo content lovingly lifted from the azbuka project
|
||||
http://code.google.com/p/azbuka/
|
||||
@@ -221,7 +217,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>
|
||||
<p>
|
||||
I am <a href="http://devkick.com/lab/tripoli/sample.php?abc123">the a tag</a> example<br>
|
||||
|
||||
I am <abbr title="test">the abbr tag</abbr> example<br>
|
||||
@@ -273,9 +269,7 @@
|
||||
|
||||
<address>Address: somewhere, World</address>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
<p>
|
||||
<a href="#">Link</a><br>
|
||||
<strong><strong></strong><br>
|
||||
<del><del> deleted</del><br>
|
||||
@@ -296,236 +290,197 @@
|
||||
Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
|
||||
</tt>
|
||||
|
||||
<hr>
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
<!-- this following markup from http://bluetrip.org/ -->
|
||||
<dl>
|
||||
<dt>Description list title 01</dt>
|
||||
|
||||
<dd>Description list description 01</dd>
|
||||
<dt>Description list title 02</dt>
|
||||
<dd>Description list description 02</dd>
|
||||
<dd>Description list description 03</dd>
|
||||
|
||||
</dl>
|
||||
<table>
|
||||
<caption>Table Caption</caption>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table head th</th>
|
||||
<td>Table head td</td>
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
|
||||
<th>Table foot th</th>
|
||||
<td>Table foot td</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Table body th</th>
|
||||
|
||||
<td>Table body td</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Table body td</td>
|
||||
|
||||
<td>Table body td</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
<!-- this following markup from http://bluetrip.org/ -->
|
||||
<dl>
|
||||
<dt>Description list title 01</dt>
|
||||
<dd>Description list description 01</dd>
|
||||
<dt>Description list title 02</dt>
|
||||
<dd>Description list description 02</dd>
|
||||
<dd>Description list description 03</dd>
|
||||
</dl>
|
||||
<table>
|
||||
<caption>Table Caption</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table head th</th>
|
||||
<td>Table head td</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Table foot th</th>
|
||||
<td>Table foot td</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Table body th</th>
|
||||
<td>Table body td</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Table body td</td>
|
||||
<td>Table body td</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
<hr>
|
||||
|
||||
<form action="#">
|
||||
<fieldset>
|
||||
<legend>Form legend</legend>
|
||||
<form action="#">
|
||||
<fieldset>
|
||||
<legend>Form legend</legend>
|
||||
<div><label for="f1">Optional Text input:</label><input type="text" id="f1" value="input text" /></div>
|
||||
<div><label for="rt1">Required Text input:</label><input type="text" id="rt1" required /></div>
|
||||
<div><label for="twp1">Text input with pattern requirement and placeholder:</label><input type="text" pattern="\d{5}(-\d{4})?" title="a US Zip code, with or without the +4 exension" placeholder="12345-6789"/></div>
|
||||
<div><label for="s1">Search input:</label><input type="search" id="s1" /></div>
|
||||
<div><label for="e1">Email input:</label><input type="email" id="e1" /></div>
|
||||
<div><label for="u1">URL input:</label><input type="url" id="u1" /></div>
|
||||
<div><label for="pw">Password input:</label><input type="password" id="pw" value="password" /></div>
|
||||
<div><label for="f2">Radio input:</label><input type="radio" id="f2" /></div>
|
||||
<div><label for="f3">Checkbox input:</label><input type="checkbox" id="f3" /></div>
|
||||
<div><label for="f4">Select field:</label><select id="f4"><option>Option 01</option><option>Option 02</option></select></div>
|
||||
<div><label for="f5">Textarea:</label><textarea id="f5" cols="30" rows="5" >Textarea text</textarea></div>
|
||||
<div><label for="f6">Input Button:</label> <input type="button" id="f6" value="button text" /></div>
|
||||
<div><label for="f7">Submit Button:</label> <input type="submit" id="f7" value="button text" /></div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<div><label for="f1">Optional Text input:</label><input type="text" id="f1" value="input text" /></div>
|
||||
<div><label for="rt1">Required Text input:</label><input type="text" id="rt1" required /></div>
|
||||
<div><label for="twp1">Text input with pattern requirement and placeholder:</label><input type="text" pattern="\d{5}(-\d{4})?" title="a US Zip code, with or without the +4 exension" placeholder="12345-6789"/></div>
|
||||
<div><label for="s1">Search input:</label><input type="search" id="s1" /></div>
|
||||
<div><label for="e1">Email input:</label><input type="email" id="e1" /></div>
|
||||
<div><label for="u1">URL input:</label><input type="url" id="u1" /></div>
|
||||
<div><label for="pw">Password input:</label><input type="password" id="pw" value="password" /></div>
|
||||
<div><label for="f2">Radio input:</label><input type="radio" id="f2" /></div>
|
||||
<!-- thx peter beverloo: http://peter.sh/examples/?/html/meter-progress.html -->
|
||||
|
||||
<div><label for="f3">Checkbox input:</label><input type="checkbox" id="f3" /></div>
|
||||
<div><label for="f4">Select field:</label><select id="f4"><option>Option 01</option><option>Option 02</option></select></div>
|
||||
|
||||
<div><label for="f5">Textarea:</label><textarea id="f5" cols="30" rows="5" >Textarea text</textarea></div>
|
||||
<div><label for="f6">Input Button:</label> <input type="button" id="f6" value="button text" /></div>
|
||||
|
||||
<div><label for="f7">Submit Button:</label> <input type="submit" id="f7" value="button text" /></div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
<!-- thx peter beverloo: http://peter.sh/examples/?/html/meter-progress.html -->
|
||||
|
||||
|
||||
<p id="no-support" style="color: red; margin-bottom: 12px;">
|
||||
<p id="no-support" style="color: red; margin-bottom: 12px;">
|
||||
Your browser does not support these elements yet! Consider downloading a <a href="http://tools.peter.sh/download-latest-chromium.php">Chromium Nightly</a>.<br />
|
||||
|
||||
</p>
|
||||
</p>
|
||||
|
||||
<h3><progress></h3>
|
||||
<p>
|
||||
The progress element (spec: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-progress-element">4.10.16</a>) represents the completion progress of a task and can be both indeterminate as determinate.
|
||||
</p>
|
||||
<ul class="compact">
|
||||
<li>
|
||||
<label>Indeterminate</label>
|
||||
<progress max="100"></progress>
|
||||
</li>
|
||||
<li>
|
||||
<label>Progress: 0%</label>
|
||||
<progress max="10" value="0"></progress>
|
||||
</li>
|
||||
<li>
|
||||
<label>Progress: 100%</label>
|
||||
<progress max="3254" value="3254"></progress>
|
||||
</li>
|
||||
<li>
|
||||
<label>Progress: 57%</label>
|
||||
<progress max="0.7" value="0.4"></progress>
|
||||
</li>
|
||||
<li>
|
||||
<label>Javascript</label>
|
||||
<progress id="progress-javascript-example"></progress>
|
||||
</li>
|
||||
</ul>
|
||||
<h3><progress></h3>
|
||||
<p>
|
||||
The progress element (spec: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-progress-element">4.10.16</a>) represents the completion progress of a task and can be both indeterminate as determinate.
|
||||
</p>
|
||||
<ul class="compact">
|
||||
<li>
|
||||
<label>Indeterminate</label>
|
||||
<progress max="100"></progress>
|
||||
</li>
|
||||
<li>
|
||||
<label>Progress: 0%</label>
|
||||
<progress max="10" value="0"></progress>
|
||||
</li>
|
||||
<li>
|
||||
<label>Progress: 100%</label>
|
||||
<progress max="3254" value="3254"></progress>
|
||||
</li>
|
||||
<li>
|
||||
<label>Progress: 57%</label>
|
||||
<progress max="0.7" value="0.4"></progress>
|
||||
</li>
|
||||
<li>
|
||||
<label>Javascript</label>
|
||||
<progress id="progress-javascript-example"></progress>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3><meter></h3>
|
||||
<p>
|
||||
Displaying a scalar measurement within a known range, like hard drive usage, can be done using the meter element (spec: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-meter-element">4.10.17</a>)
|
||||
</p>
|
||||
<ul class="compact">
|
||||
<li>
|
||||
<label>Meter: empty</label>
|
||||
<meter value="0"></meter>
|
||||
</li>
|
||||
<li>
|
||||
<label>Meter: full</label>
|
||||
<meter value="1"></meter>
|
||||
</li>
|
||||
<li>
|
||||
<label>Meter: "a bit"</label>
|
||||
<meter min=".34" max=".41" value=".36"></meter>
|
||||
</li>
|
||||
<li>
|
||||
<label>Preferred usage</label>
|
||||
<meter min="50" max="250" low="100" high="200" value="120"></meter>
|
||||
</li>
|
||||
<li>
|
||||
<label>Too much traffic</label>
|
||||
<meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter>
|
||||
</li>
|
||||
<li>
|
||||
<label>Optimum value</label>
|
||||
<meter value=".5" optimum=".8"></meter>
|
||||
</li>
|
||||
<li>
|
||||
<label>Javascript</label>
|
||||
<meter id="meter-javascript-example" value="0"></meter>
|
||||
</li>
|
||||
</ul>
|
||||
<h3><meter></h3>
|
||||
<p>
|
||||
Displaying a scalar measurement within a known range, like hard drive usage, can be done using the meter element (spec: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-meter-element">4.10.17</a>)
|
||||
</p>
|
||||
<ul class="compact">
|
||||
<li>
|
||||
<label>Meter: empty</label>
|
||||
<meter value="0"></meter>
|
||||
</li>
|
||||
<li>
|
||||
<label>Meter: full</label>
|
||||
<meter value="1"></meter>
|
||||
</li>
|
||||
<li>
|
||||
<label>Meter: "a bit"</label>
|
||||
<meter min=".34" max=".41" value=".36"></meter>
|
||||
</li>
|
||||
<li>
|
||||
<label>Preferred usage</label>
|
||||
<meter min="50" max="250" low="100" high="200" value="120"></meter>
|
||||
</li>
|
||||
<li>
|
||||
<label>Too much traffic</label>
|
||||
<meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter>
|
||||
</li>
|
||||
<li>
|
||||
<label>Optimum value</label>
|
||||
<meter value=".5" optimum=".8"></meter>
|
||||
</li>
|
||||
<li>
|
||||
<label>Javascript</label>
|
||||
<meter id="meter-javascript-example" value="0"></meter>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
if (! ("position" in document.createElement ("progress"))) {
|
||||
var elements = document.querySelectorAll ("meter, progress");
|
||||
for (var i = 0, j = elements.length; i < j; i++) {
|
||||
elements [i].style.border = "1px solid red";
|
||||
elements [i].style.height = "12px";
|
||||
elements [i].style.display = "inline-block";
|
||||
elements [i].style.webkitAppearance = "none";
|
||||
}
|
||||
<script>
|
||||
(function () {
|
||||
if (! ("position" in document.createElement ("progress"))) {
|
||||
var elements = document.querySelectorAll ("meter, progress");
|
||||
for (var i = 0, j = elements.length; i < j; i++) {
|
||||
elements [i].style.border = "1px solid red";
|
||||
elements [i].style.height = "12px";
|
||||
elements [i].style.display = "inline-block";
|
||||
elements [i].style.webkitAppearance = "none";
|
||||
}
|
||||
return ;
|
||||
}
|
||||
|
||||
document.getElementById ("no-support").style.display = "none";
|
||||
|
||||
/** Setup the <progress> JavaScript example **/
|
||||
var progressExample = document.getElementById ("progress-javascript-example");
|
||||
progressExample.min = 50;
|
||||
progressExample.max = 122;
|
||||
|
||||
setInterval (function () {
|
||||
progressExample.value = progressExample.min + Math.random () * (progressExample.max - progressExample.min);
|
||||
}, 1000);
|
||||
|
||||
/** We'd like some fancy <meter> examples too **/
|
||||
var meterExample = document.getElementById ("meter-javascript-example");
|
||||
meterExample.min = 0;
|
||||
meterExample.max = 100;
|
||||
meterExample.value = 50;
|
||||
meterExample.low = 20;
|
||||
meterExample.high = 80;
|
||||
meterExample.optimum = 65;
|
||||
|
||||
return ;
|
||||
}
|
||||
|
||||
document.getElementById ("no-support").style.display = "none";
|
||||
|
||||
/** Setup the <progress> JavaScript example **/
|
||||
var progressExample = document.getElementById ("progress-javascript-example");
|
||||
progressExample.min = 50;
|
||||
progressExample.max = 122;
|
||||
|
||||
setInterval (function ()
|
||||
{
|
||||
progressExample.value = progressExample.min + Math.random () * (progressExample.max - progressExample.min);
|
||||
|
||||
}, 1000);
|
||||
|
||||
/** We'd like some fancy <meter> examples too **/
|
||||
var meterExample = document.getElementById ("meter-javascript-example");
|
||||
meterExample.min = 0;
|
||||
meterExample.max = 100;
|
||||
meterExample.value = 50;
|
||||
meterExample.low = 20;
|
||||
meterExample.high = 80;
|
||||
meterExample.optimum = 65;
|
||||
|
||||
setInterval (function ()
|
||||
{
|
||||
meterExample.value = meterExample.min + Math.random () * (meterExample.max - meterExample.min);
|
||||
meterExample.optimum = 65 + (5 - Math.random () * 10);
|
||||
|
||||
}, 1000);
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
setInterval (function () {
|
||||
meterExample.value = meterExample.min + Math.random () * (meterExample.max - meterExample.min);
|
||||
meterExample.optimum = 65 + (5 - Math.random () * 10);
|
||||
}, 1000);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
</div> <!--! end of #container -->
|
||||
<footer>
|
||||
</footer>
|
||||
</div> <!--! end of #container -->
|
||||
|
||||
|
||||
<!-- Javascript at the bottom for fast page loading -->
|
||||
<!-- Javascript at the bottom for fast page loading -->
|
||||
|
||||
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
|
||||
<script>window.jQuery || document.write("<script src='../js/libs/jquery-1.6.min.js'>\x3C/script>")</script>
|
||||
|
||||
<!-- scripts concatenated and minified via ant build script-->
|
||||
<script src="../js/plugins.js"></script>
|
||||
<script src="../js/script.js"></script>
|
||||
<!-- end scripts-->
|
||||
|
||||
|
||||
|
||||
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
|
||||
<script>window.jQuery || document.write("<script src='../js/libs/jquery-1.5.2.min.js'>\x3C/script>")</script>
|
||||
|
||||
|
||||
<!-- scripts concatenated and minified via ant build script-->
|
||||
<script src="../js/plugins.js"></script>
|
||||
<script src="../js/script.js"></script>
|
||||
<!-- end scripts-->
|
||||
|
||||
|
||||
<!--[if lt IE 7 ]>
|
||||
<script src="../js/libs/dd_belatedpng.js"></script>
|
||||
<script> DD_belatedPNG.fix("img, .png_bg"); //fix any <img> or .png_bg background-images </script>
|
||||
<![endif]-->
|
||||
|
||||
|
||||
<!-- mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID -->
|
||||
<script>
|
||||
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
|
||||
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
|
||||
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
|
||||
s.parentNode.insertBefore(g,s)}(document,"script"));
|
||||
</script>
|
||||
<!-- mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID -->
|
||||
<script>
|
||||
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"],["_trackPageLoadTime"]];
|
||||
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
|
||||
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
|
||||
s.parentNode.insertBefore(g,s)}(document,"script"));
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user