Update 1.3.0

* Remove headings in hgroup
* Add small text and link in heading examples
* Add address element
* Add time element
* Add q element
* Add international phone input example
* Add placeholder example
* Add required field input
* Add mulitiple select menu
* Merge HTML5 Form Fields section into Form Fields section

CHANGELOG.md

@@ -1,16 +1,30 @@
-0.0.2 / 2013-04-02
+1.3.0 / 2013-05-24
+==================
+
+ * Remove headings in hgroup
+ * Add small text and link in heading examples
+ * Add address element
+ * Add time element
+ * Add q element
+ * Add international phone input example
+ * Add placeholder example
+ * Add required field input
+ * Add mulitiple select menu
+ * Merge HTML5 Form Fields section into Form Fields section
+
+1.2.0 / 2013-04-02
 ==================
 
  * Add media query for small viewports
 
-0.0.1 / 2013-03-22
+1.1.0 / 2013-03-22
 ==================
 
   * Remove dependancy on jQuery
   * Locally host highlight.js files
   * Use placedog.com instead of lorempixel.com
 
-0.0.0 / 2013-03-06
+1.0.0 / 2013-03-06
 ==================
 
   * Initial commit

markup/base/address.html

@@ -0,0 +1,6 @@
+<address>
+  <strong>Company Name, Inc.</strong><br>
+  811 7th Ave, Suite 700<br>
+  Manhattan, NY 10019<br>
+  <abbr title="Phone">P:</abbr> (487) 487-4874
+</address>

markup/base/form-fields.html

@@ -1,18 +1,30 @@
 <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>Select field <select><option>Option 01</option><option>Option 02</option></select></label></p>
-    <p><label>Radio input <input type="radio" name="rad"></label></p>
-    <p><label>Checkbox input <input type="checkbox"></label></p>
+    <p><label>Text input</label> <input type="text"></p>
+    <p><label>Placeholder example</label> <input type="text" placeholder="I'm placeholder text"></p>
+    <p><label>Required input <span class="required">*</span></label> <input type="text" required></p>
+    <p><label>Email input</label> <input type="email"></p>
+    <p><label>Search input</label> <input type="search"></p>
+    <p><label>Tel input</label> <input type="tel"></p>
+    <p><label>Phone (International)</label> <input name="field_country_code" maxlength="3" /> - <input name="field_city_code" maxlength="4" /> - <input name="field_phone_int" maxlength="8" /></p>
+    <p><label>URL input</label> <input type="url" placeholder="http://"></p>
+    <p><label>Password input</label> <input type="password" value="password"></p>
+    <p><label>Select field</label> <select><option>Option 01</option><option>Option 02</option></select></p>
+    <p><label>Multiple select field</label><select multiple size="5"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option><option>Option 6</option><option>Option 7</option><option>Option 8</option><option>Option 9</option><option>Option 10</option></select></p>
+    <p><label>Radio input</label> <input type="radio" name="rad"></p>
+    <p><label>Checkbox input</label> <input type="checkbox"></p>
     <p><label><input type="radio" name="rad"> Radio input</label></p>
     <p><label><input type="checkbox"> Checkbox input</label></p>
-    <p><label>File input <input type="file"></label></p>
-    <p><label>Textarea <textarea cols="30" rows="5" >Textarea text</textarea></label></p>
+    <p><label>File input</label> <input type="file"></p>
+    <p><label>Textarea</label> <textarea cols="30" rows="5" >Textarea text</textarea></p>
+    <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>
 	</fieldset>
 </form>

markup/base/headings-1.html

@@ -1,6 +1,6 @@
-<h1>Heading 1</h1>
-<h2>Heading 2</h2>
-<h3>Heading 3</h3>
-<h4>Heading 4</h4>
-<h5>Heading 5</h5>
-<h6>Heading 6</h6>
+<h1>Heading 1 with <small>small text</small> and a <a href="#">link</a> as well</h1>
+<h2>Heading 2 with <small>small text</small> and a <a href="#">link</a> as well</h2>
+<h3>Heading 3 with <small>small text</small> and a <a href="#">link</a> as well</h3>
+<h4>Heading 4 with <small>small text</small> and a <a href="#">link</a> as well</h4>
+<h5>Heading 5 with <small>small text</small> and a <a href="#">link</a> as well</h5>
+<h6>Heading 6 with <small>small text</small> and a <a href="#">link</a> as well</h6>

markup/base/headings-2.html

@@ -1,8 +1,8 @@
 <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>
+  <h1>Heading 1 (in article) with <small>small text</small> and a <a href="#">link</a> as well</h1>
+  <h2>Heading 2 (in article) with <small>small text</small> and a <a href="#">link</a> as well</h2>
+  <h3>Heading 3 (in article) with <small>small text</small> and a <a href="#">link</a> as well</h3>
+  <h4>Heading 4 (in article) with <small>small text</small> and a <a href="#">link</a> as well</h4>
+  <h5>Heading 5 (in article) with <small>small text</small> and a <a href="#">link</a> as well</h5>
+  <h6>Heading 6 (in article) with <small>small text</small> and a <a href="#">link</a> as well</h6>
 </article>

markup/base/headings-3.html

@@ -1,8 +1,8 @@
 <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>
+  <h1>Heading 1 (in section) with <small>small text</small> and a <a href="#">link</a> as well</h1>
+  <h2>Heading 2 (in section) with <small>small text</small> and a <a href="#">link</a> as well</h2>
+  <h3>Heading 3 (in section) with <small>small text</small> and a <a href="#">link</a> as well</h3>
+  <h4>Heading 4 (in section) with <small>small text</small> and a <a href="#">link</a> as well</h4>
+  <h5>Heading 5 (in section) with <small>small text</small> and a <a href="#">link</a> as well</h5>
+  <h6>Heading 6 (in section) with <small>small text</small> and a <a href="#">link</a> as well</h6>
 </section>

markup/base/text-elements.html

@@ -9,6 +9,7 @@
 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> 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>

markup/base/time.html

@@ -0,0 +1 @@
+Remember, remember the <time datetime="1605-11-05">5<sup>th</sup> of November</time>