Dialog Start tour

Lists

List elements.

Stats list

Basic stats list.

How to use

How to use HTML elements.

Markup
<ul class="stats-list">
    <li class="stats-up">
        <a href="javascript:void(0);">
            <h3>Total Visits</h3>
            <span>8382</span>
        </a>
    </li>
    ...
    ...
    ...
</ul>

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
stats-list ul Main stats list class. 1.0
stats-up li Used for the color green. 1.0
stats-eq li Used for the color orange. 1.0
stats-down li Used for the color red. 1.0

Draggable list

Basic list which is draggable.

How to use

How to use HTML elements.

Markup
<ul class="basic-list sortable-list">
  <li>
      <span class="handle"></span>
      Sortable List item 1
  </li>
  ...
  ...
  ...
</ul>

Info list

Basic information list.

How to use

How to use HTML elements.

Markup
<ul class="info-list">
  <li>
      <div class="total">Total</div>
      <div class="desc">Description</div>
      <div class="sum">Changes</div>
  </li>                                                 
  ...
  ...
  ...
</ul>

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
info-list ul Main info list class. 1.0
total div Class for a total cell. This column has a fixed width. 1.0
desc div Class for a description. 1.0
sum div Class for a summary cell. This column has a fixed width. 1.0

User list

Simple user list.

How to use

How to use HTML elements.

Markup
<ul class="user-list">
    <li>
        <div class="thumb"><img src="images/avatar.jpg" alt=""/></div>
        <ul>
            <li>
                <h3>James Jacksons</h3>
            </li>
            <li>
                <b>Function:</b> Senior developer at Apple
            </li> 
            <li>
                <b>Phone:</b> +0800 00 00 00
            </li>                                                    
        </ul> 
        <div class="ctrls">
            <a href="javascript:void(0);" class="button-icon">
                <span class="phone-10 plix-10"></span>
            </a>                                                        
            <a href="javascript:void(0);" class="button-icon">
                <span class="pencil-10 plix-10"></span>
            </a> 
            <a href="javascript:void(0);" class="button-icon">
                <span class="mail-10 plix-10"></span>
            </a> 
            <a href="javascript:void(0);" class="button-icon">
                <span class="delete-10 plix-10"></span>
            </a>                                                                                                                 
        </div>                                                                                               
    </li>
    ...
    ...
    ...
</ul>

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
user-list ul Main user list class. 1.0
thumb div Class for a thumbnail. 1.0
ctrls div Class for a couple of icon buttons. 1.0
button-icon a Pixel icons. More about the buttons can be found here. 1.0
phone-10, pencil-10, mail-10, delete-10 span Pixel icons. More about the icons can be found here. 1.0
plix-10 span Custom icon size class. 1.0

Blocks

Block elements..

Icon block & bar

Icon blocks which you can use for submenus. Icons can be found here.

How to use

How to use HTML elements.

Markup
<ul class="icon-block">
    <li>
        <a href="javascript:void(0);">
        	<span class="home-32 plix-32"></span>
            <span>Dashboard</span>     
        </a>
    </li>
    ...
    ...
    ...
<div class="info-bar">
put your blocks here
</div>

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
icon-block div Main icon block class. 1.0
info-bar div Main wrapper class to display the blocks in a bar. 1.0
home-32 span Custom made icon class. More about the icons can be found here. 1.0
plix-10 span Custom icon size class. 1.0

Info block & bar

Info blocks which you can wrap into a bar.

How to use

How to use HTML elements.

Markup
<div class="info-block">
    <a href="javascript:void(0);">
        <span>30</span>
        <span>Tickets</span>
    </a>
</div>
    ...
    ...
    ...
<div class="info-bar">
put your blocks here
</div>

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
info-block div Main info block class. 1.0
info-bar div Main wrapper class to display the blocks in a bar. 1.0

Icon text block

A big icon with a title and subtitle.

How to use

How to use HTML elements.

Markup
<div class="icon-text-block">
    <a href="javascript:void(0);">
        <div>
            <span class="home-32 plix-32"></span>
        </div>
        <div>
            <h3>Dashboard</h3>
            <span>Lorem ipsum dolor</span>
        </div>
    </a>
</div>

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
icon-text-block div Main icon text block class. 1.0
home-32 span Custom made icon class. More about the icons can be found here. 1.0
plix-10 span Custom icon size class. 1.0

Combi tags

Tags with a checkbox in it.

How to use

How to use HTML elements.

Markup
 <div class="split-tag">
    <a href="javascript:void(0);">Adobe</a>
    <div>
        <input type="checkbox" name=""/>
    </div>
</div>

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
spilt-tag div Main split/combi tag class. 1.0

Basic tags

Basic tags with colors.

How to use

How to use HTML elements.

Markup
<a href="javascript:void(0);" class="tag red">Compleet</a>

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
tag a Main tag class. 1.0
green, blue, purple, red, orange, pink, darkblue a Custom color classes. 1.0

Contacts

Contact blocks.

How to use

How to use HTML elements.

Markup
<div class="contact-box">
    <header>
        <img src="images/avatar.jpg" alt=""/>
        <h3>Mike longhorn</h3>
        <p>Support</p>
        <p>mail@yourserver.com</p>
    </header>
    <div class="contact-sum">
	<-- hidden content -->
    </div>
    <footer>
        <a href="javascript:void(0);" class="tip-s" title="Visit contact"><span class="home-10 plix-10"></span></a>
        <a href="javascript:void(0);" class="tip-s" title="Mail contact"><span class="mail-10 plix-10"></span></a>
        <a href="javascript:void(0);" class="tip-s" title="Edit contacts"><span class="pencil-10 plix-10"></span></a>
        <a href="javascript:void(0);" class="tip-s" title="Delete contact"><span class="trashcan-10 plix-10"></span></a>
        <a href="javascript:void(0);" class="tip-s contact-toggle" title="Toggle box"><span class="plus-10 plix-10"></span></a>
    </footer>
</div>

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
contact-box div Main contact class. 1.0
contact-sum div Hidden content class. 1.0
tip-s a Tooltip class. 1.0
home-10, mail-10, pencil-10, trashcan-10, plus-10 span Icon class. 1.0
plix-10 span Icon siize class. 1.0
contact-toggle a Hidden content trigger class. 1.0

Third-party plugins

Third-party plugins are not documented here because they have there own documentation.

TreeView

A powerfull jQuery tree view plugin.

This is a third party plugin, for information about how to use this plugin and examples please visit this site.