Created
March 7, 2012 23:52
-
-
Save pixelwhip/1997390 to your computer and use it in GitHub Desktop.
A style guide to use as a basis for styling basic html tags.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Quick & Dirty Style Guide --> | |
<!-- Paste this into the body of a node to give you something to style. --> | |
<!-- by John Ferris @pixel_whip http://pixel-whip.com --> | |
<p class="intro">Intro Paragraph Style: It’s helpful to give your readers a quick introduction to the page. That’s what this paragraph will do for them.</p> | |
<h2>Section Heading (h2)</h2> | |
<img src="http://placekitten.com/600/288" /> | |
<p><img src="http://placekitten.com/340/240" class="image-left"/>Basic Paragraph Style: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, this is a link quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, this is a visited link consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
<p><img src="http://placekitten.com/216/216" class="image-right"/>Ut enim ad minim veniam, quis nostrud exercitation this is a link on hover nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> | |
<h3>Section Heading (h3)</h3> | |
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
<h4>Section Heading (h4)</h4> | |
<blockquote> Blockquote Style: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </blockquote> | |
<p>Basic Paragraph Style: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, this is a link quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> | |
<h5>Section Heading (h5)</h5> | |
<p>Lorem ipsum dolor sit amet, this is a visited link consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
<h6>Section Heading (h6)</h6> | |
<p>Lorem ipsum dolor sit amet, this is a visited link consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
<ul> | |
<li>Unordered list Style: Ut enim ad minim veniam.</li> | |
<li>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li> | |
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li> | |
</ul> | |
<ol> | |
<li>Unordered list Style: Ut enim ad minim veniam.</li> | |
<li>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li> | |
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li> | |
</ol> | |
<table> | |
<thead> | |
<tr> | |
<th>thead th</th> | |
<th>thead th</th> | |
<th>thead th</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr class="odd"> | |
<th>tbody th</th> | |
<td>tbody td</td> | |
<td>tbody td</td> | |
</tr> | |
<tr class="even"> | |
<th>tbody th</th> | |
<td>tbody td</td> | |
<td>tbody td</td> | |
</tr> | |
<tr class="odd"> | |
<th>tbody th</th> | |
<td>tbody td</td> | |
<td>tbody td</td> | |
</tr> | |
</tbody> | |
<tfoot> | |
<tr> | |
<th>tfoot th</th> | |
<td>tfoot td</td> | |
<td>tfoot td</td> | |
</tr> | |
</tfoot> | |
</table> | |
<p class="fine-print">Fine Print Style: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, this is a link quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, this is a visited link consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment