templates/project/files/html/survivalkit/elements-html5.html in survivalkit-0.2.0 vs templates/project/files/html/survivalkit/elements-html5.html in survivalkit-0.2.1

- old
+ new

@@ -5,44 +5,66 @@ <!--[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>HTML5 Elements</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' /> + <meta content='True' name='HandheldFriendly' /> + <meta content='320' name='MobileOptimized' /> + <meta content='width=device-width, target-densitydpi=160, initial-scale=1.0' name='viewport' /> + <!-- For iPhone 4 with high-resolution Retina display: --> + <link href='/apple-touch-icon-114x114-precomposed.png' rel='apple-touch-icon-precomposed' sizes='114x114' /> + <!-- For first-generation iPad: --> + <link href='/apple-touch-icon-72x72-precomposed.png' rel='apple-touch-icon-precomposed' sizes='72x72' /> + <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> + <link href='/apple-touch-icon-precomposed.png' rel='apple-touch-icon-precomposed' /> + <!-- For Nokia --> + <link href='/apple-touch-icon.png' rel='shortcut icon' /> + <!-- For everything else --> + <link href='/favicon.ico' rel='shortcut icon' /> + <!-- iOS. Delete if not required --> + <meta content='yes' name='apple-mobile-web-app-capable' /> + <meta content='black-translucent' name='apple-mobile-web-app-status-bar-style' /> + <link href='splash.png' rel='apple-touch-startup-image' /> + <!-- Microsoft. Delete if not required --> + <meta content='on' http-equiv='cleartype' /> + <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' /> + <!--[if lt IE 7 ]> <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script><script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script> <![endif]--> <!-- CSS --> <link href='/css/style.css?v=1' rel='stylesheet' /> + <link href='/css/survivalkit/survivalkit.css?v=1' rel='stylesheet' /> <!-- All JavaScript at the bottom, except for Modernizr and Respond. --> + <!--[if (lt IE 9) & (!IEMobile)]> + <script src="/js/libs/selectivizr-min.js"></script> + <![endif]--> <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> + <!-- + <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> + <a href='/survivalkit/'>The Coding Designer's Survival Kit</a> </h1> <h2>HTML5 Elements</h2> </hgroup> - Based on examples from <a href='http://developers.whatwg.org/'>developers.whatwg.org</a> + <div class="intro">Based on examples from <a href='http://developers.whatwg.org/'>developers.whatwg.org</a></div> </header> - <nav> + <nav class='kit-nav'> <ul> <li> <a href='/survivalkit/elements-common.html'>Common Markup</a> </li> <li> @@ -52,26 +74,24 @@ <a href='/survivalkit/elements-typography.html'>Typography</a> </li> <li> <a href='/survivalkit/elements-ui-patterns-drupal.html'>Drupal UI Patterns</a> </li> + <!-- %li --> + <!-- %a{:href => "/survivalkit/elements-ui-patterns.html"} UI Patterns --> <li> - <a href='/survivalkit/elements-ui-patterns.html'>UI Patterns</a> - </li> - <li> <a href='/survivalkit/styletile/styletile.html'>Style Tile</a> </li> </ul> </nav> + <nav class='section-nav'></nav> <div id='main' role='main'> <section class='element-group' id='sections'> - <h1 class='section-title'> - <a href='http://developers.whatwg.org/sections.html'>Sections</a> - </h1> + <h1 class='section-title'>Sections</h1> <article class='element' id='section'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/sections.html#the-section-element'>Section</a> + Section </h2> <p> The <code><a href='http://developers.whatwg.org/sections.html#the-section-element'>section</a></code> element @@ -95,11 +115,11 @@ </section> </div> </article> <article class='element' id='nav'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/sections.html#the-nav-element'>Nav</a> + Nav </h2> <p> The <code><a href='http://developers.whatwg.org/sections.html#the-nav-element'>nav</a></code> element @@ -170,11 +190,11 @@ </nav> </div> </article> <article class='element' id='article'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/sections.html#the-article-element'>Article</a> + Article </h2> <p> The <code><a href='http://developers.whatwg.org/sections.html#the-article-element'>article</a></code> element @@ -200,11 +220,11 @@ </article> </div> </article> <article class='element' id='aside'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/sections.html#the-aside-element'>Aside</a> + Aside </h2> <p> The <code><a href='http://developers.whatwg.org/sections.html#the-aside-element'>aside</a></code> element @@ -224,11 +244,11 @@ </aside> </div> </article> <article class='element' id='all-headings'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements'>The h1, h2, h3, h4, h5, and h6 elements</a> + The h1, h2, h3, h4, h5, and h6 elements </h2> <p> These elements <a href='http://developers.whatwg.org/sections.html#represents' title='represents'>represent</a> headings for their sections. @@ -265,11 +285,11 @@ </section> </div> </article> <article class='element' id='hgroup'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/sections.html#the-hgroup-element'>hgroup</a> + hgroup </h2> <p> The <code><a href='http://developers.whatwg.org/sections.html#the-hgroup-element'>hgroup</a></code> element @@ -286,11 +306,11 @@ </hgroup> </div> </article> <article class='element' id='header'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/sections.html#the-header-element'>Header</a> + Header </h2> <p> The <code><a href='http://developers.whatwg.org/sections.html#the-header-element'>header</a></code> element @@ -334,11 +354,11 @@ </header> </div> </article> <article class='element' id='footer'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/sections.html#the-footer-element'>Footer</a> + Footer </h2> <p> The <code><a href='http://developers.whatwg.org/sections.html#the-footer-element'>footer</a></code> element @@ -381,11 +401,11 @@ </footer> </div> </article> <article class='element' id='address'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/sections.html#the-address-element'>Address</a> + Address </h2> <p> The <code><a href='http://developers.whatwg.org/sections.html#the-address-element'>address</a></code> element @@ -406,16 +426,14 @@ </address> </div> </article> </section> <section class='element-group' id='grouping'> - <h1 class='section-title'> - <a href='http://developers.whatwg.org/grouping-content.html'>Grouping</a> - </h1> + <h1 class='section-title'>Grouping</h1> <article class='element' id='p'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/grouping-content.html#the-p-element'>p</a> + p </h2> <p> The <code><a href='http://developers.whatwg.org/grouping-content.html#the-p-element'>p</a></code> element @@ -468,11 +486,11 @@ </p> </div> </article> <article class='element' id='hr'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/grouping-content.html#the-hr-element'>hr</a> + hr </h2> <p> The <code><a href='http://developers.whatwg.org/grouping-content.html#the-hr-element'>hr</a></code> element @@ -538,11 +556,11 @@ </section> </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> + pre </h2> <p> The <code><a href='http://developers.whatwg.org/grouping-content.html#the-pre-element'>pre</a></code> element @@ -568,16 +586,16 @@ A leaflet. > </samp></pre> </div> <div class='markup'> - <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> + <pre> () o | | /| / o&#x000A; /\ ,_ __, | | |__/ _|_&#x000A; / \| | / | | |_| | |_/ | |/ | \ | |&#x000A;/(__/ \_/|_/ |_/ \/ |_/ \/ \_/|_/|__/ | \_/|_/|_/</pre> </div> </article> <article class='element' id='blockquote'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/grouping-content.html#the-blockquote-element'>blockquote</a> + blockquote </h2> <p> The <code><a href='http://developers.whatwg.org/grouping-content.html#the-blockquote-element'>blockquote</a></code> element @@ -614,11 +632,11 @@ <p>We shall now discuss these points</p> </div> </article> <article class='element' id='ol'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/grouping-content.html#the-ol-element'>ol</a> + ol </h2> <p> The <code><a href='http://developers.whatwg.org/grouping-content.html#the-ol-element'>ol</a></code> element @@ -646,11 +664,11 @@ </ol> </div> </article> <article class='element' id='ul'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/grouping-content.html#the-ul-element'>ul</a> + ul </h2> <p> The <code><a href='http://developers.whatwg.org/grouping-content.html#the-ul-element'>ul</a></code> element @@ -675,11 +693,11 @@ </ul> </div> </article> <article class='element' id='li'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/grouping-content.html#the-li-element'>li</a> + li </h2> <p> The <code><a href='http://developers.whatwg.org/grouping-content.html#the-li-element'>li</a></code> element @@ -749,17 +767,17 @@ </div> </article> <article class='element' id='dl'> <hgroup> <h2 class='element-title'> - <a href='http://developers.whatwg.org/grouping-content.html#the-dl-element'>dl</a> + dl </h2> <h3 class='element-title'> - <a href='http://developers.whatwg.org/grouping-content.html#the-dt-element'>dt</a> + dt </h3> <h3 class='element-title'> - <a href='http://developers.whatwg.org/grouping-content.html#the-dd-element'>dd</a> + dd </h3> </hgroup> <p> The <code><a href='http://developers.whatwg.org/grouping-content.html#the-dl-element'>dl</a></code> @@ -829,14 +847,14 @@ </div> </article> <article class='element' id='figure'> <hgroup> <h2 class='element-title'> - <a href='http://developers.whatwg.org/grouping-content.html#the-figure-element'>figure</a> + figure </h2> <h3 class='element-title'> - <a href='http://developers.whatwg.org/grouping-content.html#the-figcaption-element'>figcaption</a> + figcaption </h3> </hgroup> <p> The <code><a href='http://developers.whatwg.org/grouping-content.html#the-figure-element'>figure</a></code> @@ -878,11 +896,11 @@ </section> <section class='element-group' id='text'> <h1 class='section-title'>Text-level semantics</h1> <article class='element' id='a'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-a-element'>a</a> + a </h2> <div class='markup'> <nav> <ul> <li> @@ -929,11 +947,11 @@ </aside> </div> </article> <article class='element' id='em'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-em-element'>em</a> + em </h2> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-em-element'>em</a></code> element @@ -948,11 +966,11 @@ </p> </div> </article> <article class='element' id='strong'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-strong-element'>strong</a> + strong </h2> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-strong-element'>strong</a></code> element @@ -977,11 +995,11 @@ </p> </div> </article> <article class='element' id='small'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-small-element'>small</a> + small </h2> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-small-element'>small</a></code> element @@ -1020,11 +1038,11 @@ </p> </div> </article> <article class='element' id='s'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-s-element'>s</a> + s </h2> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-s-element'>s</a></code> element @@ -1042,11 +1060,11 @@ </p> </div> </article> <article class='element' id='cite'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-cite-element'>cite</a> + cite </h2> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-cite-element'>cite</a></code> element @@ -1094,11 +1112,11 @@ </p> </div> </article> <article class='element' id='q'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-q-element'>q</a> + q </h2> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-q-element'>q</a></code> element @@ -1134,11 +1152,11 @@ </p> </div> </article> <article class='element' id='dfn'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-dfn-element'>dfn</a> + dfn </h2> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-dfn-element'>dfn</a></code> element @@ -1193,11 +1211,11 @@ </p> </div> </article> <article class='element' id='abbr'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-abbr-element'>abbr</a> + abbr </h2> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-abbr-element'>abbr</a></code> element @@ -1225,11 +1243,11 @@ </p> </div> </article> <article class='element' id='time'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-time-element'>time</a> + time </h2> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-time-element'>time</a></code> element @@ -1259,11 +1277,11 @@ <p>I've liked model trains since at least 1983.</p> </div> </article> <article class='element' id='code'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-code-element'>code</a> + code </h2> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-code-element'>code</a></code> element @@ -1338,11 +1356,11 @@ </figure> </div> </article> <article class='element' id='samp'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-samp-element'>samp</a> + samp </h2> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-samp-element'>samp</a></code> element @@ -1371,11 +1389,11 @@ </samp></pre> </div> </article> <article class='element' id='kbd'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-kbd-element'>kbd</a> + kbd </h2> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-kbd-element'>kbd</a></code> element @@ -1393,11 +1411,11 @@ </p> </div> </article> <article class='element' id='sub-sup'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-sub-and-sup-elements'>sub and sup</a> + sub and sup </h2> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-sub-and-sup-elements'>sup</a></code> element @@ -1458,11 +1476,11 @@ </p> </div> </article> <article class='element' id='i'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-i-element'>i</a> + i </h2> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-i-element'>i</a></code> element @@ -1492,11 +1510,11 @@ </p> </div> </article> <article class='element' id='b'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-b-element'>b</a> + b </h2> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-b-element'>b</a></code> element @@ -1517,11 +1535,11 @@ </p> </div> </article> <article class='element' id='mark'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-mark-element'>mark</a> + mark </h2> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-mark-element'>mark</a></code> element @@ -1550,17 +1568,17 @@ </div> </article> <article class='element' id='ruby'> <hgroup> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-ruby-element'>ruby</a> + ruby </h2> <h3 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-rt-element'>rt</a> + rt </h3> <h3 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-rp-element'>rp</a> + rp </h3> </hgroup> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-ruby-element'>ruby</a></code> @@ -1610,11 +1628,11 @@ </ruby> </div> </article> <article class='element' id='bdi'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/text-level-semantics.html#the-bdi-element'>bdi</a> + bdi </h2> <p> The <code><a href='http://developers.whatwg.org/text-level-semantics.html#the-bdi-element'>bdi</a></code> element @@ -1980,16 +1998,14 @@ </table> </div> </article> </section> <section class='element-group' id='tabular'> - <h1 class='section-title'> - <a href='http://developers.whatwg.org/tabular-data.html'>Tabular Data</a> - </h1> + <h1 class='section-title'>Tabular Data</h1> <article class='element' id='table'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/tabular-data.html#the-table-element'>Table</a> + Table </h2> <p> The <code><a href='http://developers.whatwg.org/tabular-data.html#the-table-element'>table</a></code> element @@ -2289,11 +2305,11 @@ </table> </div> </article> <article class='element' id='thead'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/tabular-data.html#the-thead-element'>thead</a> + thead </h2> <p> The <code><a href='http://developers.whatwg.org/tabular-data.html#the-thead-element'>thead</a></code> element @@ -2613,13 +2629,11 @@ </table> </div> </article> </section> <section class='element-group' id='forms'> - <h1 class='section-title'> - <a href='http://developers.whatwg.org/forms.html'>Forms</a> - </h1> + <h1 class='section-title'>Forms</h1> <article class='element' id='sample-forms'> <h2 class='element-title'>Sample Forms</h2> <div class='markup'> <form action='https://pizza.example.com/order.cgi' enctype='application/x-www-form-urlencoded' method='post'> <p> @@ -2700,11 +2714,11 @@ </form> </div> </article> <article class='element' id='fieldset'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/forms.html#the-fieldset-element'>fieldset</a> + fieldset </h2> <div class='markup'> <fieldset disabled='' name='clubfields'> <legend> <label> @@ -2781,11 +2795,11 @@ </fieldset> </div> </article> <article class='element' id='label'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/forms.html#the-label-element'>label</a> + label </h2> <div class='markup'> <p> <label> Full name: @@ -2810,16 +2824,14 @@ </p> </div> </article> </section> <section class='element-group' id='interactive'> - <h1 class='section-title'> - <a href='http://developers.whatwg.org/interactive-elements.html'>Interactive</a> - </h1> + <h1 class='section-title'>Interactive</h1> <article class='element' id='details'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/interactive-elements.html#the-details-element'>details</a> + details </h2> <p> The <code><a href='http://developers.whatwg.org/interactive-elements.html#the-details-element'>details</a></code> element @@ -2871,11 +2883,11 @@ </details> </div> </article> <article class='element' id='menu'> <h2 class='element-title'> - <a href='http://developers.whatwg.org/interactive-elements.html#menus'>menu</a> + menu </h2> <p> The <code><a href='http://developers.whatwg.org/interactive-elements.html#menus'>menu</a></code> element represents a list of commands. @@ -2942,10 +2954,26 @@ 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/libs/320-up/helper.js?v=1'></script> <script src='/js/kit/kit-source.jquery.js?v=1'></script> + <!--[if (lt IE 9) & (!IEMobile)]> + <script src="/js/libs/imgsizer.js"></script> + <![endif]--> + <script type='text/javascript'> + //<![CDATA[ + // iOS scale bug fix + MBP.scaleFix(); + + // Respond.js + yepnope({ + test : Modernizr.mq('(only all)'), + nope : ['/js/libs/respond.min.js'] + }); + //]]> + </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"]];