Element Styling Cheat Sheet
- 9 Comments
- Latest Comment
When I’m building a new theme at some point I like to style all the html elements in one shot. Often designers will send me a style guide with references to all manner of things so this gives me a chance to set some defaults from which I can then build on.
You might call this a “tip from a pro”, but this is something all budding themers can make use of, and save yourself a few minutes as well.
I just copy/paste this into a node and get to it with Firebug. Check out the live version of the element styles cheat.
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
</a>
</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<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>
<h2>H2 Heading with Paragraphs</h2>
<p>Paragraph one. Neo damnum aliquam consequat. Abdo genitus luptatum virtus singularis distineo validus ea. Gravis oppeto huic incassum torqueo jumentum dolus esca suscipit. Vulputate hos singularis veniam zelus singularis utinam vulputate sino quidne. Nutus neque quidem. Natu interdico melior.Oppeto vulpes meus jugis ut iriure valde consectetuer abigo. Aptent bene ideo commoveo quadrum abbas. Vereor macto neo probo ille.</p>
<h3>H3 Subheading</h3>
<p>Paragraph two. Esse vulpes sino virtus rusticus brevitas mos. Cui ad vulputate et vero zelus feugiat os olim obruo. Facilisi quadrum proprius gravis velit humo nunc wisi imputo antehabeo.Valde dolore tation facilisi ullamcorper gemino gemino cui qui paratus. Camur in capto euismod. Brevitas vero iriure letalis valde oppeto plaga ullamcorper adipiscing inhibeo.</p>
<p><a href="#">Hyperlink</a></p>
<p><span>Span</span></p>
<p><abbr title="abbr">abbr</abbr></p>
<p><acronym title="acronym">acronym</acronym></p>
<address>address</address>
<p><bdo dir="rtl">LTR bdo</bdo></p>
<p><bdo dir="ltr">LTR bdo</bdo></p>
<blockquote><p>blockquote</p></blockquote>
<p><q>q</q></p>
<p><cite>cite</cite></p>
<pre>Pre</pre>
<p><kbd>kbd</kbd></p>
<p><samp>samp</samp></p>
<p><var>var</var></p>
<del>del</del>
<ins>ins</ins>
<p><dfn>dfn</dfn></p>
<p><strong>strong</strong></p>
<p><em>em</em></p>
<p>sup<sup>1</sup></p>
<p>sub<sub>1</sub></p>
<table width="50%" border="1">
<caption>Caption. Table with border 1, width 50%</caption>
<thead>
<tr>
<th>thead th</th>
<th>thead th</th>
<th>thead th</th>
</tr>
</thead>
<tbody>
<tr>
<td>tbody tr td</td>
<td>tbody tr td</td>
<td>tbody tr td</td>
</tr>
<tr>
<td>Neo damnum aliquam consequat.</td>
<td>Neo damnum aliquam consequat.</td>
<td>Neo damnum aliquam consequat. </td>
</tr>
<tr>
<td>Neo damnum aliquam consequat.</td>
<td>Neo damnum aliquam consequat. Neo damnum aliquam consequat.</td>
<td>Neo damnum aliquam consequat. Neo damnum aliquam consequat. Neo damnum aliquam consequat</td>
</tr>
</tbody>
</table>
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
<ul>
<li>Unordered list item</li>
<li>Unordered list item</li>
<li>Unordered list item</li>
<li>Unordered list item</li>
</ul>
<dl>
<dt>document term</dt>
<dd>document definition</dd>
<dt>document term</dt>
<dd>document definition</dd>
</dl>
<form id="form" method="post" accept-charset="UTF-8" action="/action">
<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" type="text" value="input" size="50" maxlength="12"/>
</div>
<div>
</div>
<label>label for Textarea</label>
<textarea id="text" rows="5" cols="50"></textarea>
</div>
<div>
<label>label for Filefield</label>
<input name="files" type="file" size="50" />
</div>
<div>
<input name="button" type="button" value="Button" />
</div>
</fieldset>
</form>
<hr />Drupal Version:
Drupal Development:
Drupal:
Social Tags:
Comments
#2 Nice idea. Maybe it could be
Nice idea.
Maybe it could be nice to have something similar for theming content in the blocks (left/right sidebar …)
#4 Awesome !
Exellent Idea indeed!
#5 It’s worth noting that you
It’s worth noting that you need to select “Full HTML” as the input format for this to be of use in Drupal :)
#6 Thanks for sharing this
Thanks for sharing this, I’m definitely going to use it!
It’s got me thinking about what a standard set of test pages might look like. For example, I’ve seen margins become problematic when ordered lists go into double digits (i.e. 10 or more), and blockquotes go off when they contain more than one paragraph. It strikes me that for basic theming you’ve hit a good balance. For “stress testing” I can think of a number of variations I’d want to play around with.
Something to experiment with on the next probject!
#7 Maybe make a module out of it?
I really like the concept and thought that I should use it in a new project. Although I wanted the test to go into my version control system so that everyone else in the team can test and contribute to the markup as well - so I quickly created a small module incorporating your markup and a menu callback and uploaded it to GitHub - I hope that is okay?
http://github.com/voxpelli/drupal-designreview/tree/master
If such a module is extended with more design overviews similar to this cheat sheet then perhaps it can be of similar use to a themer as the code review module is to module creators. Right now it’s really really basic though…
#1 Thanks! That’s a really smart
Thanks! That’s a really smart idea! Can’t believe I never thought of doing it :)