What is this page?

#wrapper - Style Guide

Lists:

Unordered List

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. class="type-A"
    2. subitem 2
    3. subitem 3
  4. Linked Item
  5. li.read-more

Definition List

Coffee
Black hot drink
Milk
White cold drink

Unordered List .bulleted_list

Top

Headers:

Header 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vestibulum odio eget velit. Vivamus eu elit ut nunc sollicitudin auctor. Etiam volutpat. Donec ac eros. Nunc ornare molestie dolor. Phasellus nulla nisi, mollis non, euismod id, bibendum eu, tellus. Donec elit. Suspendisse potenti. Aliquam lectus neque, varius sed, laoreet in, rutrum vitae, leo. Nam libero felis, venenatis nec, rhoncus at, fermentum quis, tortor.

Header 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vestibulum odio eget velit. Vivamus eu elit ut nunc sollicitudin auctor. Etiam volutpat. Donec ac eros. Nunc ornare molestie dolor. Phasellus nulla nisi, mollis non, euismod id, bibendum eu, tellus. Donec elit. Suspendisse potenti. Aliquam lectus neque, varius sed, laoreet in, rutrum vitae, leo. Nam libero felis, venenatis nec, rhoncus at, fermentum quis, tortor.

Header 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vestibulum odio eget velit. Vivamus eu elit ut nunc sollicitudin auctor. Etiam volutpat. Donec ac eros. Nunc ornare molestie dolor. Phasellus nulla nisi, mollis non, euismod id, bibendum eu, tellus. Donec elit. Suspendisse potenti. Aliquam lectus neque, varius sed, laoreet in, rutrum vitae, leo. Nam libero felis, venenatis nec, rhoncus at, fermentum quis, tortor.

Header 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vestibulum odio eget velit. Vivamus eu elit ut nunc sollicitudin auctor. Etiam volutpat. Donec ac eros. Nunc ornare molestie dolor. Phasellus nulla nisi, mollis non, euismod id, bibendum eu, tellus. Donec elit. Suspendisse potenti. Aliquam lectus neque, varius sed, laoreet in, rutrum vitae, leo. Nam libero felis, venenatis nec, rhoncus at, fermentum quis, tortor.

Header 5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vestibulum odio eget velit. Vivamus eu elit ut nunc sollicitudin auctor. Etiam volutpat. Donec ac eros. Nunc ornare molestie dolor. Phasellus nulla nisi, mollis non, euismod id, bibendum eu, tellus. Donec elit. Suspendisse potenti. Aliquam lectus neque, varius sed, laoreet in, rutrum vitae, leo. Nam libero felis, venenatis nec, rhoncus at, fermentum quis, tortor.

Header 6

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vestibulum odio eget velit. Vivamus eu elit ut nunc sollicitudin auctor. Etiam volutpat. Donec ac eros. Nunc ornare molestie dolor. Phasellus nulla nisi, mollis non, euismod id, bibendum eu, tellus. Donec elit. Suspendisse potenti. Aliquam lectus neque, varius sed, laoreet in, rutrum vitae, leo. Nam libero felis, venenatis nec, rhoncus at, fermentum quis, tortor.

Top

Tables:

Please Note:

  1. Standard tables must have class="norm" to look like the below table.
  2. Flexigrid tables do not need an extra class.
<caption></caption>
(<thead>)ID Name Email Phone Number (</thead>)
<tfoot></tfoot>
ID Chad Gowan chad@allspeeds.net 123.456.7890
ID tr.class="color1" Chad Gowan chad@allspeeds.net 123.456.7890
ID tr.class="color2" Chad Gowan chad@allspeeds.net 123.456.7890
ID tr.class="red color1" Chad Gowan chad@allspeeds.net 123.456.7890
ID tr.class="highlight color2" Chad Gowan chad@allspeeds.net 123.456.7890
ID tr.class="active color1" Chad Gowan chad@allspeeds.net 123.456.7890
ID tr.class="inactive color2" Chad Gowan chad@allspeeds.net 123.456.7890
ID tr.class="ctrlHover color1" Chad Gowan chad@allspeeds.net 123.456.7890
Top

Quotations:

Inline Quote (<q>):

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vestibulum odio eget velit. Vivamus eu elit ut nunc sollicitudin auctor. Etiam volutpat. Donec ac eros. Nunc ornare molestie dolor. Phasellus nulla nisi <q></q>, mollis non, euismod id, bibendum eu, tellus. Donec elit. Suspendisse potenti. Aliquam lectus neque, varius sed, laoreet in, rutrum vitae, leo. Nam libero felis, venenatis nec, rhoncus at, fermentum quis, tortor.

Blockquote:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vestibulum odio eget velit. Vivamus eu elit ut nunc sollicitudin auctor. Etiam volutpat. Donec ac eros. Nunc ornare molestie dolor. Phasellus nulla nisi, mollis non, euismod id, bibendum eu, tellus. Donec elit. Suspendisse potenti. Aliquam lectus neque, varius sed, laoreet in, rutrum vitae, leo. Nam libero felis, venenatis nec, rhoncus at, fermentum quis, tortor.

Structured Blockquote (ul):

Blockquote em.leader:

Top

Forms:

Standard form layout example below. Piece together the form by utilizing copy and paste and replacing the values of the attributes. Special Thanks to Uni-form by Dragan Babic - http://sprawsm.com/uni-form/.

1. New Form:

<form id="sample_form" name="sample_form" enctype="multipart/form-data" method="post" action="#sample_form" class="uniForm">
	<input name="hidden" id="hidden" value="yes" type="hidden" class="hidden" />
			<fieldset class="inlineLabels">
				<legend>Class .inlineLabels</legend>
			</fieldset>
</form>

2. Success or Error Messages (Listing):

<div class="success"><h3>Success messages format.<h3/></div>

<div class="errors">
	<h3>Ooops! Your error message title</h3>
	<ol>
		<li><a href="#error1" title="Jump to error">Error number one</a></li>
		<li><a href="#error2" title="Jump to error">Error number two</a></li>
	</ol>
</div>

3. textInput with formHint:

<div class="ctrlHolder">
	<label for="email_addy" class="required"><em>*</em> Email address</label>
	<input name="email_addy" id="email_addy" value="" size="35" maxlength="50" tabindex="1" type="text" class="textInput" />
	<p class="formHint">Note: Your email is your username. Use a valid email address.</p>
</div>

4. textarea with Error and formHint:

<div class="ctrlHolder errorMsg">
	<p id="error1" class="errorField"><strong>Description of your error</strong></p>
	<label for="skills_interests" class="required"><em>*</em> Skills and interests</label>
	<textarea name="skills_interests" id="skills_interests" rows="25" cols="25" tabindex="6"></textarea>
	<p class="formHint">Enter your skills and interests by terms separated with commas (E.g. computers, GTD, running). Will be presented on your profile as a <a href="http://en.wikipedia.org/wiki/Tag_cloud" title="Definition of a tag cloud on Wikipedia">tag cloud</a>.</p>
</div>

5. fileUpload with formHint:

		
<div class="ctrlHolder">
	<label for="new_image" class="required"><em>*</em> Upload Picture</label>
	<input name="new_image" id="new_image" size="30" tabindex="8" type="file" class="fileUpload" />
	<p class="formHint">Your image will be resized to 80 x 80 pixels.</p>
</div>

6. checkbox(es) - Multiple/Single:

			
<div class="ctrlHolder">
	<p class="label required"><em>*</em> Display options:</p>
	<label for="display_email" class="inlineLabel"><input name="display_email" id="display_email" value="1" tabindex="9" type="checkbox" class="checkbox" /> Display my email</label>
	<label for="display_photo" class="inlineLabel"><input name="display_photo" id="display_photo" value="1" tabindex="10" type="checkbox" class="checkbox" /> Display my image</label>
</div>

<div class="ctrlHolder">
	<label for="checkbox_ex" class="inlineLabel required">
	<input name="checkbox_ex" id="checkbox_ex" value="yes" tabindex="11" type="checkbox" class="checkbox" />
	<em>*</em> Check here if you have seen an example of every form element.</label>
</div>

7. radio Buttons:

				
<div class="ctrlHolder">
	<span class="label required"><em>*</em> Sweeter than a plate of yams with extra syrup?</span>
	<label for="radio_yes" class="inlineLabel">
	<input name="radio" id="radio_yes" value="yes" tabindex="16" type="radio" class="radio" />Yes</label>
	<label for="radio_no" class="inlineLabel">
	<input name="radio" id="radio_no" value="no" tabindex="16" type="radio" class="radio" />No</label>
	<label for="radio_maybe" class="inlineLabel">
	<input name="radio" id="radio_maybe" tabindex="5" value="no" class="radio" type="radio" />Maybe?</label>
</div>

8. selectInput:

<div class="ctrlHolder">
	<label for="optgroup" class="required"><em>*</em> Optgroup:</label>
	<select name="optgroup" id="optgroup" tabindex="15" class="selectInput">
		<optgroup label="Swedish Cars">
			<option value="volvo">Volvo</option>
			<option value="saab">Saab</option>
		</optgroup>
		<optgroup label="German Cars">
			<option value="mercedes">Mercedes</option>
			<option value="audi">Audi</option>
		</optgroup>
	</select>
</div>

9. Buttons:

<div class="buttonHolder">
	<button type="reset">Filter</button>
	<button type="reset" class="redo">Reset</button>

	<button type="reset" class="negative delete">Delete</button>
	<button type="submit" class="positive check">Submit</button>
</div>

<div class="buttonHolder">	
	<a href="/password/reset/">Filter</a>
	<a href="/password/reset/" class="redo">Reset</a>

	<a href="#" class="negative delete">Delete</a>
	<a href="#" class="positive check">Submit</a>
</div>
Class .inlineLabels

Informative Message format.

  1. Did you know...
  2. This is a good idea...

Success messages format.

  1. Well done
  2. Good job

Uh oh! We may have an issue.

  1. Issue number one
  2. Warning number two

Ooops! Your error message title

  1. Error number one
  2. Error number two

* Indicates a required field

Note: Your email is your username. Use a valid email address.

Description of your error

Enter your skills and interests by terms separated with commas (E.g. computers, GTD, running). Will be presented on your profile as a tag cloud.

Used on the the messageboard.

Your image will be resized to 80 x 80 pixels.

* Display options:

* Sweeter than a plate of yams with extra syrup?
* If you had teeth in your mouth would it be sound volume?

Taken from a quote of Jimmy Jibberish.

class .blockLabels

Description of your error

Default is United States.

E.g.: La Messa Drive 1234

Without the area code

Gender

* If you had teeth in your mouth would it be sound volume?

Taken from a quote of Jimmy Jibberish.

Tell us something about yourself in 300 words or less.

To select multiple items, press and hold Ctrl and click multiple options.

Buttons:

Thanks to Kevin Hale at Particle Tree.

Anchors:

Filter Reset Delete Submit
Top

Phrase Elements:

(<sup></sup>)
[1] Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
(<sub></sub>)
Donec acsubscript eros.
(<abbr></abbr>)
etc.
(<acronym></acronym>)
WWW
(<i></i>)
Italic text
(<em></em>)
Emphasized text
(<small></small>)
Small text
(<big></big>)
Big text
(<b></b>)
Bold text
(<strong></strong>)
Strong text
(<s></s>) or (<strike></strike>)
A new version is not yet available.
(<dfn></dfn>)
Definition term
(<code></code>)
This is code in a sentence.
(<cite></cite>)
Citation
(<del></del>) and (<ins></ins>)
a dozen is 20 12 pieces!
Top

Block Elements

(<pre></pre>)
	This text is
	in a fixed-pitch
	font, and it preserves
	both      spaces and
	line breaks
(<address></address>)
End User
123 Test St.
Austin, TX 78729
Top

Anchors

Please Note:

Adding icon class will modify the element to make an icon and will display no text, only the icon image.

A HREF
A.external
A.mailto
A.rss
A.check
A.accept
A.delete
A.edit
A.add
A.plus
A.minus
A.subtract
A.up
A.down
A.zoom
A.redo
A.warn
A.help
A.info
A.chat
A.cal
A.bullet
A.doc
A.call
A.home
A.print
A.dir
A.security
A.clock

A.vcard A.read-more

A.clouds A.cloudy A.rain A.lightning A.snow A.sun

Top

Images:

guy
sign

<div class="capimg
fl-left">
This is a caption.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Donec vestibulum odio eget velit. Vivamus eu elit ut nunc sollicitudin auctor. Etiam volutpat. Donec ac eros. Nunc ornare molestie dolor. Phasellus nulla nisi, mollis non, euismod id, bibendum eu, tellus. Donec elit. Suspendisse potenti. Aliquam lectus neque, varius sed, laoreet in, rutrum vitae, leo. Nam libero felis, venenatis nec, rhoncus at, fermentum quis, tortor.

Top

Boxes and Positioning:

class="sbox three-fourths_box fl-left"

class="sbox quarter_box fl-left"

class="sbox quarter_box fl-left"

class="sbox quarter_box fl-left"

class="sbox quarter_box fl-left"

class="sbox quarter_box fl-left"

Title

class="sbox half_box fl-left"

Title

class="sbox half_box fl-left"

Title

class="sbox half_box centered"

Title

class="sbox full_box"

[1] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. * Donec vestibulum odio eget velit. Vivamus eu elit ut nunc sollicitudin auctor. Etiam volutpat. $20.00 Donec ac eros. Nunc ornare molestie dolor. Phasellus nulla nisi, mollis non, euismod id, bibendum eu, tellus. Donec elit. Suspendisse potenti. Aliquam lectus neque, varius sed, laoreet in, rutrum vitae, leo. Nam libero felis, venenatis nec, rhoncus at, fermentum quis, tortor.

Top

Step Menus:

Thanks to Cody Lindley.

5 step (showing each state of the step menu)

4 step (showing each state of the step menu)

3 step (showing each state of the step menu)

2 step (showing each state of the step menu)

Top

Tooltips

Demos, development, and variables can be found here: jQuery Cluetip.

Top

Tabs

More examples: jQuery UI Tabs/ Tabs 3

First tab is active by default:

$('.tabbed > ul').tabs();

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Top

Pagination

Top

Calendars

Top

Dialog/Thickbox

Top