RubyGems - survivalkit - Versions diffs - 0.1 - Mend

survivalkit 0.1

Files changed (1368) hide show

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

@@ -0,0 +1,196 @@
+<!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>Typography</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>Typography</h2>
+        </hgroup>
+        (via <a href='#credit'>Type-a-File</a>)
+      </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'>
+        <article>
+          <h1><span class='kern'>T</span>ype-a-file Gives Your Web
+            <span class='kern'>T</span>ypography
+            a Head Start
+          </h1>
+          <div class='kicker'>
+            <p>Below you’ll find some text marked up with the core elements of Type-a-file. View the source code to find out how to use them on your own site. This element, for example is called a “kicker.” It’s paragraph text that introduces the rest of the text. It’s useful for outlining your topic & looks killer. Just create a div with class=“kicker” and throw some paragraphs into it. Blammo!</p>
+          </div>
+          <h2>The Typographic Basics</h2>
+          <img alt='placeholder image' src='http://dummyimage.com/480x248/ccc/fff' />
+          <div class='caption'>You’ll often want to caption photos. This is a .caption class</div>
+          <p><span class='drop-cap'>P</span>aragraphs are the core building block of typography online. You want to make sure you’ve got a good line-height and horizontal width—aka measure—for good readability. If you stack your lines too close together, or too far apart, lines become harder to read. Like a staircase where the steps are too shallow or too steep. The standard line-height online is something between 1.5 and 2.0 ems.
+            <a class='superscript' href='#ems'>1</a>
+            If your lines stretch too far across the page reading can feel like a tedious marathon. The standard single-column width online is about 70-90 characters.
+          </p>
+          <aside class='sidenote'>
+            <h1>This is a “sidenote”</h1>
+            <p>
+              It’s different than a sidebar because its content are directly related to the main content at left. When
+              <abbr>html5</abbr>
+              is more prevalent, you’ll be able to start using
+              <code><aside></code>
+              instead of a div with a class of .sidebar.
+            </p>
+            <p>I’ve set it up here as a div which contains h1s for titles, as well as paragraphs.</p>
+          </aside>
+          <p>If you look at the source code you’ll notice how the .sidenote to the right was written before this paragraph, which it is supposed to directly relate to. You’ll probably want to set up your asides in the same manner.</p>
+          <p>
+            These are the simple beginnings of Type-a-file. We’ve put in a lot of work to make good typography easier for you. Colors & structure we leave to you, but typographically, we got you covered. Download the file and follow the instructions for installing and setting it up. Now we’ll get into some of the
+            <em>fancier</em>
+            elements we’ve built into Type-a-file.
+          </p>
+          <h2>Puttin’ on the Ritz</h2>
+          <p>
+            <span class='run-in'>Sometimes you want an opening phrase to pop.</span>
+            You could just put it in bold tags, but wouldn’t you rather use semantic markup?
+            <a class='superscript' href='#semantics'>2</a>
+            We’ve created a class called .run-in so that you can! Best practices claim you’ll usually want to keep those run-ins to one line.
+          </p>
+          <aside class='sidenote'>
+            <h1>Another sidenote.</h1>
+            <p>I thought it might be interesting to show you that you can put lists into sidenotes:</p>
+            <ul>
+              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+              <li>Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam</li>
+            </ul>
+          </aside>
+          <p>
+            Typically you want a nice, steady vertical rhythm to your page. Of course, some folks don’t
+            <span class='pullquote'>Speaking of intelligently deviating…</span>think
+            that it’s actually necessary on the web to stick to a baseline grid, but it can be a great guide from which you can intelligently deviate. Speaking of intelligently deviating, there are some key elements that make great deviations from the monotony of paragraphs: the “quotes.” These include blockquotes and a special Type-a-file class named “pullquote.” The latter is above, the former below:
+          </p>
+          <blockquote>
+            <p>Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase.</p>
+          </blockquote>
+          <cite>Robert Bringhurst</cite>
+          <h2>Delineate, Demonstrate, Define</h2>
+          <p>This Type-a-file would of course be incomplete without specifications for lists, codes & definitions. It’s fairly common to indent both blockquotes and list elements, but seriously consider left aligning your text for these items and outdenting their bullets & other visual demarcations. It can present a cleaner appearance while also drawing focused attention to information points.</p>
+          <ol>
+            <li>This is a list that is well ordered.</li>
+            <li>It starts with one and goes to two.</li>
+            <li>Then it has a third item.</li>
+            <li>Followed by the fourth, and—in this case—last item.</li>
+          </ol>
+          <ul>
+            <li>Un-ordered lists are just as simple.</li>
+            <li>The only difference being that the items are marks by bullets instead of numbers.</li>
+            <li>Don’t forget that lists can have list titles.</li>
+            <li>Finally we’ve reached the last un-ordered item.</li>
+          </ul>
+          <p>
+            If you’re a blogger geek, sooner or later you’ll want to tell everybody about some ripping
+            <abbr>css</abbr>
+            coding you concocted by posting it on your blog-o-tubes. So we’ve got you covered.
+          </p>
+          <pre><code>#header h1 a {&#x000A;      display: block; &#x000A;      width: 300px; &#x000A;      height: 80px; &#x000A;      }  %p Then, since you’re an uber-geek-dufus-man-child who’s fascinated by proving to the world you have sooooo much knowledge to share, you’ll probably want to post some definitions or definition-like information where a title element is closely linked with a description of some kind. We got ya.</code></pre>
+          <dl>
+            <dt>Type-a-file</dt>
+            <dd>A really awesome way to get your site up to typographic snuff. It uses traditional semantic HTML tags along with some additional semantic classes named after commonly occurring elements in print design to create a solid typographic toolkit for your website, whoever you are.</dd>
+            <dt>CSS</dt>
+            <dd>CSS stands for Cascading Style Sheet. This is a document format which provides a set of style rules which can then be incorporated in an XHTML or HTML document. It is a means to separate web content from formatting and presentation information. CSS is also a Brazilian rock band from São Paulo. The band was labeled as part of the explosion of the New Rave scene. Their songs are in both English and Portuguese. CSS is an abbreviation for Cansei de Ser Sexy , literally “tired of being sexy” in Portuguese.</dd>
+          </dl>
+          <p>
+            You see how that works? You need something done typographically, Type-a-file does it. That simple. Now what are you waiting for? Find a flavor that suits your mood and go to town. Download the zip file. All the directions and files you’ll need will be squished inside. Oh, and when you’ve become a master
+            <abbr>css</abbr>er
+            and start making your own flavors of Type-a-file, come back and share them with the Type-a-file community!
+          </p>
+          <small>
+            This is just a
+            <code>small</code>
+            element. It’s really useful when you want to add a small note or bit of text to something that’s perhaps less important or a clarification of something. Another option in an arsenal of options.
+          </small>
+          <ol class='footnote'>
+            <li id='ems'>
+              <span class='run-in'>All about ems:</span>
+              An em is a unit of measurement in the field of typography. This unit defines the proportion of the letter width and height with respect to the point size of the current font. Originally the unit was derived from the width of the capital “M” in the currently used typeface. This unit is not defined in terms of any specific typeface, and thus is the same for all fonts at a given point size. So, 1 em in a 16 point typeface is 16 points
+            </li>
+            <li id='semantics'>
+              <span class='run-in'>Semantic Web:</span>
+              A group of methods and technologies to allow machines to understand the meaning—or “semantics”—of information on the World Wide Web. The term was coined by World Wide Web Consortium (W3C) director Tim Berners-Lee. According to the original vision, the availability of machine-readable metadata would enable automated agents and other software to access the Web more intelligently. The agents would be able to perform tasks automatically and locate related information on behalf of the user.
+            </li>
+          </ol>
+        </article>
+      </div>
+      <footer><div id='credit'>This markup is from the <a href='http://type-a-file.com'>Type-a-File</a> project. <div class='commons'>Type-a-file is a <a href='http://www.strangenative.com' target='_blank'>StrangeNative</a> product licensed under <a class='cc' href='http://www.creativecommons.com'> creative commons.</a> You're free to use it commercially or non-commercially. Just keep that credit line in there!</div></div></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>

data/templates/project/files/html/survivalkit/elements-ui-patterns-drupal.html ADDED Viewed

@@ -0,0 +1,625 @@
+<!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>Drupal 7 UI Patterns</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>Drupal 7 UI Patterns</h2>
+        </hgroup>
+        Based on the default markup from Drupal 7
+      </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'>
+        <section id='elements'>
+          <article class='element' id='site-name'>
+            <h2 class='element-title'>Site Name</h2>
+            <div class='markup'>
+              <h1 id='site-name'>
+                <a href='/' rel='home' title='Home'>
+                  <span>My Awesome Site</span>
+                </a>
+              </h1>
+            </div>
+          </article>
+          <article class='element' id='menu'>
+            <h2 class='element-title'>Menus</h2>
+            <div class='markup'>
+              <ul class='links inline clearfix' id='main-menu'>
+                <li class='menu-201 first'>
+                  <a href='/'>Home</a>
+                </li>
+                <li class='menu-365 active-trail active'>
+                  <a class='active-trail active' href='/blog' title='Blog'>Blog</a>
+                </li>
+                <li class='menu-366 last'>
+                  <a href='/my-page' title='My Page'>My Page</a>
+                </li>
+              </ul>
+            </div>
+          </article>
+          <article class='element' id='breadcrumbs'>
+            <h2 class='element-title'>Breadcrumbs</h2>
+            <div class='markup'>
+              <div class='breadcrumb'>
+                <a href='/'>Home</a>
+                »
+                <a href='/blog' title='Blog'>Blog</a>
+              </div>
+            </div>
+          </article>
+          <article class='element' id='search'>
+            <h2 class='element-title'>Search Field</h2>
+            <div class='markup'>
+              <div class='block block-search contextual-links-region' id='block-search-form'>
+                <div class='content'>
+                  <form accept-charset='UTF-8' action='' id='search-block-form' method='post'>
+                    <div>
+                      <div class='container-inline'>
+                        <h2 class='element-invisible'>Search form</h2>
+                        <div class='form-item form-type-searchfield form-item-search-block-form'>
+                          <label class='element-invisible' for='edit-search-block-form--2'>Search</label>
+                          <input class='form-text form-search' id='edit-search-block-form--2' maxlength='128' name='search_block_form' size='15' title='Enter the terms you wish to search for.' type='search' value='' />
+                        </div>
+                        <div class='form-actions form-wrapper' id='edit-actions'>
+                          <input class='form-submit' id='edit-submit' name='op' type='submit' value='Search' />
+                        </div>
+                      </div>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </article>
+          <article class='element' id='drupal-messages'>
+            <h2 class='element-title'>Messages</h2>
+            <div class='markup'>
+              <div class='messages status'>
+                <h2 class='element-invisible' style='display: none;'>Status message</h2>
+                <p>
+                  This is
+                  <em>status</em>
+                  message.
+                </p>
+              </div>
+              <div class='messages warning'>
+                <h2 class='element-invisible' style='display: none;'>Status message</h2>
+                <p>
+                  This is
+                  <em>warning</em>
+                  message.
+                </p>
+              </div>
+              <div class='messages error'>
+                <h2 class='element-invisible' style='display: none;'>Status message</h2>
+                <p>
+                  This is
+                  <em>error</em>
+                  message.
+                </p>
+              </div>
+            </div>
+          </article>
+          <article class='element' id='block'>
+            <h2 class='element-title'>Block</h2>
+            <div class='markup'>
+              <div class='block block-block' id='block-block-1'>
+                <h2>This is a Custom Block</h2>
+                <div class='content'>
+                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+                </div>
+              </div>
+            </div>
+          </article>
+          <article class='element' id='tabs'>
+            <h2 class='element-title'>Tabs</h2>
+            <div class='markup'>
+              <div class='tabs'>
+                <h2 class='element-invisible'>Primary tabs</h2>
+                <ul class='tabs primary'>
+                  <li class='active'>
+                    <a class='active' href='/blog/about'>
+                      View
+                      <span class='element-invisible'>(active tab)</span>
+                    </a>
+                  </li>
+                  <li>
+                    <a href='/node/52/edit'>Edit</a>
+                  </li>
+                  <li>
+                    <a href='/node/52/devel'>Devel</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </article>
+          <article class='element' id='form-new-account'>
+            <h2 class='element-title'>New User Form</h2>
+            <div class='markup'>
+              <div class='block block-system' id='block-system-main'>
+                <div class='content'>
+                  <form accept-charset='UTF-8' action='/user/register' class='user-info-from-cookie' enctype='multipart/form-data' id='user-register-form' method='post'>
+                    <div>
+                      <div class='form-item form-type-textfield form-item-name'>
+                        <label for='edit-name'>
+                          Username
+                          <span class='form-required' title='This field is required.'>*</span>
+                        </label>
+                        <input class='username form-text required' id='edit-name' maxlength='60' name='name' size='60' type='text' value=''>
+                          <div class='description'>Spaces are allowed; punctuation is not allowed except for periods, hyphens, apostrophes, and underscores.</div>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-emailfield form-item-mail'>
+                        <label for='edit-mail'>
+                          E-mail address
+                          <span class='form-required' title='This field is required.'>*</span>
+                        </label>
+                        <input class='form-text form-email required' id='edit-mail' maxlength='254' name='mail' size='60' type='email' value=''>
+                          <div class='description'>A valid e-mail address. All e-mails from the system will be sent to this address. The e-mail address is not made public and will only be used if you wish to receive a new password or wish to receive certain news or notifications by e-mail.</div>
+                        </input>
+                      </div>
+                      <input name='timezone' type='hidden' value='America/New_York'>
+                        <input name='form_build_id' type='hidden' value='form-5ZOqvNO7BiBFYWgXdre26qBbXM5YuyRLfOsdc1Kx9KU'>
+                          <input name='form_id' type='hidden' value='user_register_form'>
+                            <div class='form-actions form-wrapper' id='edit-actions'>
+                              <input class='form-submit' id='edit-submit' name='op' type='submit' value='Create new account' />
+                            </div>
+                          </input>
+                        </input>
+                      </input>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </article>
+          <article class='element' id='form-login'>
+            <h2 class='element-title'>Log In Form</h2>
+            <div class='markup'>
+              <div class='block block-system' id='block-system-main'>
+                <div class='content'>
+                  <form accept-charset='UTF-8' action='/user' id='user-login' method='post'>
+                    <div>
+                      <div class='form-item form-type-textfield form-item-name'>
+                        <label for='edit-name'>
+                          Username
+                          <span class='form-required' title='This field is required.'>*</span>
+                        </label>
+                        <input class='form-text required' id='edit-name' maxlength='60' name='name' size='60' type='text' value=''>
+                          <div class='description'>Enter your d7 username.</div>
+                        </input>
+                      </div>
+                      <div class='form-item form-type-password form-item-pass'>
+                        <label for='edit-pass'>
+                          Password
+                          <span class='form-required' title='This field is required.'>*</span>
+                        </label>
+                        <input class='form-text required' id='edit-pass' maxlength='128' name='pass' size='60' type='password' value=''>
+                          <div class='description'>Enter the password that accompanies your username.</div>
+                        </input>
+                      </div>
+                      <input name='form_build_id' type='hidden' value='form-XW71tLWvMNpumkgW-wKMOpDRUN0cPt62fr5Q0M7KNzo'>
+                        <input name='form_id' type='hidden' value='user_login'>
+                          <div class='form-actions form-wrapper' id='edit-actions'>
+                            <input class='form-submit' id='edit-submit' name='op' type='submit' value='Log in' />
+                          </div>
+                        </input>
+                      </input>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </article>
+          <article class='element' id='form-new-password'>
+            <h2 class='element-title'>New Password Form</h2>
+            <div class='markup'>
+              <div class='block block-system' id='block-system-main'>
+                <div class='content'>
+                  <form accept-charset='UTF-8' action='/user/password' id='user-pass' method='post'>
+                    <div>
+                      <div class='form-item form-type-textfield form-item-name'>
+                        <label for='edit-name'>
+                          Username or e-mail address
+                          <span class='form-required' title='This field is required.'>*</span>
+                        </label>
+                        <input class='form-text required' id='edit-name' maxlength='254' name='name' size='60' type='text' value='' />
+                      </div>
+                      <input name='form_build_id' type='hidden' value='form-P9tzA7PRYI8Y3TxPo9aBfFXR3hVb38lqzMLrZE1O9VE'>
+                        <input name='form_id' type='hidden' value='user_pass'>
+                          <div class='form-actions form-wrapper' id='edit-actions'>
+                            <input class='form-submit' id='edit-submit' name='op' type='submit' value='E-mail new password' />
+                          </div>
+                        </input>
+                      </input>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </article>
+          <article class='element' id='pager'>
+            <h2 class='element-title'>Pager</h2>
+            <div class='markup'>
+              <ul class='pager'>
+                <li class='pager-first first'>
+                  <a class='active' href='/node' title='Go to first page'>« first</a>
+                </li>
+                <li class='pager-previous'>
+                  <a class='active' href='/node' title='Go to previous page'>‹ previous</a>
+                </li>
+                <li class='pager-item'>
+                  <a class='active' href='/node' title='Go to page 1'>1</a>
+                </li>
+                <li class='pager-current'>2</li>
+                <li class='pager-item'>
+                  <a class='active' href='/node?page=2' title='Go to page 3'>3</a>
+                </li>
+                <li class='pager-next'>
+                  <a class='active' href='/node?page=2' title='Go to next page'>next ›</a>
+                </li>
+                <li class='pager-last last'>
+                  <a class='active' href='/node?page=2' title='Go to last page'>last »</a>
+                </li>
+              </ul>
+            </div>
+          </article>
+          <article class='element' id='rss-link'>
+            <h2 class='element-title'>RSS Link</h2>
+            <div class='markup'>
+              <a class='feed-icon' href='/rss.xml' title='Subscribe to d7 RSS'>
+                <img alt='Subscribe to d7 RSS' src='http://d7/misc/feed.png' />
+              </a>
+            </div>
+          </article>
+          <article class='element' id='links'>
+            <h2 class='element-title'>Inline Links</h2>
+            <div class='markup'>
+              <ul class='links inline'>
+                <li class='comment-add first last active'>
+                  <a class='active' href='/node/1#comment-form' title='Share your thoughts and opinions related to this posting.'>Add new comment</a>
+                </li>
+              </ul>
+            </div>
+          </article>
+          <article class='element' id='taxonomy'>
+            <h2 class='element-title'>Taxonomy List</h2>
+            <div class='markup'>
+              <div class='field field-name-field-tags field-type-taxonomy-term-reference field-label-above'>
+                <div class='field-label'>Tags: </div>
+                <div class='field-items'>
+                  <div class='field-item even'>
+                    <a href='/taxonomy/term/1'>foo</a>
+                  </div>
+                  <div class='field-item odd'>
+                    <a href='/taxonomy/term/2'>bar</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </article>
+          <article class='element' id='field-image'>
+            <h2 class='element-title'>Image Field</h2>
+            <div class='markup'>
+              <div class='field field-name-field-image field-type-image field-label-hidden'>
+                <div class='field-items'>
+                  <div class='field-item even'>
+                    <img alt='placeholder image' src='http://dummyimage.com/100x100/ccc/fff' />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </article>
+          <article class='element' id='node'>
+            <h2 class='element-title'>Node Page</h2>
+            <div class='markup'>
+              <h1>This is the node title</h1>
+              <div class='node node-article node-promoted clearfix' id='node-1'>
+                <div class='submitted'>
+                  Submitted by
+                  <span class='username'>Anonymous (not verified)</span>
+                  on Sat, 01/15/2011 - 16:14
+                </div>
+                <div class='content'>
+                  <div class='field field-name-field-image field-type-image field-label-hidden'>
+                    <div class='field-items'>
+                      <div class='field-item even'>
+                        <img alt='placeholder image' src='http://dummyimage.com/100x100/ccc/fff' />
+                      </div>
+                    </div>
+                  </div>
+                  <div class='field field-name-body field-type-text-with-summary field-label-hidden'>
+                    <div class='field-items'>
+                      <div class='field-item even'>
+                        <p>Ad esca ludus. Adipiscing autem defui similis utinam. Abluo causa duis esca meus nostrud si volutpat.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class='field field-name-field-tags field-type-taxonomy-term-reference field-label-above'>
+                    <div class='field-label'>Tags: </div>
+                    <div class='field-items'>
+                      <div class='field-item even'>
+                        <a href='/taxonomy/term/1'>foo</a>
+                      </div>
+                      <div class='field-item odd'>
+                        <a href='/taxonomy/term/2'>bar</a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <ul class='links inline'>
+                  <li class='comment-add first last active'>
+                    <a class='active' href='/node/1#comment-form' title='Share your thoughts and opinions related to this posting.'>Add new comment</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </article>
+          <article class='element' id='comments'>
+            <h2 class='element-title'>Comments</h2>
+            <div class='markup'>
+              <div class='comment-wrapper' id='comments'>
+                <h2 class='title'>Comments</h2>
+                <a id='comment-1'></a>
+                <div class='comment comment-by-viewer clearfix'>
+                  <h3>
+                    <a class='permalink' href='/comment/1#comment-1' rel='bookmark'>First</a>
+                  </h3>
+                  <div class='submitted'>
+                    <a class='permalink' href='/comment/1#comment-1' rel='bookmark'>Permalink</a>
+                    Submitted by
+                    <a class='username' href='/user/1' title='View user profile.'>admin</a>
+                    on Wed, 03/09/2011 - 23:52
+                  </div>
+                  <div class='content'>
+                    <div class='field field-name-comment-body field-type-text-long field-label-hidden'>
+                      <div class='field-items'>
+                        <div class='field-item even'>
+                          <p>This is the first comment</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <ul class='links inline'>
+                    <li class='comment-delete first'>
+                      <a href='/comment/1/delete'>delete</a>
+                    </li>
+                    <li class='comment-edit'>
+                      <a href='/comment/1/edit'>edit</a>
+                    </li>
+                    <li class='comment-reply last'>
+                      <a href='/comment/reply/1/1'>reply</a>
+                    </li>
+                  </ul>
+                </div>
+                <a id='comment-2'></a>
+                <div class='comment comment-by-viewer clearfix'>
+                  <h3>
+                    <a class='permalink' href='/comment/2#comment-2' rel='bookmark'>Second</a>
+                  </h3>
+                  <div class='submitted'>
+                    <a class='permalink' href='/comment/2#comment-2' rel='bookmark'>Permalink</a>
+                    Submitted by
+                    <a class='username' href='/user/1' title='View user profile.'>admin</a>
+                    on Wed, 03/09/2011 - 23:53
+                  </div>
+                  <div class='content'>
+                    <div class='field field-name-comment-body field-type-text-long field-label-hidden'>
+                      <div class='field-items'>
+                        <div class='field-item even'>
+                          <p>This is the second comment.</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <ul class='links inline'>
+                    <li class='comment-delete first'>
+                      <a href='/comment/2/delete'>delete</a>
+                    </li>
+                    <li class='comment-edit'>
+                      <a href='/comment/2/edit'>edit</a>
+                    </li>
+                    <li class='comment-reply last'>
+                      <a href='/comment/reply/1/2'>reply</a>
+                    </li>
+                  </ul>
+                </div>
+                <div class='indented'>
+                  <a id='comment-3'></a>
+                  <div class='comment comment-by-viewer clearfix'>
+                    <h3>
+                      <a class='permalink' href='/comment/3#comment-3' rel='bookmark'>reply</a>
+                    </h3>
+                    <div class='submitted'>
+                      <a class='permalink' href='/comment/3#comment-3' rel='bookmark'>Permalink</a>
+                      Submitted by
+                      <a class='username' href='/user/1' title='View user profile.'>admin</a>
+                      on Wed, 03/09/2011 - 23:53
+                    </div>
+                    <div class='content'>
+                      <div class='field field-name-comment-body field-type-text-long field-label-hidden'>
+                        <div class='field-items'>
+                          <div class='field-item even'>
+                            <p>This is a reply to the second comment.</p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <ul class='links inline'>
+                      <li class='comment-delete first'>
+                        <a href='/comment/3/delete'>delete</a>
+                      </li>
+                      <li class='comment-edit'>
+                        <a href='/comment/3/edit'>edit</a>
+                      </li>
+                      <li class='comment-reply last'>
+                        <a href='/comment/reply/1/3'>reply</a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </article>
+          <article class='element' id='form-comment'>
+            <h2 class='element-title'>Comment Form</h2>
+            <div class='markup'>
+              <h2 class='title comment-form'>Add new comment</h2>
+              <form accept-charset='UTF-8' action='/comment/reply/1' class='comment-form' id='comment-form' method='post'>
+                <div>
+                  <div class='form-item form-type-item' id='edit-author--2'>
+                    <label for='edit-author--2'>Your name</label>
+                    <a class='username' href='/user/1' title='View user profile.'>admin</a>
+                  </div>
+                  <div class='form-item form-type-textfield form-item-subject'>
+                    <label for='edit-subject'>Subject</label>
+                    <input class='form-text' id='edit-subject' maxlength='64' name='subject' size='60' type='text' value='' />
+                  </div>
+                  <div class='field-type-text-long field-name-comment-body field-widget-text-textarea form-wrapper' id='edit-comment-body'>
+                    <div id='comment-body-add-more-wrapper'>
+                      <div class='text-format-wrapper'>
+                        <div class='form-item form-type-textarea form-item-comment-body-und-0-value'>
+                          <label for='edit-comment-body-und-0-value'>
+                            Comment
+                            <span class='form-required' title='This field is required.'>*</span>
+                          </label>
+                          <div class='form-textarea-wrapper resizable textarea-processed resizable-textarea'>
+                            <textarea class='text-full form-textarea required' cols='60' id='edit-comment-body-und-0-value' name='comment_body[und][0][value]' rows='5'></textarea>
+                            <div class='grippie'></div>
+                          </div>
+                        </div>
+                        <fieldset class='filter-wrapper form-wrapper' id='edit-comment-body-und-0-format'>
+                          <div class='fieldset-wrapper'>
+                            <div class='filter-help form-wrapper' id='edit-comment-body-und-0-format-help'>
+                              <p>
+                                <a href='/filter/tips'>More information about text formats</a>
+                              </p>
+                            </div>
+                            <div class='form-item form-type-select form-item-comment-body-und-0-format'>
+                              <label for='edit-comment-body-und-0-format--2'>Text format</label>
+                              <select class='filter-list form-select' id='edit-comment-body-und-0-format--2' name='comment_body[und][0][format]'>
+                                <option selected='selected' value='filtered_html'>Filtered HTML</option>
+                                <option value='full_html'>Full HTML</option>
+                                <option value='plain_text'>Plain text</option>
+                              </select>
+                            </div>
+                            <div class='filter-guidelines form-wrapper filter-guidelines-processed' id='edit-comment-body-und-0-format-guidelines'>
+                              <div class='filter-guidelines-item filter-guidelines-filtered_html' style='display: block; '>
+                                <h3 style='display: none; '>Filtered HTML</h3>
+                                <ul class='tips'>
+                                  <li>Web page addresses and e-mail addresses turn into links automatically.</li>
+                                  <li>Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd></li>
+                                  <li>Lines and paragraphs break automatically.</li>
+                                </ul>
+                              </div>
+                              <div class='filter-guidelines-item filter-guidelines-full_html' style='display: none; '>
+                                <h3 style='display: none; '>Full HTML</h3>
+                                <ul class='tips'>
+                                  <li>Web page addresses and e-mail addresses turn into links automatically.</li>
+                                  <li>Lines and paragraphs break automatically.</li>
+                                </ul>
+                              </div>
+                              <div class='filter-guidelines-item filter-guidelines-plain_text' style='display: none; '>
+                                <h3 style='display: none; '>Plain text</h3>
+                                <ul class='tips'>
+                                  <li>No HTML tags allowed.</li>
+                                  <li>Web page addresses and e-mail addresses turn into links automatically.</li>
+                                  <li>Lines and paragraphs break automatically.</li>
+                                </ul>
+                              </div>
+                            </div>
+                          </div>
+                        </fieldset>
+                      </div>
+                    </div>
+                  </div>
+                  <div class='form-actions form-wrapper' id='edit-actions'>
+                    <input class='form-submit' id='edit-submit' name='op' type='submit' value='Save'>
+                      <input class='form-submit' id='edit-preview' name='op' type='submit' value='Preview' />
+                    </input>
+                  </div>
+                </div>
+              </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>