Typography

h1 Heading 1

h2 Heading 2

h3 Heading 3

h4 Heading 4

h5 Heading 5

h6 Heading 6

p Paragraph

span Some text

a A link

Buttons

Use class="yt-button" to make buttons (works on links, buttons and inputs).

Colored buttons can be created by adding the yt-button-blue or yt-button-dark class to your button.

Disabled buttons can be made adding the HTML 5 disabled attribute to your button.

<button class="yt-button">Upload</button>
<button class="yt-button yt-button-blue">Upload</button>
<button class="yt-button yt-button-dark">Upload</button>
<button class="yt-button" disabled>Disabled command</button>

You can also make small buttons by adding the classes yt-button and yt-button-small.

The framework also gives you the ability to make tiny buttons by adding the classes yt-button and yt-button-tiny

<button class="yt-button yt-button-small">Small button</button>
<button class="yt-button yt-button-tiny">Tiny button</button>

Button groups

Horizontal

To make groups, just wrap the buttons with a div with the class yt-button-group.

<div class="yt-button-group">
	<button class="yt-button">Upload</button>
	<button class="yt-button yt-button-blue">Upload</button>
	<button class="yt-button yt-button-dark">Upload</button>
	<button class="yt-button">Upload</button>
</div>

Vertical

<div class="yt-button-group vertical">
	<button class="yt-button">Upload</button>
	<button class="yt-button">Upload</button>
	<button class="yt-button">Upload</button>
</div>

Single Toggle

<button class="yt-button yt-toggle-button">Upload</button>

Checkbox buttons

<div class="yt-button-group yt-toggle-buttons">
	<button class="yt-button">Upload</button>
	<button class="yt-button">Upload</button>
	<button class="yt-button">Upload</button>
</div>

Radio buttons

<div class="yt-button-group yt-radio-buttons">
	<button class="yt-button">Upload</button>
	<button class="yt-button">Upload</button>
	<button class="yt-button">Upload</button>
</div>

Dropdowns

You can easily make a dropdown.

To make the dropdown separated from the button (like the first example).

<div class="yt-button-group">
	<button class="yt-button">Upload</button>
	<button class="yt-button dropdown-toggle"></button>
	<ul class="yt-dropdown-menu">
		<li class="yt-dropdown-menu-item">Action</li>
		<li class="yt-dropdown-menu-item">Another action</li>
	</ul>
</div>

The button is the dropdown (like the other examples).

<div class="yt-button-group">
	<button class="yt-button dropdown-toggle">Upload</button>
	<ul class="yt-dropdown-menu">
		<li class"yt-dropdown-menu-item">Action</li>
		<li class="yt-dropdown-menu-item">Another action</li>
	</ul>
</div>

Dropup

To make the dropdown separated from the button (like the first example).

<div class="yt-button-group">
	<button class="yt-button">Upload</button>
	<button class="yt-button dropdown-toggle"></button>
	<ul class="yt-dropdown-menu dropup">
		<li class="yt-dropdown-menu-item">Action</li>
		<li class="yt-dropdown-menu-item">Another action</li>
	</ul>
</div>

The button is the dropdown (like the other examples).

<div class="yt-button-group">
	<button class="yt-button dropdown-toggle">Upload</button>
	<ul class="yt-dropdown-menu dropup">
		<li class"yt-dropdown-menu-item">Action</li>
		<li class="yt-dropdown-menu-item">Another action</li>
	</ul>
</div>

Stand alone dropdown

Just a dropdown, without it's toggle.

<ul class="yt-dropdown-menu">
	<li class"yt-dropdown-menu-item">Action</li>
	<li class="yt-dropdown-menu-item">Another action</li>
	<li class="divider"></li>
	<li class="yt-dropdown-menu-item">Another action</li>
</ul>

With submenus

You can also make submenus out of dropdowns. You can also make multiple submenus.

Default

Dropup

Left submenu

Default

<ul class="yt-dropdown-menu">
	<li class="yt-dropdown-menu-item">Action</li>
	<li class="yt-dropdown-menu-item">Another action</li>
	<li class="divider"></li>
	<li class="yt-dropdown-menu-item yt-dropdown-submenu">
		More actions
		<ul class="yt-dropdown-menu">
			<li class="yt-dropdown-menu-item">Action</li>
			<li class="yt-dropdown-menu-item">Another action</li>
			<li class="yt-dropdown-menu-item">Action</li>
			<li class="yt-dropdown-menu-item">Another action</li>
			<li class="yt-dropdown-menu-item">Action</li>
			<li class="yt-dropdown-menu-item">Another action</li>
		</ul>
	</li>
</ul>

Dropup

<ul class="yt-dropdown-menu">
	<li class="yt-dropdown-menu-item">Action</li>
	<li class="yt-dropdown-menu-item">Another action</li>
	<li class="divider"></li>
	<li class="yt-dropdown-menu-item yt-dropdown-submenu">
		More actions
		<ul class="yt-dropdown-menu submenu-dropup">
			<li class="yt-dropdown-menu-item">Action</li>
			<li class="yt-dropdown-menu-item">Another action</li>
			<li class="yt-dropdown-menu-item">Action</li>
			<li class="yt-dropdown-menu-item">Another action</li>
			<li class="yt-dropdown-menu-item">Action</li>
			<li class="yt-dropdown-menu-item">Another action</li>
		</ul>
	</li>
</ul>

Left submenu

<ul class="yt-dropdown-menu">
	<li class="yt-dropdown-menu-item">Action</li>
	<li class="yt-dropdown-menu-item">Another action</li>
	<li class="divider"></li>
	<li class="yt-dropdown-menu-item yt-dropdown-submenu">
		More actions
		<ul class="yt-dropdown-menu submenu-left">
			<li class="yt-dropdown-menu-item">Action</<li>
			<li class="yt-dropdown-menu-item">Another action</li>
			<li class="yt-dropdown-menu-item">Action</li>
			<li class="yt-dropdown-menu-item">Another action</li>
			<li class="yt-dropdown-menu-item">Action</li>
			<li class="yt-dropdown-menu-item">Another action</li>
		</ul>
	</li>
</ul>

Labels

Default Success Warning Important Info Inverse

<span class="label">Default</span>
<span class="label success">Success</span>
<span class="label warning">Warning</span>
<span class="label important">Important</span>
<span class="label info">Info</span>
<span class="label inverse">Inverse</span>

Inputs

Text inputs

<input type="text" class="yt-search-input"/>

Text areas

<textarea class="yt-search-input"></textarea>

Unified text input and submit button

<div class="yt-button-group">
	<input type="text" class="yt-search-input"/>
	<input type="submit" class="yt-button yt-submit" value="" />
</div>

Disabled text inputs

<input type="text" class="yt-search-input" disabled/>

Validation states

Warning :
Error :
Info :
Success :

<input type="text" class="yt-search-input warning"/>
<input type="text" class="yt-search-input error"/>
<input type="text" class="yt-search-input info"/>
<input type="text" class="yt-search-input success"/>

Content boxes

Put your content into nice boxes !

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.

<div class="yt-container">
	Your content here...
</div>

Tooltips

Note The tooltips work on all elements, just make sure to include the tooltip into the title attribute.

Pure CSS (No JS)

NoteThe JS version still looks better and hides the system's tooltip, but the CSS version is lightweight and doesn't need any JS.

WarningThis CSS version also has issues on IE.

The domestic dog is a subspecies of the grey wolf.

<a href="#" class="yt-css-tooltip" title="Tooltip content">Link</a>

With JS plugin

The JS version is powered by JQuery UI. Just add the class yt-tooltip.

The domestic dog is a subspecies of the grey wolf.

<a href="#" class="yt-tooltip" title="Tooltip content">Link</a>

Progress bar

Using HTML 5 progress element

WarningThese examples doesn't work in IE 9 or lower, they work in IE 10. For cross-browser support, use the div progress bar.

Default state

Success state

Warning state

Error state

Inderminate

<progress class="yt-progress-bar" value="75" max="100"></progress>
<progress class="yt-progress-bar success" value="75" max="100"></progress>
<progress class="yt-progress-bar warning" value="75" max="100"></progress>
<progress class="yt-progress-bar error" value="75" max="100"></progress>
<progress class="yt-progress-bar"></progress>

Using div element

NoteThis is cross browser compatible.

Default state

Success state

Warning state

Error state

Inderminate

<div class="yt-cb-progress-bar">
	<span style="width:75%"></span>
</div>
<div class="yt-cb-progress-bar success">
	<span style="width:75%"></span>
</div>
<div class="yt-cb-progress-bar warning">
	<span style="width:75%"></span>
</div>
<div class="yt-cb-progress-bar error">
	<span style="width:75%"></span>
</div>
<div class="yt-cb-progress-bar" data-progress="indetermined"></div>

Checkboxes

NoteThese checkboxes are styled only with pure CSS, without JS.

A checkbox
Checked checkbox
Disabled checkbox
Disabled checked checkbox

<label class="yt-input-control checkbox">
	<input type="checkbox"/>
	<span class="yt-input-label">A checkbox</span>
</label>
<label class="yt-input-control checkbox">
	<input type="checkbox" checked/>
	<span class="yt-input-label">Checked checkbox</span>
</label>
<label class="yt-input-control checkbox">
	<input type="checkbox" disabled/>
	<span class="yt-input-label">Disabled checkbox</span>
</label>
<label class="yt-input-control checkbox">
	<input type="checkbox" disabled checked/>
	<span class="yt-input-label">Disabled checked checkbox</span>
</label>

Radios

NoteThese checkboxes are styled only with pure CSS, without JS.

Radio
Checked radio
Disabled radio
Checked disabled radio

<label class="yt-input-control radio">
	<input type="radio"/>
	<span class="yt-input-label">A radio</span>
</label>
<label class="yt-input-control radio">
	<input type="radio" checked/>
	<span class="yt-input-label">Checked radio</span>
</label>
<label class="yt-input-control radio">
	<input type="radio" disabled/>
	<span class="yt-input-label">Disabled radio</span>
</label>
<label class="yt-input-control radio">
	<input type="radio" disabled checked/>
	<span class="yt-input-label">Disabled checked radio</span>
</label>

Scrollbars

NoteThese scrollbars only work in webkit browsers. Only the scrollbars are included, not the containers. The scrollbars can be applied to all elements.

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed non risus.

Dark

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed non risus.

<div class="yt-scrollbar">
Your stuff here...
</div>
<div class="yt-scrollbar yt-scrollbar-dark">
Your stuff here...
</div>

Notifications

Make your notifications beautiful.

This is an information.

This is a success message.

This is a warning.

This is an important information.

<div class="yt-notification info">
	<div class="yt-notification-icon"></div>
	<span>This is an information.</span>
	<div class="yt-notification-close" data-dismiss="alert"></div>
</div>
<div class="yt-notification success">
	<div class="yt-notification-icon"></div>
	<span>This is a success message.</span>
	<div class="yt-notification-close" data-dismiss="alert"></div>
</div>
<div class="yt-notification warning">
	<div class="yt-notification-icon"></div>
	<span>This is a warning.</span>
	<div class="yt-notification-close" data-dismiss="alert"></div>
</div>
<div class="yt-notification important">
	<div class="yt-notification-icon"></div>
	<span>This is an important information.</span>
	<div class="yt-notification-close" data-dismiss="alert"></div>
</div>

Thumbnails

Thumbnail title

<div class="yt-thumb">
	<img src="yourimageurl"/>
	<span class="yt-thumb-title">Thumbnail title</span>
</div>

Horizontal

<ul class="yt-navigation-dark">
	<li>A page</li>
	<li>Another page</li>
	<li class="selected">Current page</li>
	<li>Another page</li>
</ul>

Vertical

<ul class="yt-navigation-dark vertical-nav">
	<li>A page</li>
	<li>Another page</li>
	<li class="selected">Current page</li>
	<li>Another page</li>
</ul>

Navigation lists

<ul class="yt-navigation-list">
	<li class="yt-nav-list-header">List title</li>
	<li class="selected">Selected page</li>
	<li>Another page</li>
	<li class="yt-nav-list-header">Another list title</li>
	<li>A page</li>
	<li>Another page</li>
	<li class="divider"></li>
	<li>Another page</li>
</ul>

Tabs

NoteEnable/Disable this component in jquery-ui-config.js.

Pane 1

Pane 3

<div class="tabbable"><div>
    <ul class="yt-tabs">
    	<li><a href="#about">About</a></li>
    	<li><a href="#share">Share</a></li>
    	<li><a href="#addto">Add to</a></li>
    </ul>
    <div class="tab-pane" id="about">Pane 1</div>
    <div class="tab-pane" id="share">Pane 2</div>
    <div class="tab-pane" id="addto">Pane 3</div>
</div></div>

Tabs in other direction

Pane 1

Pane 3

About
Share
Add to

<div class="tabbable tabs-bottom"><div>
    <div class="tab-pane" id="about">Pane 1</div>
    <div class="tab-pane" id="share">Pane 2</div>
    <div class="tab-pane" id="addto">Pane 3</div>
    <ul class="yt-tabs">
    	<li><a href="#about">About</a></li>
    	<li><a href="#share">Share</a></li>
    	<li><a href="#addto">Add to</a></li>
    </ul>
</div></div>

About
Share
Add to

Pane 1

Pane 3

<div class="tabbable tabs-left"><div>
    <ul class="yt-tabs">
    	<li><a href="#about">About</a></li>
    	<li><a href="#share">Share</a></li>
    	<li><a href="#addto">Add to</a></li>
    </ul>
    <div class="tab-pane" id="about">Pane 1</div>
    <div class="tab-pane" id="share">Pane 2</div>
    <div class="tab-pane" id="addto">Pane 3</div>
</div></div>

About
Share
Add to

Pane 1

Pane 3

<div class="tabbable tabs-right"><div>
    <ul class="yt-tabs">
    	<li><a href="#about">About</a></li>
    	<li><a href="#share">Share</a></li>
    	<li><a href="#addto">Add to</a></li>
    </ul>
    <div class="tab-pane" id="about">Pane 1</div>
    <div class="tab-pane" id="share">Pane 2</div>
    <div class="tab-pane" id="addto">Pane 3</div>
</div></div>