RubyGems - survivalkit - Versions diffs - 0.1 - Mend

survivalkit 0.1

Files changed (1368) hide show

data/templates/project/files/html/formalize_jquery_errors.html ADDED Viewed

@@ -0,0 +1,288 @@
+<!doctype html>
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]-->
+<!--[if IE 7 ]>    <html class="no-js ie7"> <![endif]-->
+<!--[if IE 8 ]>    <html class="no-js ie8"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->
+<head>
+  <meta charset="utf-8">
+  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
+       Remove this if you use the .htaccess -->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>Formalize</title>
+  <!--  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 -->
+  <link rel="shortcut icon" href="/favicon.ico">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+  <!-- CSS : implied media="all" -->
+  <link rel="stylesheet" href="css/style.css?v=2">
+  <!-- Uncomment if you are specifically targeting less enabled mobile browsers
+  <link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">  -->
+  <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
+  <script src="js/libs/modernizr-2.0.min.js"></script>
+  <!-- Also put Selectivizr at the top -->
+  <script type="text/javascript" src="js/libs/mootools-core-1.3.1-full-compat-yc.js"></script>
+  <!--[if (gte IE 6)&(lte IE 8)]>
+    <script type="text/javascript" src="js/libs/selectivizr.js"></script>
+    <noscript><link rel="stylesheet" href="css/selectivizr.css" /></noscript>
+  <![endif]-->
+</head>
+<body>
+  <div id="page">
+    <header>
+    </header>
+    <div id="main" role="main">
+	<h1>
+		Example of all form elements
+	</h1>
+	<form action="" enctype="multipart/form-data" onsubmit="return false;">
+		<p>
+			<input type="checkbox" id="test_checkbox_1" name="test_checkbox_1" />
+			<label class="error" for="test_checkbox_1">
+				Test checkbox 1
+			</label>
+			&nbsp;
+			&nbsp;
+			<input type="checkbox" id="test_checkbox_2" name="test_checkbox_2" />
+			<label class="error" for="test_checkbox_2">
+				Test checkbox 2
+			</label>
+			&nbsp;
+			&nbsp;
+			<input type="checkbox" id="test_checkbox_3" name="test_checkbox_3" />
+			<label class="error" for="test_checkbox_3">
+				Test checkbox 3
+			</label>
+		</p>
+		<p>
+			<input type="radio" id="test_radio_1" name="test_radio_group" />
+			<label class="error" for="test_radio_1">
+				Test radio 1
+			</label>
+			&nbsp;
+			&nbsp;
+			<input type="radio" id="test_radio_2" name="test_radio_group" />
+			<label class="error" for="test_radio_2">
+				Test radio 2
+			</label>
+			&nbsp;
+			&nbsp;
+			<input type="radio" id="test_radio_3" name="test_radio_group" />
+			<label class="error" for="test_radio_3">
+				Test radio 3
+			</label>
+		</p>
+		<p>
+			<label class="error" for="select_dd">
+				Select drop-down
+			</label>
+			<br />
+			<select class="error" id="select_dd" name="select_dd">
+				<optgroup label="Group 1">
+					<option value="1">Some text goes here</option>
+					<option value="2">Another choice could be here</option>
+					<option value="3">Yet another item to be chosen</option>
+				</optgroup>
+				<optgroup label="Group 2">
+					<option value="4">Some text goes here</option>
+					<option value="5">Another choice could be here</option>
+					<option value="6">Yet another item to be chosen</option>
+				</optgroup>
+				<optgroup label="Group 3">
+					<option value="7">Some text goes here</option>
+					<option value="8">Another choice could be here</option>
+					<option value="9">Yet another item to be chosen</option>
+				</optgroup>
+			</select>
+			<input class="error" type="text" id="text_inline" name="text_inline" />
+			<input type="button" value="Hello" />
+		</p>
+		<p>
+			<label class="error" for="select_multi">
+				Select multiple
+			</label>
+			<br />
+			<select class="error" id="select_multi" name="select_multi" multiple="multiple" size="10">
+				<optgroup label="Group 1">
+					<option value="1">Some text goes here</option>
+					<option value="2">Another choice could be here</option>
+					<option value="3">Yet another item to be chosen</option>
+				</optgroup>
+				<optgroup label="Group 2">
+					<option value="4">Some text goes here</option>
+					<option value="5">Another choice could be here</option>
+					<option value="6">Yet another item to be chosen</option>
+				</optgroup>
+				<optgroup label="Group 3">
+					<option value="7">Some text goes here</option>
+					<option value="8">Another choice could be here</option>
+					<option value="9">Yet another item to be chosen</option>
+				</optgroup>
+			</select>
+		</p>
+		<p>
+			<label class="error" for="textarea">
+				Textarea
+			</label>
+			<br />
+			<textarea class="error" id="textarea" name="textarea" rows="5" placeholder="This is an example of HTML5 placeholder text."></textarea>
+		</p>
+		<table class="horiz">
+			<tr>
+				<td>
+					<label class="error" for="url">
+						URL + Autofocus
+					</label>
+					<br />
+					<input class="error" type="url" id="url" name="url" value="http://" autofocus="autofocus" />
+				</td>
+				<td>
+					<label class="error" for="email">
+						Email
+					</label>
+					<br />
+					<input class="error" type="email" id="email" name="email" placeholder="name@example.com" />
+				</td>
+				<td>
+					<label class="error" for="text">
+						Text
+					</label>
+					<br />
+					<input class="error" type="text" id="text" name="text" />
+				</td>
+			</tr>
+			<tr>
+				<td>
+					<label class="error" for="datetime-local">
+						Datetime local
+					</label>
+					<br />
+					<input class="error" type="datetime-local" id="datetime-local" name="datetime-local" />
+				</td>
+				<td>
+					<label class="error" for="number">
+						Number
+					</label>
+					<br />
+					<input class="error" type="number" id="number" name="number" />
+				</td>
+				<td>
+					<label class="error" for="tel">
+						Tel (phone)
+					</label>
+					<br />
+					<input class="error" type="tel" id="tel" name="tel" />
+				</td>
+			</tr>
+			<tr>
+				<td>
+					<label class="error" for="datetime">
+						Datetime
+					</label>
+					<br />
+					<input class="error" type="datetime" id="datetime" name="datetime" />
+				</td>
+				<td>
+					<label class="error" for="date">
+						Date
+					</label>
+					<br />
+					<input class="error" type="date" id="date" name="date" />
+				</td>
+				<td>
+					<label class="error" for="month">
+						Month
+					</label>
+					<br />
+					<input class="error" type="month" id="month" name="month" />
+				</td>
+			</tr>
+			<tr>
+				<td>
+					<label class="error" for="search">
+						Search
+					</label>
+					<br />
+					<input class="error" type="search" id="search" name="search" />
+				</td>
+				<td>
+					<label class="error" for="range">
+						Range
+					</label>
+					<br />
+					<input class="error" type="range" id="range" name="range" />
+				</td>
+				<td>
+					<label class="error" for="file">
+						File upload
+					</label>
+					<br />
+					<input class="error" type="file" id="file" name="file" />
+				</td>
+			</tr>
+		</table>
+		<p>
+			<input type="submit" value="Input - Submit" />
+			&nbsp;
+			<input type="button" value="Input - Button" />
+			&nbsp;
+			<input type="reset" value="Input - Reset" />
+			&nbsp;
+			<button>Button tag</button>
+		</p>
+	</form>
+</div>
+<footer>
+</footer>
+</div> <!--! end of #container -->
+  <!-- JavaScript at the bottom for fast page loading -->
+  <!-- Grab Google CDN's jQuery. 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(unescape('%3Cscript src="js/libs/jquery-1.5.2.min.js"%3E%3C/script%3E'))</script>
+  <!-- Formalize (http://formalize.me) -->
+  <script src="js/libs/formalize/jquery.formalize.js"></script>
+  <!-- Also put Lettering.js at the top -->
+  <script src="js/libs/jquery.lettering.js"></script>
+  <!-- scripts concatenated and minified via ant build script-->
+  <script src="js/script.js"></script>
+  <!-- end concatenated and minified 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 bg-images. Also, please read goo.gl/mZiyb </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>
+</body>
+</html>

data/templates/project/files/html/index.html ADDED Viewed

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<!--[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 gt IE 8]><!-->
+<html class='no-js' lang='en'>
+  <!--<![endif]-->
+  <head>
+    <meta charset='utf-8' />
+    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
+    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
+    <title>The Coding Designer's Survival Kit</title>
+    <meta content='' name='description' />
+    <meta content='' name='author' />
+    <meta content='woodcock, washburn, intellectual property law, ip, law' name='Keywords' />
+    <!-- Mobile viewport optimized: j.mp/bplateviewport -->
+    <meta content='width=device-width, initial-scale=1.0' name='viewport' />
+    <link href='/favicon.ico' rel='shortcut icon' type='image/x-icon' />
+    <!-- CSS -->
+    <link href='/css/style.css?v=1' rel='stylesheet' />
+    <!-- All JavaScript at the bottom, except for Modernizr and Respond. -->
+    <script src='/js/libs/modernizr-2.0.min.js'></script>
+    <script src='/js/libs/respond.min.js'></script>
+    <!-- Typekit -->
+    <script src='http://use.typekit.com/xxxxxxx.js' type='text/javascript'></script>
+    <script type='text/javascript'>
+      //<![CDATA[
+        try{Typekit.load();}catch(e){}
+      //]]>
+    </script>
+  </head>
+  <body>
+    <div id='page'>
+      <header></header>
+      <div id='main' role='main'>
+        <p>Put your content here. See <a href='/survivalkit'>survivalkit</a> for example markup to style and design with.</p>
+      </div>
+      <footer></footer>
+    </div>
+    <!--
+      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 type='text/javascript'>
+      //<![CDATA[
+        window.jQuery || document.write("<script src='js/libs/jquery-1.6.min.js'>\x3C/script>")
+      //]]>
+    </script>
+    <script src='/js/libs/plugins.js?v=1'></script>
+    <script src='/js/script.js?v=1'></script>
+    <!-- asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet -->
+    <!-- change the UA-XXXXX-X to be your site's ID -->
+    <script type='text/javascript'>
+      //<![CDATA[
+        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>

data/templates/project/files/html/survivalkit/elements-common.html ADDED Viewed

@@ -0,0 +1,549 @@
+<!DOCTYPE html>
+<!--[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 gt IE 8]><!-->
+<html class='no-js' lang='en'>
+  <!--<![endif]-->
+  <head>
+    <meta charset='utf-8' />
+    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
+    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
+    <title>Common Markup</title>
+    <meta content='' name='description' />
+    <meta content='' name='author' />
+    <meta content='woodcock, washburn, intellectual property law, ip, law' name='Keywords' />
+    <!-- Mobile viewport optimized: j.mp/bplateviewport -->
+    <meta content='width=device-width, initial-scale=1.0' name='viewport' />
+    <link href='/favicon.ico' rel='shortcut icon' type='image/x-icon' />
+    <!-- CSS -->
+    <link href='/css/style.css?v=1' rel='stylesheet' />
+    <!-- All JavaScript at the bottom, except for Modernizr and Respond. -->
+    <script src='/js/libs/modernizr-2.0.min.js'></script>
+    <script src='/js/libs/respond.min.js'></script>
+    <!-- Typekit -->
+    <script src='http://use.typekit.com/xxxxxxx.js' type='text/javascript'></script>
+    <script type='text/javascript'>
+      //<![CDATA[
+        try{Typekit.load();}catch(e){}
+      //]]>
+    </script>
+  </head>
+  <body class='survival-kit'>
+    <div id='page'>
+      <header>
+        <hgroup>
+          <h1>
+            <a href='/survivalkit/'>The Coding Designer's Survival Guide</a>
+          </h1>
+          <h2>Common Markup</h2>
+        </hgroup>
+      </header>
+      <nav>
+        <ul>
+          <li>
+            <a href='/survivalkit/elements-common'>Common Markup</a>
+          </li>
+          <li>
+            <a href='/survivalkit/elements-html5'>Common HTML5</a>
+          </li>
+          <li>
+            <a href='/survivalkit/elements-typography'>Typography</a>
+          </li>
+          <li>
+            <a href='/survivalkit/elements-ui-patterns-drupal'>Drupal UI Patterns</a>
+          </li>
+          <li>
+            <a href='/survivalkit/elements-ui-patterns'>UI Patterns</a>
+          </li>
+          <li>
+            <a href='/survivalkit/styletile'>Style Tile</a>
+          </li>
+        </ul>
+      </nav>
+      <div id='main' role='main'>
+        <!-- Common HTML Elements -->
+        <section class='element-group' id='common'>
+          <h1 class='section-title'>Common Elements</h1>
+          <article class='element' id='headers'>
+            <h2 class='element-title'>Headers</h2>
+            <div class='markup'>
+              <h1>Header 1</h1>
+              <h2>Header 2</h2>
+              <h3>Header 3</h3>
+              <h4>Header 4</h4>
+              <h5>Header 5</h5>
+              <h6>Header 6</h6>
+            </div>
+            <p>Headers with a following paragraph</p>
+            <div class='markup'>
+              <h1>Header 1</h1>
+              <p>How vain and foolish, then, thought I, for timid untravelled man to try to comprehend aright this wondrous whale, by merely poring over his dead attenuated skeleton, stretched in this peaceful wood. No. Only in the heart of quickest perils; only when within the eddyings of his angry flukes; only on the profound unbounded sea, can the fully invested whale be truly and livingly found out.</p>
+              <h2>Header 2</h2>
+              <p>Within Pellucidar one time is as good as another.  There were no nights to mask our attempted escape.  All must be done in broad day-light—all but the work I had to do in the apartment beneath the building.  So we determined to put our plan to an immediate test lest the Mahars who made it possible should awake before I reached them; but we were doomed to disappointment, for no sooner had we reached the main floor of the building on our way to the pits beneath, than we encountered hurrying bands of slaves being hastened under strong Sagoth guard out of the edifice to the avenue beyond.</p>
+              <h3>Header 3</h3>
+              <p>Within Pellucidar one time is as good as another.  There were no nights to mask our attempted escape.  All must be done in broad day-light—all but the work I had to do in the apartment beneath the building.  So we determined to put our plan to an immediate test lest the Mahars who made it possible should awake before I reached them; but we were doomed to disappointment, for no sooner had we reached the main floor of the building on our way to the pits beneath, than we encountered hurrying bands of slaves being hastened under strong Sagoth guard out of the edifice to the avenue beyond.</p>
+              <h4>Header 4</h4>
+              <p>People were watching for Martians here from the church towers.  My brother, very luckily for him as it chanced, preferred to push on at once to the coast rather than wait for food, although all three of them were very hungry.  By midday they passed through Tillingham, which, strangely enough, seemed to be quite silent and deserted, save for a few furtive plunderers hunting for food.  Near Tillingham they suddenly came in sight of the sea, and the most amazing crowd of shipping of all sorts that it is possible to imagine.</p>
+              <h5>Header 5</h5>
+              <p>"The unforeseen does not exist," quietly replied Phileas Fogg.</p>
+              <h6>Header 6</h6>
+              <p>Another man now joined the group, and, after making his formal greetings to his ruler, said:</p>
+            </div>
+          </article>
+          <article class='element' id='characters'>
+            <h2 class='element-title'>Characters</h2>
+            <div class='markup'>
+              <p>0 1 2 3 4 5 6 7 8 9</p>
+              <p>+ - – —  _  = ? ! ~ ( ) [ ] { } * ^ | "" \'\' `´ / \ & @ £ $ § ½ % ¨ ; : . ,</p>
+              <p>a b c d e f g h i j k l m n o p q r s t u v w x y z ö ä å</p>
+              <p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Ö Ä Å</p>
+              <h3>UTF-8 test</h3>
+              <p>Ä, ä, Ö, ö, Ü, ü, ß</p>
+              <p>Š Ť Ž Ľ Č Ě Ď Ň Ř Ů Ĺ</p>
+              <p>ХЦЧШЩЬЫЪЭЮЯ</p>
+            </div>
+          </article>
+          <article class='element' id='paragraphs'>
+            <h2 class='element-title'>Paragraphs</h2>
+            <div class='markup'>
+              <p>
+                I leave a
+                <em>white and turbid</em>
+                wake; pale waters, paler cheeks, where'er I sail. The envious billows sidelong swell to whelm my track; let them; but first I pass.
+              </p>
+              <p>
+                Yonder, by ever-brimming goblet's rim,
+                <strong>the warm waves</strong>
+                blush like wine. The gold brow plumbs the blue. The diver sun—slow dived from noon—goes down; my soul mounts up! she wearies with her endless hill. Is, then, the crown too heavy that I wear? this Iron Crown of Lombardy. Yet is it bright with many a gem; I the wearer, see not its far flashings; but darkly feel that I wear that, that
+                <a href=''>dazzlingly confounds</a>.
+                'Tis iron—that I know—not gold. 'Tis split, too—that I feel; the jagged edge galls me so, my brain seems to beat against the solid metal; aye, steel skull, mine; the sort that needs no helmet in the most brain-battering fight!
+              </p>
+              <p>Dry heat upon my brow? Oh! time was, when as the sunrise nobly spurred me, so the sunset soothed. No more. This lovely light, it lights not me; all loveliness is anguish to me, since I can ne'er enjoy. Gifted with the high perception, I lack the low, enjoying power; damned, most subtly and most malignantly! damned in the midst of Paradise! Good night—good night! (WAVING HIS HAND, HE MOVES FROM THE WINDOW.)</p>
+            </div>
+          </article>
+          <article class='element' id='links'>
+            <h2 class='element-title'>Links</h2>
+            <div class='markup'>
+              <a href='#'>Local link</a>
+              <br>
+                <a class='external' href='http://www.google.com'>External link</a>
+                <br>
+                  <a href='https://www.google.com'>External link with encrypted connection</a>
+                  <br>
+                    <a href='mailto:test@kiwi-themes.com'>E-mail link</a>
+                  </br>
+                </br>
+              </br>
+            </div>
+          </article>
+          <article class='element' id='lists'>
+            <h2 class='element-title'>Lists</h2>
+            <div class='markup'>
+              <h3>Unordered List</h3>
+              <ul>
+                <li>Apple</li>
+                <li>Pear</li>
+                <li>Banana</li>
+                <li>Orange</li>
+                <li>Carrot</li>
+              </ul>
+            </div>
+            <div class='markup'>
+              <h3>Ordered List</h3>
+              <ol>
+                <li>First</li>
+                <li>Second</li>
+                <li>Third</li>
+                <li>Fourth</li>
+              </ol>
+            </div>
+            <div class='markup'>
+              <h3>Definition List</h3>
+              <dl>
+                <dt>Definition List Title</dt>
+                <dd>This is a definition list division.</dd>
+                <dt>Inkscape</dt>
+                <dd>Open Source vector graphics editor</dd>
+                <dt>SVG</dt>
+                <dd>Scalable Vector Graphics</dd>
+                <dd>W3C standard</dd>
+                <dt>GIMP</dt>
+                <dd>GNU Image Manipulation Program</dd>
+                <dt>Drupal</dt>
+                <dd>Content Management System</dd>
+              </dl>
+            </div>
+            <div class='markup'>
+              <h3>Nested lists</h3>
+              <ol>
+                <li>
+                  one, two
+                  <ol>
+                    <li>buckle my shoe</li>
+                  </ol>
+                </li>
+                <li>
+                  three, four
+                  <ol>
+                    <li>knock at the door</li>
+                  </ol>
+                </li>
+                <li>
+                  Five, six
+                  <ol>
+                    <li>pick up sticks</li>
+                  </ol>
+                </li>
+                <li>
+                  Seven, eight, lay them straight
+                  <ol>
+                    <li>Nine, ten, a big fat hen</li>
+                    <li>Eleven, twelve, dig and delve</li>
+                    <li>Thirteen, fourteen, maids a’courting</li>
+                    <li>Fifteen, sixteen, maids in the kitchen</li>
+                    <li>Seventeen, eighteen, maids a’waiting</li>
+                    <li>Nineteen, twenty, my platter’s empty …</li>
+                  </ol>
+                </li>
+              </ol>
+            </div>
+          </article>
+          <article class='element' id='pre'>
+            <h2 class='element-title'>
+              <a href='http://developers.whatwg.org/grouping-content.html#the-pre-element'>pre</a>
+            </h2>
+            <div class='markup'>
+              <p>
+                This is the
+                <code>Panel</code>
+                constructor:
+              </p>
+              <pre><code>function Panel(element, canClose, closeHandler) {&#x000A;              this.element = element;&#x000A;              this.canClose = canClose;&#x000A;              this.closeHandler = function () { if (closeHandler) closeHandler() };&#x000A;            }            .markup</code></pre>
+              <pre>                                           ,,                      ,,                     ,,            &#x000A;  .M"""bgd                                 db                    `7MM      `7MMF' `YMM'   db   mm       &#x000A; ,MI    "Y                                                         MM        MM   .M'          MM       &#x000A; `MMb.   `7MM  `7MM  `7Mb,od8 `7M'   `MF'`7MM `7M'   `MF',6"Yb.    MM        MM .d"     `7MM mmMMmm     &#x000A;   `YMMNq. MM    MM    MM' "'   VA   ,V    MM   VA   ,V 8)   MM    MM        MMMMM.       MM   MM       &#x000A; .     `MM MM    MM    MM        VA ,V     MM    VA ,V   ,pm9MM    MM        MM  VMA      MM   MM       &#x000A; Mb     dM MM    MM    MM         VVV      MM     VVV   8M   MM    MM        MM   `MM.    MM   MM       &#x000A; P"Ybmmd"  `Mbod"YML..JMML.        W     .JMML.    W    `Moo9^Yo..JMML.    .JMML.   MMb..JMML. `Mbmo</pre>
+            </div>
+          </article>
+        </section>
+        <!-- Phrase-level HTML Elements -->
+        <section class='element-group' id='phrase-elements'>
+          <h1 class='section-title'>Phrase Elements</h1>
+          <article class='element' id='em'>
+            <h2 class='element-title'>em</h2>
+            <div class='markup'>
+              <p>
+                Element used to
+                <em>put emphasis on certain information</em>
+                Most browsers display emphases text in italics by default.
+                <br>
+                  Sample:
+                  <em>This is emphasized text</em>
+                </br>
+              </p>
+            </div>
+          </article>
+          <article class='element' id='strong'>
+            <h2 class='element-title'>strong</h2>
+            <div class='markup'>
+              <p>
+                This element stands for "stronger emphasis" and is used for marking more important text.
+                <br>
+                  Sample:
+                  <strong>This is text with stronger emphasis</strong>
+                </br>
+              </p>
+            </div>
+          </article>
+          <article class='element' id='cite'>
+            <h2 class='element-title'>cite</h2>
+            <div class='markup'>
+              <p>
+                According to
+                <cite>W3C specification,</cite>
+                we use
+                <code>cite</code>
+                element to define source of a quotation or reference.
+                <br>
+                  Sample:
+                  <cite>This is quotation source</cite>
+                </br>
+              </p>
+            </div>
+          </article>
+          <article class='element' id='dfn'>
+            <h2 class='element-title'>dfn</h2>
+            <div class='markup'>
+              <p>
+                Element used to markup inline definition of a single term.
+                <br>
+                  Sample:
+                  <dfn>This is definition</dfn>
+                </br>
+              </p>
+            </div>
+          </article>
+          <article class='element' id='code'>
+            <h2 class='element-title'>code</h2>
+            <div class='markup'>
+              <p>
+                This element informs the browser that it contains a computer code, such as XHTML markup.
+                <br>
+                  Sample:
+                  <code>document.write("Hello world");</code>
+                </br>
+              </p>
+            </div>
+          </article>
+          <article class='element' id='samp'>
+            <h2 class='element-title'>samp</h2>
+            <div class='markup'>
+              <p>
+                Defines computer output data, for example we can use it to markup error messages.
+                <br>
+                  Sample:
+                  <samp>Error: no such file or directory</samp>
+                </br>
+              </p>
+            </div>
+          </article>
+          <article class='element' id='kbd'>
+            <h2 class='element-title'>kbd</h2>
+            <div class='markup'>
+              <p>
+                Means information that should be entered by the user.
+                <br>
+                  Sample: press
+                  <kbd>Alt + F4</kbd>
+                  to close this window.
+                  <kbd>ESC</kbd>
+                </br>
+              </p>
+            </div>
+          </article>
+          <article class='element' id='var'>
+            <h2 class='element-title'>var</h2>
+            <div class='markup'>
+              <p>
+                Means variables used in computer programs or scripts.
+                <br>
+                  Sample:
+                  <var>counter</var>
+                </br>
+              </p>
+            </div>
+          </article>
+          <article class='element' id='abbr'>
+            <h2 class='element-title'>abbr</h2>
+            <div class='markup'>
+              <p>
+                Abbreviation / a shortened form of a word or phrase.
+                <br>
+                  Sample:
+                  <abbr title='doctor'>dr</abbr>
+                </br>
+              </p>
+            </div>
+          </article>
+          <article class='element' id='acronym'>
+            <h2 class='element-title'>acronym</h2>
+            <div class='markup'>
+              <p>
+                Acronym / a word formed from the initial letters of other words.
+                <br>
+                  Sample acronyms:
+                  <acronym title='eXtensible HyperText Markup Language'>XHTML</acronym>
+                </br>
+              </p>
+            </div>
+          </article>
+          <article class='element' id='q'>
+            <h2 class='element-title'>q</h2>
+            <div class='markup'>
+              <p>
+                Inline quotation.
+                <br>
+                  Sample:
+                  <q>This is sample quotation</q>
+                </br>
+              </p>
+            </div>
+          </article>
+          <article class='element' id='others'>
+            <h2 class='element-title'>Other Elements</h2>
+            <div class='markup'>
+              <h3>Subscript and superscript samples</h3>
+              <p>
+                H<sub>2</sub>O,
+                <br>
+                  E = mc<sup>2</sup>,
+                  <br>
+                    The 14
+                    <sup>th</sup>
+                    of September
+                  </br>
+                </br>
+              </p>
+              <h3>Insertion and deletion samples</h3>
+              <p>
+                <ins datetime='2009-07-12T08:15:30+02:00' title='Added new information according to suggestions'>This information was just added.</ins>
+                <br>
+                  <del>Whilte this information is no longer valid.</del>
+                </br>
+              </p>
+              <h3>Presentational elements</h3>
+              <p>
+                <b>Bold text</b>
+                <br>
+                  <i>Italic text</i>
+                  <br>
+                    <tt>Typewriter text</tt>
+                    <br>
+                      <big>Big</big>
+                      <br>
+                        <small>Small</small>
+                        <br>
+                          Horizontal rule:
+                        </br>
+                        <hr />
+                      </br>
+                    </br>
+                  </br>
+                </br>
+              </p>
+            </div>
+          </article>
+        </section>
+        <!-- Simple markup Patterns -->
+        <section class='element-group' id='simple-patterns'>
+          <h1 class='section-title'>Common Patterns</h1>
+          <article class='element' id='inline-images'>
+            <h2 class='element-title'>Inline Images</h2>
+            <div class='markup'>
+              <p><img alt='image floated left' class='left' src='http://dummyimage.com/240x320/000/fff&amp;text=Left+Image' />Who would think, then, that such fine ladies and gentlemen should regale themselves with an essence found in the inglorious bowels of a sick whale! Yet so it is. By some, ambergris is supposed to be the cause, and by others the effect, of the dyspepsia in the whale. How to cure such a dyspepsia it were hard to say, unless by administering three or four boat loads of Brandreth's pills, and then running out of harm's way, as laborers do in blasting rocks.
+              </p>
+              <p><img alt='image floated right' class='right' src='http://dummyimage.com/240x320/000/fff&amp;text=Right+Image' />I have forgotten to say that there were found in this ambergris, certain hard, round, bony plates, which at first Stubb thought might be sailors' trowsers buttons; but it afterwards turned out that they were nothing more than pieces of small squid bones embalmed in that manner.
+              </p>
+            </div>
+          </article>
+          <article class='element' id='tables'>
+            <h2 class='element-title'>Tables</h2>
+            <div class='markup'>
+              <table>
+                <caption>
+                  Table title goes here
+                </caption>
+                <thead>
+                  <tr>
+                    <th>Mauris</th>
+                    <th>Tempor</th>
+                    <th>Praesent lacus nulla</th>
+                    <th>Quis</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr class='odd'>
+                    <td>Mauris</td>
+                    <td>23.000</td>
+                    <td>Suspendisse viverra</td>
+                    <td>Yes</td>
+                  </tr>
+                  <tr class='even'>
+                    <td>Trupis</td>
+                    <td>1.000</td>
+                    <td>Placerat tortor aesent semper</td>
+                    <td>No</td>
+                  </tr>
+                  <tr class='odd'>
+                    <td>Sagittis</td>
+                    <td>122.000</td>
+                    <td>Neque vel condimentum</td>
+                    <td>No</td>
+                  </tr>
+                  <tr class='even'>
+                    <td>Libero</td>
+                    <td>500</td>
+                    <td>Hendrerit, lectus elit pretium</td>
+                    <td>Yes</td>
+                  </tr>
+                  <tr class='odd'>
+                    <td>Tristique</td>
+                    <td>100.000</td>
+                    <td>Ligula nec consequat</td>
+                    <td>Yes</td>
+                  </tr>
+                  <tr class='even'>
+                    <td>Id Neque</td>
+                    <td>600.000</td>
+                    <td>Etiam sodales orci nec</td>
+                    <td>No</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </article>
+          <article class='element' id='forms'>
+            <h2 class='element-title'>Forms</h2>
+            <div class='markup'>
+              <form accept-charset='UTF-8' action='/action' id='form' method='post'>
+                <fieldset>
+                  <legend>Fieldset with legend</legend>
+                  <div>
+                    <label>Label for Radios</label>
+                    <input name='radio' type='radio' value='' />
+                    <input name='Radio' type='radio' value='' />
+                    <input name='Radio' type='radio' value='' />
+                  </div>
+                  <div>
+                    <label>Label for Checkboxes</label>
+                    <input name='checkboxes' type='checkbox' value='' />
+                    <input name='checkboxes' type='checkbox' value='' />
+                    <input name='checkboxes' type='checkbox' value='' />
+                  </div>
+                  <div>
+                    <label>Label for Textfield</label>
+                    <input id='textfield' maxlength='12' size='50' type='text' value='input' />
+                  </div>
+                  <div>
+                    <label>label for Textarea</label>
+                    <textarea cols='50' id='text' rows='5'></textarea>
+                  </div>
+                  <div>
+                    <label>label for Filefield</label>
+                    <input name='files' size='50' type='file' />
+                  </div>
+                  <div>
+                    <input name='button' type='button' value='Button' />
+                  </div>
+                </fieldset>
+              </form>
+            </div>
+          </article>
+        </section>
+      </div>
+      <footer></footer>
+    </div>
+    <!--
+      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 type='text/javascript'>
+      //<![CDATA[
+        window.jQuery || document.write("<script src='js/libs/jquery-1.6.min.js'>\x3C/script>")
+      //]]>
+    </script>
+    <script src='/js/libs/plugins.js?v=1'></script>
+    <script src='/js/script.js?v=1'></script>
+    <script src='/js/kit/kit-source.jquery.js?v=1'></script>
+    <!-- asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet -->
+    <!-- change the UA-XXXXX-X to be your site's ID -->
+    <script type='text/javascript'>
+      //<![CDATA[
+        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>