XE : User Interface Library

The library is suitable for use in the XE admin page. But the end-user pages are also available.

Naming Rule

  1. Make 'id, class' name must be 'camelCase' format. ex) xpressEngine
  2. Make 'id, class' name must be semantic allow human understandable. ex) content, comment, trackback
  3. If 'id, class' name is too long, can be abbreviated to 3-4 characters. Subtracting the vowel is easy to making abbreviation. ex) description=dsc, descriptionToggle=dscTg
  4. 'class' is recommended to use than 'id'. ex) '.xe' is recommended than '#xe'

CSS Reset

Override browser-supplied HTML styles should be minimized. The default font size is 12px.

/* Element Reset */
body,table,input,textarea,select,button{font-family:Tahoma,Geneva,sans-serif;font-size:12px;color:#333}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block}
button,input[type=submit],input[type=reset],input[type=button]{cursor:pointer;overflow:visible}
img{border:0}
p{line-height:1.5}

Layout

The following HTML markup for the layout structure is recommended.

Preview

This example view is not compulsory. Suitable as an example.

.xe
.header

.body

.content
.section
.article
.footer

XHTML

  • div.xe
    • div.header
      • div.nav
    • div.body
      • div.nav
      • div.content
        • div.section or div.article
      • div.aside
    • div.footer
<div class="xe">
	<div class="header">
		<div class="nav">.header .nav</div>
	</div>
	<div class="body">
		<div class="nav">.body .nav</div>
		<div class="content">
			<div class="section">.content .section</div>
			<div class="article">.content .article</div>
		</div>
		<div class="aside">.body .aside</div>
	</div>
	<div class="footer">.footer</div>
</div>

CSS

  • .xe
    • .header
      • .nav
      .body
      • .nav
      • .content
        • .section or .article
        .aside
      .footer
/* Layout */
.xe{}
.header{}
.header .nav{}
.body{}
.body .nav{}
.content{}
.content .section{}
.content .article{}
.body .aside{}
.footer{}

Section/Heading

Preview

Heading element and section element must always be matched. h1, h2, h3 is recommended for use. But h4, h5, h6 is not recommended.

h1: Page Title / Content Title

Paragraph for h1 content.

h2: Content Sub Title

Paragraph for h2 content.

h3: Content Sub Title

Paragraph for h3 content.

h4: Content Sub Title

Paragraph for h4 content.

XHTML

  • div.section
    • h1.h1
    • p
    • div.section
      • h2.h2
      • p
      • div.section
        • h3.h3
        • p
        • div.section
          • h4.h4
          • p
<div class="section">
	<h1 class="h1">h1: Page Title / Content Title</h1>
	<p>Paragraph for h1 content.</p>
	<div class="section">
		<h2 class="h2">h2: Content Sub Title</h2>
		<p>Paragraph for h2 content.</p>
		<div class="section">
			<h3 class="h3">h3: Content Sub Title</h3>
			<p>Paragraph for h3 content.</p>
			<div class="section">
				<h4 class="h4">h4: Content Sub Title</h4>
				<p>Paragraph for h4 content.</p>
			</div>
		</div>
	</div>
</div>

CSS

/* Section & Heading */
.section{margin:1em 0;padding:0;border:0}
.h1, .h2, .h3, .h4{position:relative;border-bottom-style:solid;border-bottom-color:#ccc;zoom:1}
.h1{border-bottom-width:4px;font-size:24px}
.h2{border-bottom-width:3px;font-size:20px}
.h3{border-bottom-width:2px;font-size:16px}
.h4{border-bottom-width:1px;font-size:12px}

Table

Every table must exist header cell element necessarily. The 'caption, tfoot' element is optional. But 'caption' element is recommended, and 'thead, tbody' element must be exist.

CSS

/* Table */
.table{margin:1em 0}
.table table{width:100%;border:0;border-collapse:collapse;border-top:2px solid #ccc}
.table caption{padding:8px 0;font-weight:bold;text-align:left;line-height:32px}
.table caption:after{content:"";display:block;clear:both}
.table caption a{font-weight:normal}
.table caption em{float:right;font-style:normal;font-weight:normal;color:#e00;margin-left:1em}
.table caption strong{color:#e00}
.table caption .side{float:right;font-weight:normal;margin-left:1em}
.table th,.table td{border:0;padding:8px;vertical-align:top;text-align:left;border-bottom:1px solid #ddd;white-space:nowrap}
.table th{background:#f8f8f8}
.table thead th{border-bottom:1px solid #999}
.table tfoot td{font-weight:bold;background:#f8f8f8}
.table.even tbody tr:nth-of-type(even) td{background-color:#fafafa}
.table input[type=text]{margin:-1px 0 -3px 0;vertical-align:middle}
.table img{vertical-align:middle}
.table .title,
.table .text{white-space:normal}
.table .h1 + table,
.table .h2 + table,
.table .h3 + table,
.table .h4 + table,
.h1 + .table table,
.h2 + .table table,
.h3 + .table table,
.h4 + .table table{border-top:0}

Preview

Top & Left header. Emphasize Text. Sort by Date | Name
th th th
th td td
th td td
th td td
th td td
th td td 
<div class="table">
	<table width="100%" border="1" cellspacing="0">
		<caption>caption <em>Emphasize Text.</em> <span class="side">Sort by <a href="#">Date</a> | <a href="#">Name</a></span></caption>
		<thead>
			<tr>
				<th scope="col">th</th>
				<th scope="col">th</th>
				<th scope="col">th</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<th scope="row">th</th>
				<td>td</td>
				<td>td</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<th scope="row">th</th>
				<td>td</td>
				<td>td</td>
			</tr>
			<tr>
				<th scope="row">th</th>
				<td>td</td>
				<td>td</td>
			</tr>
			<tr>
				<th scope="row">th</th>
				<td>td</td>
				<td>td</td>
			</tr>
			<tr>
				<th scope="row">th</th>
				<td>td</td>
				<td>td</td>
			</tr>
		</tbody>
	</table>
</div>
Top header + even tr background.Emphasize Text. Sort by Date | Name
th th th
th td td
td td td
td td td
td td td
td td td 
<div class="table even">
	<table width="100%" border="1" cellspacing="0">
		<caption>caption <em>Emphasize Text.</em> <span class="side">Sort by <a href="#">Date</a> | <a href="#">Name</a></span></caption>
		<thead>
			<tr>
				<th scope="col">th</th>
				<th scope="col">th</th>
				<th scope="col">th</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td>th</td>
				<td>td</td>
				<td>td</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<td>td</td>
				<td>td</td>
				<td>td</td>
			</tr>
			<tr>
				<td>td</td>
				<td>td</td>
				<td>td</td>
			</tr>
			<tr>
				<td>td</td>
				<td>td</td>
				<td>td</td>
			</tr>
			<tr>
				<td>td</td>
				<td>td</td>
				<td>td</td>
			</tr>
		</tbody>
	</table>
</div>
Left header. Emphasize Text. Sort by Date | Name
th td td
th td td
th td td
th td td
th td td 
<div class="table">
	<table width="100%" border="1" cellspacing="0">
		<caption>caption <em>Emphasize Text.</em> <span class="side">Sort by <a href="#">Date</a> | <a href="#">Name</a></span></caption>
		<tfoot>
			<tr>
				<th scope="row">th</th>
				<td>td</td>
				<td>td</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<th scope="row">th</th>
				<td>td</td>
				<td>td</td>
			</tr>
			<tr>
				<th scope="row">th</th>
				<td>td</td>
				<td>td</td>
			</tr>
			<tr>
				<th scope="row">th</th>
				<td>td</td>
				<td>td</td>
			</tr>
			<tr>
				<th scope="row">th</th>
				<td>td</td>
				<td>td</td>
			</tr>
		</tbody>
	</table>
</div>

Form

CSS

/* Form */
.form{margin:0;padding:0}
.form,.form label,.form input,.form textarea,.form select,.form button{font-size:12px}
.form fieldset{margin:0 0 2em 0;padding:0;border:0}
.form em{font-style:normal;color:#e00}
.form label{margin:0 10px 0 0}
.form input[type=checkbox]+label,.form input[type=radio]+label,.form input[type=file]{cursor:pointer}
.form ul{position:relative;margin:0;padding:0;list-style:none;border-top:2px solid #999;border-bottom:1px solid #ccc;zoom:1}
.form li{list-style:none;border:1px solid #ddd;border-left:0;border-right:0;margin:-1px 0;padding:8px 0;vertical-align:top;zoom:1}
.form li:first-child{border-top:0}
.form li>label:first-child{display:block;font-weight:bold}
.form li label em{font-weight:normal}
.form input[type=text],.form input[type=password],.form input[type=file],textarea{position:relative;width:280px;margin:2px 10px 2px 0;border:1px solid #b7b7b7;border-right-color:#e1e1e1;border-bottom-color:#e1e1e1;background:transparent}
.form input[type=text],.form input[type=password],.form input[type=file]{height:22px;line-height:22px;vertical-align:middle;padding:0 4px}
.form input[type=checkbox],.form input[type=radio]{margin:0;padding:0;width:13px;height:13px;vertical-align:middle}
.form *[disabled=disabled]{background:#ddd;text-shadow:1px 1px 0 #fff}
.form textarea{padding:3px 4px;vertical-align:top}
.form span.desc{line-height:22px;vertical-align:middle}
.form p.desc{margin:.25em 0;line-height:1.4}
.form .q{font-weight:bold;color:#333;margin:0 0 5px 0}
.form .a{margin:0 0 5px 0}
.form .h1 + ul,
.form .h2 + ul,
.form .h3 + ul,
.form .h4 + ul{border-top:0}

JS

jQuery(function($){
	// Form Label Overlapping
	var overlapLabel = $('.form li').find('>:text,>:password,>textarea').prev('label');
	var overlapInput = overlapLabel.next(':text,:password,textarea');
	overlapLabel.css({'position':'absolute','top':'15px','left':'5px'}).parent().css('position','relative');
	overlapInput
		.focus(function(){
			$(this).prev(overlapLabel).css('visibility','hidden');
		})
		.blur(function(){
			if($(this).val() == ''){
				$(this).prev(overlapLabel).css('visibility','visible');
			} else {
				$(this).prev(overlapLabel).css('visibility','hidden');
			}
		})
		.change(function(){
			if($(this).val() == ''){
				$(this).prev(overlapLabel).css('visibility','visible');
			} else {
				$(this).prev(overlapLabel).css('visibility','hidden');
			}
		})
		.blur();
	// Input Checked
	var inputRC = $('input[type=radio], input[type=checkbox]');
	inputRC.change(function(){
		var myName = $(this).attr('name');
		$('.form .tgForm').hide();
		inputRC.filter('[name='+myName+']').not(':checked').next('label').css('fontWeight','normal');
		inputRC.filter(':checked').next('label').css('fontWeight','bold').next('.tgForm').show();
		inputRC.parent().find(':not(:checked)').next('label').next('.tgForm').hide();
	});
	inputRC.change();
	// Input Check All
	var formThCheck = $('.form th>:checkbox');
	formThCheck.change(function(){
		var formTdCheck = $(this).parents('table').find('td>:checkbox');
		if($(this).is(':checked')){
			formTdCheck.attr('checked','checked').change();
		} else {
			formTdCheck.removeAttr('checked').change();
		}
	});
	formThCheck.change();
});

input type="text" + label basic

  • ID must have to 3-20 alphabetic or numeric characters and the first letter should be alphabetic character.

  • Requires 6-20 characters.

  • Please enter your password once more.

  • Requires 2-20 characters.

  • Requires 2-20 characters.

  • Required to change your password and Find.

  • '-' Include or not does not matter. 

<form action="#" method="post" class="form">
	<fieldset>
		<ul>
			<li>
				<p class="q"><label for="id">ID <em>*</em></label></p>
				<p class="a">
					<input name="" type="text" id="id" style="width:200px" /> 
					<button type="button">Duplication Check</button>
				</p>
				<p class="desc">ID must have to <em>3-20</em> alphabetic or numeric characters and the first letter should be alphabetic character.</p>
			</li>
			<li>
				<p class="q"><label for="pw1">Password <em>*</em></label></p>
				<p class="a">
					<input name="" type="password" id="pw1" style="width:200px" />
					<span class="desc">Requires <em>6-20</em> characters.</span>
				</p>
			</li>
			<li>
				<p class="q"><label for="pw2">Password Confirm <em>*</em></label></p> 
				<p class="a">
					<input name="" type="password" id="pw2" style="width:200px" />
					<span class="desc">Please enter your password once more.</span>
				</p>
			</li>
			<li>
				<p class="q"><label for="name">Name <em>*</em></label></p> 
				<p class="a">
					<input name="" type="text" id="name" style="width:200px" />
					<span class="desc">Requires <em>2-20</em> characters.</span>
				</p>
			</li>
			<li>
				<p class="q"><label for="nick">Nickname <em>*</em></label></p> 
				<p class="a">
					<input name="" type="text" id="nick" style="width:200px" />
					<span class="desc">Requires <em>2-20</em> characters.</span>
				</p>
			</li>
			<li>
				<p class="q"><label for="email">Email <em>*</em></label></p> 
				<p class="a">
					<input name="" type="text" id="email" style="width:200px" />
					<span class="desc">Required to change your password and Find.</span>
				</p>
			</li>
			<li>
				<p class="q"><label for="phone">Phone</label></p> 
				<p class="a">
					<input name="" type="text" id="phone" style="width:200px" />
					<span class="desc">'-' Include or not does not matter.</span>
				</p>
			</li>
		</ul>
	</fieldset>
</form>

input type="text" + label overlapping

  • ID must have to 3-20 alphabetic or numeric characters and the first letter should be alphabetic character.

  • Requires 6-20 characters.
  • Please enter your password once more.
  • Requires 2-20 characters.
  • Requires 2-20 characters.
  • Required to change your password and Find.
  • '-' Include or not does not matter. 
<form action="#" method="post" class="form">
	<fieldset>
		<ul>
			<li>
				<label for="id">ID <em>*</em></label> 
				<input name="" type="text" id="id" style="width:200px" /> 
				<button type="button">Duplication Check</button>
				<p class="desc">ID must have to <em>3-20</em> alphabetic or numeric characters and the first letter should be alphabetic character.</p>
			</li>
			<li>
				<label for="pw1">Password <em>*</em></label> 
				<input name="" type="password" id="pw1" style="width:200px" />
				<span class="desc">Requires <em>6-20</em> characters.</span>
			</li>
			<li>
				<label for="pw2">Password Confirm <em>*</em></label> 
				<input name="" type="password" id="pw2" style="width:200px" />
				<span class="desc">Please enter your password once more.</span>
			</li>
			<li>
				<label for="name">Name <em>*</em></label> 
				<input name="" type="text" id="name" style="width:200px" />
				<span class="desc">Requires <em>2-20</em> characters.</span>
			</li>
			<li>
				<label for="nick">Nickname <em>*</em></label> 
				<input name="" type="text" id="nick" style="width:200px" />
				<span class="desc">Requires <em>2-20</em> characters.</span>
			</li>
			<li>
				<label for="email">Email <em>*</em></label> 
				<input name="" type="text" id="email" style="width:200px" />
				<span class="desc">Required to change your password and Find.</span>
			</li>
			<li>
				<label for="phone">Phone</label>
				<input name="" type="text" id="phone" style="width:200px" />
				<span class="desc">'-' Include or not does not matter.</span>
			</li>
		</ul>
	</fieldset>
</form>

input type="radio|checkbox"

  • Name or nickname, what do you want to display?

  • What are your interests?

<form action="#" method="post" class="form">
	<fieldset>
		<ul>
			<li>
				<p class="q">Name or nickname, what do you want to display?</p>
				<p class="a">
					<input name="authorName" type="radio" id="useName" checked="checked" /> 
					<label for="useName">Name</label> 
					<input name="authorName" type="radio" id="useNick" /> 
					<label for="useNick">Nickname</label>
					<span class="tgForm">
						<label for="nickname">What's your nickname?</label> <input id="nickname" value="" />
					</span>
				</p>
			</li>
			<li>
				<p class="q">What are your interests?</p>
				<p class="a">
					<input name="interest" type="checkbox" id="humanities" checked="checked" /> 
					<label for="humanities">Humanities</label> 
					<input name="interest" type="checkbox" id="science" /> 
					<label for="science">Science</label>
					<span class="tgForm">
						<label for="whatKindOf">What kind of?</label> <input id="whatKindOf" value="" />
					</span>
				</p>
			</li>
		</ul>
	</fieldset>
</form>

select

<form action="#" method="post" class="form">
	<fieldset>
		<ul>
			<li>
				<p class="q"><label for="select">Select > Optgroup > Option</label></p>
				<p class="a">
					<select id="select">
						<optgroup label="Optgroup">
							<option value="">Option</option>
							<option value="">Option</option>
						</optgroup>
						<optgroup label="Optgroup">
							<option value="">Option</option>
							<option value="">Option</option>
						</optgroup>
					</select>
				</p>
			</li>
		</ul>
	</fieldset>
</form>

input type="file"

<form action="#" method="post" class="form">
	<fieldset>
		<ul>
			<li>
				<p class="q"><label for="userProfile">User Profile</label></p>
				<p class="a"><input name="" type="file" id="userProfile" /></p>
			</li>
		</ul>
	</fieldset>
</form>

textarea + label basic

<form action="#" method="post" class="form">
	<fieldset>
		<ul>
			<li>
				<p class="q"><label for="signature">Signature: <em>If you create a signature it will be displayed at the bottom of the posts.</em></label></p>
				<p class="a"><textarea rows="5" cols="50" id="signature" style="width:600px"></textarea></p>
			</li>
		</ul>
	</fieldset>
</form>

textarea + label overlapping

<form action="#" method="post" class="form">
	<fieldset>
		<ul>
			<li>
				<label for="signature">Signature: <em>If you create a signature it will be displayed at the bottom of the posts.</em></label>
				<textarea rows="5" cols="50" id="signature" style="width:600px"></textarea>
			</li>
		</ul>
	</fieldset>
</form>

table + checkbox : check all

Title
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. 
<form action="#" method="post" class="form">
	<fieldset>
		<div class="table">
			<table width="100%" border="1" cellspacing="0">
				<thead>
					<tr>
						<th scope="col">Title</th>
						<th scope="col"><input type="checkbox" title="Check All" /></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>The quick brown fox jumps over the lazy dog.</td>
						<td><input type="checkbox" /></td>
					</tr>
					<tr>
						<td>The quick brown fox jumps over the lazy dog.</td>
						<td><input type="checkbox" /></td>
					</tr>
				</tbody>
			</table>
		</div>
	</fieldset>
</form>

Button

CSS

/* Button */
.btn{position:relative;display:inline-block;margin:2px;vertical-align:top}
.btn *{display:inline-block;padding:0 8px;font-size:12px;height:24px;line-height:22px;margin:0;font-weight:bold !important;color:#fff;text-decoration:none !important;border:1px solid;cursor:pointer;overflow:visible;border-radius:3px;box-shadow:inset 0 0 1px #fff;-moz-box-shadow:inset 0 0 1px #fff;-webkit-box-shadow:inset 0 0 1px #fff;background-color:#666;text-shadow:0 -1px 0 #333;zoom:1}
.btn a, 
.btn button[type=button]{border-color:#ccc;color:#333 !important;background:#eee -webkit-gradient(linear,0% 0%,0% 100%,from(#fff),to(#ddd));background:#eee -moz-linear-gradient(top,#fff,#ddd);background-color:#eee;text-shadow:1px 1px 0 #fff;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffffff, endColorStr=#dddddd)}
.btn input, .btn button[type=submit]{border-color:#666;background:#333 -webkit-gradient(linear,0% 0%,0% 100%,from(#777),to(#777),color-stop(0.5,#333),color-stop(0.5,#000));background:#333 -moz-linear-gradient(top,#777,#000);background-color:#333;color:#ffc;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#777777, endColorStr=#333333)}
.btn a{height:22px}
.btn.medium *{padding:0 12px;font-size:16px;height:30px;line-height:28px}
.btn.medium a{height:28px}
.btn.large *{padding:0 18px;font-size:22px;height:36px;line-height:34px}
.btn.large a{height:34px}

For inline

Recommended for use with inline content. Please use the 'a' element, if the button you must refer to other resources. Please use the 'input' element, if the button you must submit a form. Please use the 'button' element, if the button is not 'refer' or 'submit'.

anchor/앵커 // If there are two or more buttons in a row, you have to use this.

<a href="#">anchor/앵커</a>
<button type="button">button/버튼</button>
<input type="submit" value="submit/서밋" />

anchor/앵커 // If there are only one buttons in a row, you can use this.

<span class="btn"><a href="#">anchor/앵커</a></span> 
<span class="btn"><button type="button">button/버튼</button></span> 
<span class="btn"><input type="submit" value="submit/서밋" /></span>

For section or fieldset

Recommended for use with section or fieldset content. Please use the 'a' element, if the button you must refer to other resources. Please use the 'input' element, if the button you must submit a form. Please use the 'button' element, if the button is not 'refer' or 'submit'.

anchor/앵커 // Do not use this inline.

<span class="btn medium"><a href="#">anchor/앵커</a></span> 
<span class="btn medium"><button type="button">button/버튼</button></span> 
<span class="btn medium"><input type="submit" value="submit/서밋" /></span>

For page

Recommended for use with full page content. Once in the page footer is better to use. Please use the 'a' element, if the button you must refer to other resources. Please use the 'input' element, if the button you must submit a form. Please use the 'button' element, if the button is not 'refer' or 'submit'.

anchor/앵커 // Do not use this inline.

<span class="btn large"><a href="#">anchor/앵커</a></span> 
<span class="btn large"><button type="button">button/버튼</button></span> 
<span class="btn large"><input type="submit" value="submit/서밋" /></span>

Portlet

CSS

/* Portlet */
.portlet{position:relative;border:1px solid #e9e9e9;margin:1em 0;padding:0;background:#fff;zoom:1;overflow:hidden;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}
.portlet h2, .portlet h3{margin:0;padding:.5em 1em;font-size:14px;border:1px solid #fff;border-bottom:1px solid #e9e9e9;background:#f7f7f7;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px}
.portlet p{margin:1em 1.2em}
.portlet li{position:relative;padding-right:8em}
.portlet .lined{margin:1px;padding:0;list-style:none}
.portlet .lined li{padding:.5em 8em .5em 1em;border-top:1px solid #eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis}
.portlet .lined li:first-child{border:0}
.portlet .side{position:absolute;top:0;_top:1px;right:0;color:#666;background:#fff;padding:0 1em}
.portlet .lined .side{padding:.5em 1em}
.portlet .more{position:absolute;top:.5em;right:1em;text-decoration:none !important;color:#666}
.portlet .more span{color:#999}
.portlet .action{text-align:right;top:0;right:0;padding:.5em 1em .5em 3em;background:#fff;background:-webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)), color-stop(15%, #fff));background:-moz-linear-gradient(left, rgba(255,255,255,0) 0, rgba(255,255,255,1) 15%)}
.portlet .action a,
.portlet .action button{margin-left:1em}

JS

jQuery(function($){
	// Action
	var action = $('.portlet .action');
	var action_li = action.parent('li');
	action.hide().css({'position':'absolute'});
	action_li.mouseleave(function(){
		action.fadeOut(100);
		return false;
	});
	action_li.mouseenter(function(){
		action_li.mouseleave();
		$(this).find('>.action').fadeIn(100);
		return false;
	});
	action_li.find('*:first-child').focusin(function(){
		$(this).parent('li').mouseenter();
	});
});

Heading + Paragraph

Heading

First Paragraph

Second Paragraph

› MORE 
<div class="portlet">
	<h2>Heading</h2>
	<p>First Paragraph</p>
	<p>Second Paragraph</p>
	<a href="#" class="more"><span>›</span> MORE</a>
</div>

Heading + Unordered List Item

Heading

› MORE 
<div class="portlet">
	<h2>Heading</h2>
	<ul>
		<li>First Item <span class="side">2012-12-24</span></li>
		<li><a href="#">Second Item</a> <span class="side">2012-12-24</span></li>
	</ul>
	<a href="#" class="more"><span>›</span> MORE</a>
</div>

Heading + Ordered List Item

Heading

  1. First Item 2012-12-24
  2. Second Item 2012-12-24
› MORE 
<div class="portlet">
	<h2>Heading</h2>
	<ol>
		<li>First Item <span class="side">2012-12-24</span></li>
		<li><a href="#">Second Item</a> <span class="side">2012-12-24</span></li>
	</ol>
	<a href="#" class="more"><span>›</span> MORE</a>
</div>

Heading + Lined Item + Action Item

Heading

› MORE 
<div class="portlet">
	<h2>Heading</h2>
	<ul class="lined">
		<li>First Item <span class="side">2012-12-24</span> <span class="action"><a href="#">Edit</a> <a href="#">Spam</a> <a href="#">Trash</a></span></li>
		<li><a href="#">Second Item</a> <span class="side">2012-12-24</span> <span class="action"><a href="#">Edit</a> <a href="#">Spam</a> <a href="#">Trash</a></span></li>
	</ul>
	<a href="#" class="more"><span>›</span> MORE</a>
</div>

FAQ

Preview

FAQ

XHTML

<div class="faq">
	<div class="faqHeader">
		<h1>FAQ</h1>
		<button type="button" class="showAll">Show All</button>
	</div>
	<ul class="faqBody">
		<li class="article" id="a1">
			<p class="q"><a href="#a1">Q: First Question</a></p>
			<p class="a">A: First Answer</p>
		</li>
		<li class="article" id="a2">
			<p class="q"><a href="#a2">Q: Second Question</a></p>
			<p class="a">A: Second Answer</p>
		</li>
		<li class="article" id="a3">
			<p class="q"><a href="#a3">Q: Third Question</a></p>
			<p class="a">A: Third Answer</p>
		</li>
	</ul>
</div>

CSS

/* FAQ */
.faq{border-bottom:1px solid #ddd;margin:1em 0}
.faq .faqHeader{position:relative;zoom:1}
.faq .faqHeader .showAll{position:absolute;bottom:0;right:0;border:0;padding:0;overflow:visible;background:none;cursor:pointer}
.faq .faqBody{margin:0;padding:0}
.faq .faqBody .article{list-style:none}
.faq .q{margin:0;border-top:1px solid #ddd}
.faq .q a{display:block;padding:.5em 1em;text-align:left;font-weight:bold;background:#fafafa;color:#000;text-decoration:none !important}
.faq .q a:hover, .faq .q a:active, .faq .q a:focus{background:#f8f8f8}
.faq .a{margin:0;padding:1em;line-height:1.5}

JS

jQuery(function($){
	// Frequently Asked Question
	var article = $('.faq>.faqBody>.article');
	article.addClass('hide');
	article.find('.a').hide();
	article.eq(0).removeClass('hide');
	article.eq(0).find('.a').show();
	$('.faq>.faqBody>.article>.q>a').click(function(){
		var myArticle = $(this).parents('.article:first');
		if(myArticle.hasClass('hide')){
			article.addClass('hide').removeClass('show');
			article.find('.a').slideUp(100);
			myArticle.removeClass('hide').addClass('show');
			myArticle.find('.a').slideDown(100);
		} else {
			myArticle.removeClass('show').addClass('hide');
			myArticle.find('.a').slideUp(100);
		}
		return false;
	});
	$('.faq>.faqHeader>.showAll').click(function(){
		var hidden = $('.faq>.faqBody>.article.hide').length;
		if(hidden > 0){
			article.removeClass('hide').addClass('show');
			article.find('.a').slideDown(100);
		} else {
			article.removeClass('show').addClass('hide');
			article.find('.a').slideUp(100);
		}
	});
});

Graph

Horizontal Bar Graph

  • SUN0%
  • MON20%
  • TUE30%
  • WED40%
  • THU50%
  • FRI60%
  • SAT100%

XHTML

<div class="hGraph">  
	<ul> 
		<li><span class="gTerm">SUN</span><span class="gBar" style="width:0%"><span>0%</span></span></li> 
		<li><span class="gTerm">MON</span><span class="gBar" style="width:20%"><span>20%</span></span></li> 
		<li><span class="gTerm">TUE</span><span class="gBar" style="width:30%"><span>30%</span></span></li> 
		<li><span class="gTerm">WED</span><span class="gBar" style="width:40%"><span>40%</span></span></li> 
		<li><span class="gTerm">THU</span><span class="gBar" style="width:50%"><span>50%</span></span></li> 
		<li><span class="gTerm">FRI</span><span class="gBar" style="width:60%"><span>60%</span></span></li> 
		<li><span class="gTerm">SAT</span><span class="gBar" style="width:100%"><span>100%</span></span></li> 
	</ul> 
</div>

CSS

/* Horizontal Bar Graph */
.hGraph ul{margin:0 50px 0 50px;padding:1px 0 0 0;border:1px solid #ddd;border-top:0;border-right:0;list-style:none}
.hGraph li{position:relative;margin:10px 0;white-space:nowrap;vertical-align:top}
.hGraph .gTerm{position:absolute;width:40px;top:0;left:-50px;line-height:20px;text-align:right;font-weight:bold}
.hGraph .gBar{position:relative;display:inline-block;height:20px;border:1px solid #ccc;border-left:0;background:#e9e9e9}
.hGraph .gBar span{position:absolute;width:40px;line-height:20px;top:0;right:-50px;color:#767676}

Vertical Bar Graph

  • SUN0%
  • MON20%
  • TUE30%
  • WED40%
  • THU50%
  • FRI60%
  • SAT100%

XHTML

<div class="vGraph">  
	<ul> 
		<li><span class="gTerm">SUN</span><span class="gBar" style="height:0%"><span>0%</span></span></li> 
		<li><span class="gTerm">MON</span><span class="gBar" style="height:20%"><span>20%</span></span></li> 
		<li><span class="gTerm">TUE</span><span class="gBar" style="height:30%"><span>30%</span></span></li> 
		<li><span class="gTerm">WED</span><span class="gBar" style="height:40%"><span>40%</span></span></li> 
		<li><span class="gTerm">THU</span><span class="gBar" style="height:50%"><span>50%</span></span></li> 
		<li><span class="gTerm">FRI</span><span class="gBar" style="height:60%"><span>60%</span></span></li> 
		<li><span class="gTerm">SAT</span><span class="gBar" style="height:100%"><span>100%</span></span></li> 
	</ul> 
</div>

CSS

/* Vertical Bar Graph */
.vGraph{margin:1em 0;padding:20px 0}
.vGraph ul{margin:0;padding:0;height:200px;border:1px solid #ddd;border-top:0;border-right:0;list-style:none}
.vGraph ul:after{content:"";display:block;clear:both}
.vGraph li{float:left;display:inline;width:8%;height:100%;margin:0 3%;position:relative;text-align:center;white-space:nowrap}
.vGraph .gTerm{position:relative;display:inline-block;width:100%;height:20px;line-height:20px;margin:0 -100% -20px 0;padding:200px 0 0 0;vertical-align:bottom;font-weight:bold}
.vGraph .gBar{position:relative;display:inline-block;width:100%;margin:-1px 0 0 0;border:1px solid #ccc;border-bottom:0;background:#e9e9e9;vertical-align:bottom}
.vGraph .gBar span{position:absolute;width:100%;top:-20px;left:0}

Star Rating

별점: 6점

별점: 7점

별점: 10점

XHTML

<p><span class="starRating"><span style="width:60%">6점</span></span></p> 
<p><span class="starRating"><span style="width:70%">7점</span></span></p> 
<p><span class="starRating"><span style="width:100%">10점</span></span></p>

CSS

/* Star Rating */
.starRating, .starRating span{display:inline-block;height:14px;background:transparent url(img/iconStarRating.gif) no-repeat;overflow:hidden}
.starRating{width:79px;vertical-align:middle}
.starRating span{font-size:0;line-height:0;vertical-align:top;text-indent:-100px;*text-indent:0;background-position:0 -14px}

Progress

CSS

/* Progress */
.prgrs{white-space:nowrap;line-height:normal;vertical-align:middle}
.prgrs *{vertical-align:middle}
.prgrs .pBar{position:relative;display:inline-block;background:#e9e9e9;margin:0 5px 0 0}
.prgrs .pAction{display:inline-block;vertical-align:top;background:#99a6b6}
.prgrs .pNum{position:absolute;width:100%;left:0;top:0;text-align:center;text-shadow:1px 1px 0 #fff}
.prgrs.prgrsSmall{font-size:14px;line-height:14px}
.prgrs.prgrsSmall .pBar,
.prgrs.prgrsSmall .pAction,
.prgrs.prgrsSmall .pNum{height:16px;line-height:16px;font-size:11px}
.prgrs.prgrsMedium {font-size:24px;line-height:24px}
.prgrs.prgrsMedium .pBar,
.prgrs.prgrsMedium .pAction,
.prgrs.prgrsMedium .pNum{height:22px;line-height:22px;font-size:12px}
.prgrs.prgrsLarge{font-size:38px;line-height:38px}
.prgrs.prgrsLarge .pBar,
.prgrs.prgrsLarge .pAction,
.prgrs.prgrsLarge .pNum{height:34px;line-height:34px;font-size:14px}

Progress - Small Size

Installation: 123/1234 50% 

<p>
	<span class="prgrs prgrsSmall"> 
		<strong>Installation: </strong>
		<span class="pBar" style="width:200px">
			<span class="pAction" style="width:50%"></span>
			<span class="pNum">123/1234</span>
		</span> 
		<strong>50%</strong> 
	</span>
</p>

Progress - Medium Size

Installation: 123/1234 50% 

<p>
	<span class="prgrs prgrsMedium"> 
		<strong>Installation: </strong>
		<span class="pBar" style="width:300px">
			<span class="pAction" style="width:50%"></span>
			<span class="pNum">123/1234</span>
		</span> 
		<strong>50%</strong> 
	</span>
</p>

Progress - Large Size

Installation: 123/1234 50% 

<p>
	<span class="prgrs prgrsLarge"> 
		<strong>Installation: </strong>
		<span class="pBar" style="width:400px">
			<span class="pAction" style="width:50%"></span>
			<span class="pNum">123/1234</span>
		</span> 
		<strong>50%</strong> 
	</span>
</p>

Layer

Preview

Show me the first layer!

First Layer

Layer content. Test Anchor #1. Test Anchor #2.

Click background or press the ESC key when you close this window.

| Show me the second layer!

Second Layer

Layer content. Test Anchor #1. Test Anchor #2.

Click background or press the ESC key when you close this window.

HTML

<a href="#firstLayer" class="layerAnchor">Show me the first layer!</a>
<div class="layer" id="firstLayer">
	<h2 class="h2">First Layer</h2>
	<p>Layer content. Test Anchor <a href="#">#1</a>. Test Anchor <a href="#">#2</a>.</p>
	<p>Click background or press the ESC key when you close this window.</p>
</div>
|
<a href="#secondLayer" class="layerAnchor">Show me the second layer!</a>
<div class="layer" id="secondLayer">
	<h2 class="h2">Second Layer</h2>
	<p>Layer content. Test Anchor <a href="#">#1</a>. Test Anchor <a href="#">#2</a>.</p>
	<p>Click background or press the ESC key when you close this window.</p>
</div>

CSS

/* Layer */
.layer{position:absolute;background:#fff;padding:0 1em;*padding:1em;border:8px solid #ddd;z-index:2;zoom:1;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5pxbox-shadow:0 0 6px #666;-moz-box-shadow:0 0 6px #666;-webkit-box-shadow:0 0 6px #666;filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135, strength=5)}
.layer h2{margin-top:1em}
.layer ul, .layer ol, .layer .lined, .layer .table{margin-bottom:1em}
.layerClose{position:absolute;right:-8px;top:-8px;border:0;background:#ddd;padding:0;width:28px;height:28px;font-size:14px;font-weight:bold;cursor:pointer;color:#999;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}
.layerBlur{position:absolute;top:0;right:0;border:0;background:none;padding:0;width:1px;height:1px;overflow:hidden}

JS

jQuery(function($){
	// Layer
	var layerAnchor = $('.layerAnchor[href^=#]');
	var layer = $('.layer');
	var layerCloseHtml = '<button type="button" class="layerClose" title="Close this layer">X</button>';
	var layerBlurHtml = '<button type="button" class="layerBlur"></button>';
	layer.hide().prepend(layerCloseHtml);
	var layerClose = $('.layerClose');
	layerClose.eq(0).clone().appendTo(layer);
	layer.prepend(layerBlurHtml);
	var layerBlur = $('.layerBlur');
	layerBlur.eq(0).clone().appendTo(layer);
	layerAnchor
		.click(function(){
			$($(this).attr('href')).fadeToggle(200).find('>.layerClose:first').focus();
			return false;
		})
		.keypress(function(){
			if(event.keyCode != 32) return true;
			$(this).click();
			return false;
		});
	function closeLayer() {
		var closeId = layer.filter(':visible').attr("id");
		if(closeId) layerAnchor.filter('[href="#'+closeId+'"]').focus();
		layer.fadeOut(200);
		return false;
	}
	$(document).keydown(function(event){
		if(event.keyCode != 27) return true; // ESC
		return closeLayer();
	});
	$('.layerClose').click(closeLayer);
	$('.layerBlur').focusin(function(event){
		layerClose.click();
	});
});

Toggle

Preview

Show me the simple toggle!

Simple toggle. #1 #2 #3

Show me the slide toggle!

Slide toggle. #1 #2 #3

Show me the fade toggle!

Fade toggle. #1 #2 #3

HTML

<p><a href="#tg1" class="tgSimple">Show me the simple toggle!</a></p>
<p id="tg1" class="tgContent">Simple toggle. <a href="#">#1</a> <a href="#">#2</a> #3</p>
<p><a href="#tg2" class="tgSlide">Show me the slide toggle!</a></p>
<p id="tg2" class="tgContent">Slide toggle. <a href="#">#1</a> <a href="#">#2</a> #3</p>
<p><a href="#tg3" class="tgFade">Show me the fade toggle!</a></p>
<p id="tg3" class="tgContent">Fade toggle. <a href="#">#1</a> <a href="#">#2</a> #3</p>

CSS

/* Toggle Content */
.tgBlur{position:absolute;top:0;right:0;border:0;background:none;padding:0;width:1px;height:1px;overflow:hidden}

JS

jQuery(function($){
	// Toggle
	var tgContent = $('.tgContent');
	var tgBlurHtml = '<button type="button" class="tgBlur"></button>';
	tgContent.hide().prepend(tgBlurHtml).mouseleave(function(){closeTg()});
	var tgBlur = $('.tgBlur');
	tgBlur.eq(0).clone().appendTo(tgContent);
	function offsetToggle(){
		tgContent.filter(':visible').parent().css('position','relative');
		setTimeout(function(){
			tgContent.filter(':hidden').parent().css('position','');
		}, 300);
	}
	$('.tgSimple').click(function(){
		$($(this).attr('href')).toggle().find('a, input, button:not(.tgBlur), select, textarea').eq(0).focus();
		offsetToggle();
		return false;
	});
	$('.tgSlide').click(function(){
		$($(this).attr('href')).slideToggle(100).find('a, input, button:not(.tgBlur), select, textarea').eq(0).focus();
		offsetToggle();
		return false;
	});
	$('.tgFade').click(function(){
		$($(this).attr('href')).fadeToggle(200).find('a, input, button:not(.tgBlur), select, textarea').eq(0).focus();
		offsetToggle();
		return false;
	});
	$('.tgSimple, .tgSlide, .tgFade').keypress(function(){
		if(event.keyCode != 32) return true;
		$(this).click();
		return false;
	});
	function closeTg() {
		var closeId = tgContent.filter(':visible').attr('id');
		if(closeId) $('.tgSimple, .tgSlide, .tgFade').filter('[href="#'+closeId+'"]').focus();
		tgContent.prev('input').focus();
		tgContent.fadeOut(200);
	}
	$(document).keydown(function(event){
		if(event.keyCode != 27) return true; // ESC
		return closeTg();
	});
	$('.tgBlur').focusin(closeTg);
});