User Guide :: MetroUI Skin for Laravel
Banner

Introduction

Metro UI is commonly known as window 8 and windows X user interface.

Features

Basic Metro Form
  • Text input
  • Textarea
  • Checkbox & Radio
Form Template
  • Inline Form
  • Modal Form
  • Login Form
  • Modern Input Form
Advanced Metro Form
  • Switcher
  • Select & Select2
  • Input file with button
  • Input Button
  • Text field states
  • Big Input
  • Input with helper button
  • Input with button
  • Modern Input
Third party plugins
  • Ion Slider
  • jQuery Knob
  • Tags Input
  • Masked Input
  • Clock Picker
  • Color Picker
  • Switchery
  • Colorful Checkbox & checkbox
  • x-editable
  • Wizard jQuery Steps
  • Summernote Editor
  • JQuery Text Editor
UI Components
  • Grid System
  • Typography
  • Buttons
  • Images
  • Colors
  • Icon Fonts
UI Controls
  • Accordion
  • Tab Control
  • Tree View
  • List View
  • Virtual Keypad
UI Visual
  • Tiles
  • Carousel
  • Panel
  • Popover
  • Hints
  • Notify
  • Slider
  • Streamer
  • Presenter
Data Table & plugins
  • Data Table
  • Column Reorder
  • Row Reorder
  • Fixed Header
  • Key Table
  • Multi Select Row
Chart
  • Chart JS
  • Flot Chart
  • Morris Chart
  • Peity Chart
  • Sparkline Chart
Gallery
  • Fixed Column + Lightbox
  • jQuery Shuffle
  • Media Gallery Template
  • DropZone Uploader
Dashboard Template Components
  • Widget Info
  • Widget Panel
  • Chat List
  • Message Lists
  • Sidebar Chat List
  • Interactive To Do Lists
  • User Project Table
  • Statistic Progress Bar
  • Sales Statistic
  • Tiled Icon
  • Sales Statistic
  • Project Timeline
  • Meeting Timeline
  • Calendar
  • Flot Chart
  • Chart JS
  • Peity Chart
  • Panel
  • Animated Icon
  • Responsive Table
jQuery Plugins
  • Chart JS
  • clock picker
  • color picker
  • data tables
  • dropzone
  • fancybox
  • flot
  • ion range slider
  • jquery text editor
  • and many more

Getting Started

System Requirement

Laravel

Laravel Version
> 5.1
Php Version
> 5.5.9
5.6 (recommended)
Extension
  • OpenSSL PHP Extension
  • PDO PHP Extension
  • Mbstring PHP Extension
  • Tokenizer PHP Extension
Browser
All major browser with css3 supported

Native PHP

Php Version
5.3
5.4 (recommended)
Browser
All major browser with css3 supported

HTML

Browser
All major browser with css3 supported

Installation

Laravel

  • Install Laravel


    First, download the Laravel installer using Composer:

    composer global require "laravel/installer=~1.1"

    Make sure to place the ~/.composer/vendor/bin directory in your PATH so the laravel executable can be located by your system.

    Once installed, the simple laravel new command will create a fresh Laravel installation in the directory you specify. For instance, laravel new blog will create a directory named blog containing a fresh Laravel installation with all of Laravel's dependencies already installed. This method of installation is much faster than installing via Composer:

    laravel new blog

    Via Composer Create-Project

    You may also install Laravel by issuing the Composer create-project command in your terminal:

    composer create-project laravel/laravel --prefer-dist
  • Extract Demo Copy


    Extract laravel distribution template file into temporary location, eg. laravel_demo.

    Now we have same folder structure with just installed laravel site.

  • Run Demo Copy


    To run demo copy, go to browser address bar and enter localhost/laravel_demo/admin/dashboard

    Dashboard 1
for complete documentation, you can refer to original laravel site on http://laravel.com/docs/5.1

Native PHP

  • Extract Demo Copy


    Extract laravel distribution template file into temporary location, eg. php_demo.

  • Run Demo Copy


    To run demo copy, go to browser address bar and enter localhost/php_demo/admin/dashboard

Native php when we want to apply metro ui for any other php framework like codeigniter, yii

Native HTML

  • Extract Demo Copy


    Extract laravel distribution template file into temporary location, eg. html_demo.

  • Run Demo Copy


    To run demo copy, go to browser address bar and enter localhost/html_demo/admin/dashboard

Native HTML when we want to apply metro ui for any other framework like asp, dot.net etc

The Basic

Routing

Routing file located at ./app/Http/routes.php

content for demo

Route::get('/', function () { return view('welcome'); }); Route::controller('admin' ,'AdminController'); Route::controller('user' ,'UserController'); Route::controller('landing' ,'LandingController');
complete tutorial about routing can be found in

Controllers

Controller are stored in ./app/Http/Controllers directory

There are three demo files

  • AdminController.php
  • LandingController.php
  • UserController.php

Making New Controllers

Create new controller in laravel is quite easy

Open your terminal / command console in your laravel root

php artisan make:controller mycontroller

New controller created

Registering New Controller

After controller created, we need to register it in route.php

Add this line your route.php

Route::controller('mycontroller' ,'MycontrollerController');

now you can call your controller in browsers address bar

Adding New Routes in Controllers

If we want to make new controllers route mycontroller/test

Open MycontrollerController.php

public function getTest($param = ''){ # code ... }

hints:

  • don't forget to make public for function visibility
  • add prefix get in function name
complete tutorial about controllers can be found in

Views

view files are stored in ./resources/views directory

You can categorize view files under controllers name.

example:

mycontrollers/test.php

Simple View

a simple view might look something like this

<!-- View stored in resources/views/greeting.php --> <html> <body> <h1>Hello, <?php echo $name; ?></h1> </body> </html>

Returning Views in Controller

We can call view in controller in simple way

public function getTest(){ $this->data = array(); # if you want to add binding data return view('mycontroller.test', $this->data); }
complete tutorial about views can be found in

Blade Templates

Two of the primary benefits of using Blade are template inheritance and sections.

Master Template

First, we will examine a "master" page layout.

<!-- Stored in resources/views/layouts/master.blade.php --> <html> <head> <title>App Name - @yield('title')</title> </head> <body> @section('sidebar') This is the master sidebar. @show <div class="container"> @yield('content') </div> </body> </html>

As you can see, this file contains typical HTML mark-up. However, take note of the @section and @yield directives. The @section directive, as the name implies, defines a section of content, while the @yield directive is used to display the contents of a given section.

Now that we have defined a layout for our application, let's define a child page that inherits the layout.

Extending Layout

When defining a child page, you may use the Blade @extends directive to specify which layout the child page should "inherit". Views which @extends a Blade layout may inject content into the layout's sections using @section directives. Remember, as seen in the example above, the contents of these sections will be displayed in the layout using @yield:

<!-- Stored in resources/views/child.blade.php --> @extends('layouts.master') @section('title', 'Page Title') @section('sidebar') @parent <p>This is appended to the master sidebar.</p> @endsection @section('content') <p>This is my body content.</p> @endsection

In this example, the sidebar section is utilizing the @parent directive to append (rather than overwriting) content to the layout's sidebar. The @parent directive will be replaced by the content of the layout when the view is rendered.

complete tutorial about blade template can be found in

Applying MetroUI Template

Applying MetroUI Master Template

Metro UI master layout template stored in ./resources/views/layouts/metro.blade.php

Basic structures of master layout is look like:

<html> <head lang="en"> <!-- head script here --> </head> <body onload="init();" class="{{ $appcolor or 'bg-steel' }}" > @include( 'layouts/header') <div class="page-container metro " > <div class="row" style="height:100%"> <div class="cell sidebar-cell" style="height:100%;"> @include( 'layouts/sidebar' ) </div> <div class="cell auto-size"> <div class="content-wrapper bg-grayLighter " > @yield('content') </div> </div> </div> </div> @include( 'layouts/footer') <script type="text/javascript"> # script here </script> </body> </html>

The @include('layouts/header') will include file layouts/header.blade.php into template.

The @yield('content') will apply content section into template.

Applying Child View Template

view child template for specific controller stored in ./resources/views/[child]/[sub-child]

for example: ./resource/views/admin/dashboard/1.blade.php

View structure is look like:

@extends('layouts.metro') @section('content') # content here ... @endsection

as you can see, the @yield('content') in master template will call @section('content') in child template.

Calling Views from Controller

to applying MetroUI template views from controller,

for example: using AdminController.php take a look here:

return view('admin.dashboard.'.$id, $this->data );

assuming $id = 1, this will include views/admin/dashboard/1.blade.php

and applying the result into views/layout/metro.blade.php (refer to Code snipet #13 )

@extends('layouts.metro');

Master template are the template to display backend / admin layout.

The other template you can found in views/layouts is user.blade.php to display user login layout

Metro UI CSS

Grid

Metro UI CSS includes a responsive fluid grid system that appropriately scales up to 12 columns. It includes predefined classes for easy layout options.

Visual

Default

1
2
3
1
2
3
1
2
3
1
2
3
4
5
6
7
8
9
10
11
12

.condensed

1
2
3
1
2
3
1
2
3
1
2
3
4
5
6
7
8
9
10
11
12

Introduction

Grid systems are used to create page layouts through a series of rows and columns that house your content. Here's how the grid system works:

  • Rows must be placed within a .grid container
  • Use rows to create horizontal groups of columns (container with class .row).
  • Content should be placed within columns (container with class .cell).
  • Default row contain one cell
  • To define cells count use builtin classes .cells2 ... .cells12 for row.
  • To create grid without cell margin, add class .condensed to grid main container
  • Cells can extended and take the place of multiple cells using the classes .colspan2 ... .colspan12

HTML Code

.grid

<div class="grid "> <div class="row cellsN"> <div class="cell "></div> ... <div class="cell "></div> </div> </div>

.grid.condensed

<div class="grid condensed "> <div class="row cellsN"> <div class="cell "></div> ... <div class="cell "></div> </div> </div>

.cell.colspanN

<div class="grid "> <div class="row cells3"> <div class="cell colspan2"></div> <div class="cell "></div> </div> </div>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Typography

Fonts

Var Font family
@fontName: "Segoe UI", "Open Sans", serif;
@fontNameLight: "Segoe UI Light", "Open Sans Light", serif;
@fontNameBold: "Segoe UI Bold", "Open Sans Bold", serif;

The signature user interface font of Metro UI CSS, Segoe, Open Sans and PT Serif Caption. It's a sans serif design drawn in the tradition of signage and way-finding typefaces. For non-windows system used Open Sans fonts, loaded from google fonts.

Headings

h1. Metro heading
class .leader
36px
h2. Metro heading
class .sub-leader
30px
h3. Metro heading
class .header
24px
h4. Metro heading
class .sub-header
18px
h5. Metro heading
class .sub-alt-header
14px
h6. Metro heading
class .minor-header
12px

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.

<p>Lorem ipsum dolor sit amet ... </p>

Indent Paragraph class .indent-paragraph

Nullam libero odio, lacinia vel dignissim sed, consequat ac nisi. Ut at mauris sit amet sem dapibus pretium sit amet sed orci. Quisque tincidunt sodales sollicitudin. Ut purus odio, imperdiet ut laoreet ac, placerat vel ante. Nulla tincidunt sapien in metus tincidunt imperdiet. Vestibulum a dui nisi. Morbi vestibulum nulla lacinia enim tempus ullamcorper.

<p class="indent-paragraph">Nullam libero odio ... </p>

Text Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.

<p class="text-default">...</p>

Align

Click the option

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.

<p class="align-left">...</p>

Stylized List

  • Lorem ipsum
  • dolor sit amet
  • consectetur
  • adipisicing elit
  • Molestiae nam
  • libero natus porro
<ul class="simple-list">...</ul>

Description List

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="">...</dl>

Tags

success alert info warning default success alert info warning default

<span class="tag success">success</span> <span class="tag alert">alert</span> <span class="tag info">info</span> <span class="tag warning">warning</span> <span class="tag">default</span> <a class="tag success">success</a> <a class="tag alert">alert</a> <a class="tag info">info</a> <a class="tag warning">warning</a> <a class="tag">default</a>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Table

Metro Table

Click the option
head 1 head 2 head 3 head 4
cell 1 cell 2 cell 3 cell 4
cell 1 cell 2 cell 3 cell 4
cell 1 cell 2 cell 3 cell 4
cell 1 cell 2 cell 3 cell 4
<table class="table">...</table>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Form Inputs

Text input & password

<!-- input[type=text] --> <div class="input-control text"> <input type="text"> </div> <!-- input[type=password] --> <div class="input-control password"> <input type="password"> </div> <!-- input with placeholder --> <div class="input-control text"> <input type="text" placeholder="Input you text here..."> </div> <!-- readonly input --> <div class="input-control text"> <input type="text" readonly> </div> <!-- disabled input --> <div class="input-control text"> <input type="text" disabled> </div>

Checkboxes & Radio buttons

Checkboxes
Small checkboxes
indeterminate
indeterminate small-check
Radio buttons
Small radio buttons
<!-- Checkbox --> <label class="input-control checkbox"> <input type="checkbox" checked> <span class="check"></span> <span class="caption">Checkbox</span> </label> <!-- Small Checkbox --> <label class="input-control checkbox small-check"> <input type="checkbox" checked> <span class="check"></span> <span class="caption">Checkbox</span> </label> <!-- checkbox button --> <label class="input-control checkbox"> <input type="checkbox"> <span class="check"></span> <span class="caption">checkbox</span> </label> <!-- Small checkbox button --> <label class="input-control checkbox small-check"> <input type="checkbox"> <span class="check"></span> <span class="caption">Small checkbox</span> </label> <!-- Colorful checkbox button --> <label class="input-control checkbox {info|success|warning|alert}"> <input type="checkbox"> <span class="check"></span> <span class="caption">Small checkbox</span> </label>
Colorful Checkbox

Just add class {color scheme} in <label class="input-control checkbox" />

Colorful Radio

Switchers (checkbox variation)

Modern Switchers
Original Switchers
<!-- Modern switch --> <label class="switch"> <input type="checkbox"> <span class="check"></span> </label> <!-- Original switch --> <label class="switch-original"> <input type="checkbox"> <span class="check"></span> </label>

Textarea

<div class="input-control textarea"> <textarea></textarea> </div>

Select

Select
Select with multiply
<div class="input-control select"> <select> <option>1</option> <option>2</option> <option>3</option> </select> </div>

Input file

<div class="input-control file" data-role="input"> <input type="file"> <button class="button"><span class="mif-folder"></span></button> </div>

Input buttons

<input type="button" value="Button"> <input type="reset" value="Reset"> <input type="submit" value="Submit">

Text field states

<div class="input-control text error"> <input type="text"> </div> <div class="input-control text warning"> <input type="text"> </div> <div class="input-control text success"> <input type="text"> </div> <div class="input-control text info"> <input type="text"> </div>

Input with prepend icon

<div class="input-control text"> <label>Prepend icon</label> <span class="mif-user prepend-icon"></span> <input type="text"> </div> <div class="input-control text"> <label>Prepend icon</label> <img src="..." class="prepend-icon"> <input type="text"> </div>

Big input

<div class="input-control text big-input"> <input type="text"> </div>

Inputs with helper buttons (clear & reveal)

<!-- Input with clear helper --> <div class="input-control text" data-role="input"> <input type="text"> <button class="button helper-button clear"><span class="mif-cross"></span></button> </div> <!-- Input with reveal helper --> <div class="input-control password" data-role="input"> <input type="text"> <button class="button helper-button reveal"><span class="mif-looks"></span></button> </div>

Input with button(s)

<div class="input-control text" data-role="input"> <input type="text"> <button class="button"><span class="mif-search"></span></button> </div> <div class="input-control text" data-role="input"> <input type="text"> <div class="button-group"> <button class="button"><img src="images/location.png"></button> <button class="button"><img src="images/group.png"></button> <button class="button"><img src="images/power.png"></button> </div> </div>

Modern inputs

You login Please enter you login or email Input login
You login Please enter you login or email Input login
You password Please enter you password Input password
<div class="input-control modern text"> <input type="text"> <span class="label">You login</span> <span class="informer">Please enter you login or email</span> <span class="placeholder">Input login</span> </div> <div class="input-control modern text iconic"> <input type="text"> <span class="label">You login</span> <span class="informer">Please enter you login or email</span> <span class="placeholder">Input login</span> <span class="icon mif-user"></span> </div> <div class="input-control modern password iconic" data-role="input"> <input type="password"> <span class="label">You password</span> <span class="informer">Please enter you password</span> <span class="placeholder">Input password</span> <span class="icon mif-lock"></span> <button class="button helper-button reveal"><span class="mif-looks"></span></button> </div>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Button

Button styles can be applied to anything with the .button class applied. However, typically you'll want to apply these to only a and button elements for the best rendering.

Push buttons

Anchor

Div
Span

<button class="button">Caption</button> <button class="button" disabled>Caption</button> <div class="button">Caption</div> <a class="button">Caption</a> <span class="button">Caption</span> <button class="button rounded">Rounded</button> <button class="button cycle-button">+</button> <button class="button square-button">OK</button>

Any colors (predefined and custom)

<button class="button primary">Primary</button> <button class="button success">Success</button> <button class="button info">Info</button> <button class="button danger">Danger</button> <button class="button warning">Warning</button> <button class="button link">Link</button> <button class="button bg-pink bg-active-darkPink fg-white">Custom</button>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Image

Image Container

Click the option
<div class="image-container "> <div class="frame"> <img src="images/1.jpg"> </div> </div>

Image Overlay

Mouse over image and click the class option

Image title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="image-container" > <div class="frame"><img src="images/2.jpg"></div> <div class="image-overlay" > <h2>Image title</h2> <p> ... <p> </div> </div>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Metro UI Control

Accordion

Example

.accordion
Item 1
Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.
Item 2
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute.
Item 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
.accordion with disabled item
Item 1
Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.
Item 2
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute.
Item 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
.accordion with icon
Item 1
Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.
Item 2
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute.
Item 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
.accordion & .large-heading
Item 1
Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.
Item 2
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute.
Item 4
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute.
Item 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Code

HTML
<div class="accordion"> <div class="frame"> <div class="heading">Frame heading</div> <div class="content">Frame content</div> </div> ... <div class="frame"> <div class="heading">Frame heading</div> <div class="content">Frame content</div> </div> </div>
Declarative style
<div class="accordion" data-role="accordion">...</div>
Javascript style
<div class="accordion" id="accordion">...</div> <script> $(function(){ $("#accordion").accordion(); }); </script>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Tabs Control

Example

.tabcontrol
.tabcontrol2
.tabcontrol & .tabs-bottom
.tabcontrol2 & .tabs-bottom

Code

HTML, tabs on top
<div class="tabcontrol"> <ul class="tabs"> <li><a href="#frame_id">Caption</a></li> ... <li><a href="#frame_id">Caption</a></li> </ul> <div class="frames"> <div class="frame" id="frame_id">1</div> ... <div class="frame" id="frame_id">4</div> </div> </div>
HTML, tabs on bottom
<div class="tabcontrol tabs-bottom"> <div class="frames"> <div class="frame" id="frame_id">1</div> ... <div class="frame" id="frame_id">4</div> </div> <ul class="tabs"> <li><a href="#frame_id">Caption</a></li> ... <li><a href="#frame_id">Caption</a></li> </ul> </div>
Declarative style
<div class="tabcontrol" data-role="tabControl"> ... </div>
Javascript style
<div class="tabcontrol" id="tab-control"> ... </div> <script> $(function(){ $("#tab-control").tabControl(); }); </script>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Virtual Keypad

Example

Input text
Input password
Length control (ex: max 3 dig)
Shuffle buttons

Code

<!-- Text --> <div class="input-control text" data-role="keypad"> <input type="text"> </div> <!-- Password --> <div class="input-control password" data-role="keypad"> <input type="password"> </div> <!-- Length --> <div class="input-control password" data-role="keypad" data-length="3"> <input type="password"> </div> <!-- Shuffle --> <div class="input-control text" data-role="keypad" data-shuffle="true"> <input type="text"> </div>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Tree View

Example

TreeView
  • Favorites
    • Projects
    • Downloads
    • Desktop
  • Location
  • Computers
  • Network
    • ASUS
    • BARACUDA
    • EPSON
    • VUSOLO
    • GALAXY S4
Checkbox & Radio
  • Checkboxes
    • Play animations
    • Play sounds
    • Disabled leaf
    • Read only
  • Radio buttons
    • Play animations
    • Play sounds
    • Disabled leaf
    • Show pictures
  • Mixed
    • Play animations
    • Play animations
    • Play sounds
Indeterminate
  • Indeterminate
    • Play video
      • AVI
      • MPEG
      • VIDX
      • XVID
    • Options
      • Option 1
      • Option 2
      • Sub Options
        • Sub Option 1
        • Sub Option 2
        • Sub Option 3
    • Other

Code

Simple tree
<div class="treeview" data-role="treeview"> <ul> <li><span class="leaf">Leaf name</span></li> ... <li> <span class="leaf">Leaf name</span> <ul> <li><span class="leaf">Leaf name</span></li> ... <li><span class="leaf">Leaf name</span></li> </ul> </li> </ul> </div>
Create node
<li class="node"> <span class="leaf">Leaf name</span> <span class="node-toggle"></span> <ul> <li><span class="leaf">Leaf name</span></li> ... <li><span class="leaf">Leaf name</span></li> </ul> </li>
Create collapsed node
<li class="node collapsed"> <span class="leaf">Leaf name</span> <span class="node-toggle"></span> <ul> <li><span class="leaf">Leaf name</span></li> ... <li><span class="leaf">Leaf name</span></li> </ul> </li>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

List View

Example

Click the option

Video
Documents
Downloads
Images
Music
<div class="listview" data-role="listview" > <div class="list"> ... </div> </div>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Slider

Example

Default
With hint
Customize
Accuracy mode

Large size

Default
min(max)Value
Customize
Accuracy mode

Vertical

Vertical
Vertical With hint
Vertical Customize
Accuracy mode

Code

Declarative style
<div class="slider" data-role="slider"></div>
Javascript style
<div class="slider" id="slider"></div> <script> $(function(){ $("#slider").slider(); }); </script>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Metro UI Visual

Tiles

Example

Code

<div class="tile-area no-padding"> <div class="tile-container bg-darkCobalt" style="width: 640px"> <div class="tile-large bg-lighterBlue" data-role="tile"></div> <div class="tile-square bg-cobalt" data-role="tile"></div> <div class="tile-small bg-red" data-role="tile"></div> <div class="tile-small bg-orange" data-role="tile"></div> <div class="tile-small bg-green" data-role="tile"></div> <div class="tile-small bg-pink" data-role="tile"></div> <div class="tile-wide bg-lightGreen" data-role="tile"></div> </div> </div>

Tile Sizes

This table represent original sizes for tiles from Windows Style Guide.

Class Size (px)
.tile-small 70x70
.tile or .tile-square 150x150
.tile-wide 310x150
.tile-large 310x310
Size modification classes
Class Size (px)
.tile-small-x width 70
.tile-small-y height 70
.tile-square-x width 150
.tile-square-y height 150
.tile-wide-x width 310
.tile-wide-y height 310
Extra tiles and extra modifications
Class Size (px)
.tile-big 470x470
.tile-super 630x630
.tile-big-x width 470
.tile-big-y height 470
.tile-super-x width 470
.tile-super-y height 470

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Carousel

Example

.carousel
Without controls
.carousel & .square-markers

Code

HTML
<div class="carousel"> <div class="slide">...</div> ... <div class="slide">...</div> </div>
Declarative style
<div class="carousel" data-role="carousel">...</div>
Javascript style
<div class="carousel" id="carousel">...</div> <script> $(function(){ $("#carousel").carousel(); }); </script>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Panel

Panels

Default
Panel Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida.
With icon
Panel Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida.
Collapsible
Panel Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida.
Alert (&.alert)
Panel Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida.
Warning (&.warning)
Panel Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida.
Success (&.success)
Panel Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida.

Code

HTML
<!-- Default --> <div class="panel"> <div class="heading"> <span class="title">Panel Title</span> </div> <div class="content"> ... panel content ... </div> </div> <!-- With icon (font) --> <div class="panel"> <div class="heading"> <span class="icon mif-home"></span> <span class="title">Panel Title</span> </div> <div class="content"> ... panel content ... </div> </div> <!-- With icon (img) --> <div class="panel"> <div class="heading"> <img class="icon" src="..."> <span class="title">Panel Title</span> </div> <div class="content"> ... panel content ... </div> </div>
Collapsible, declarative style
<div class="panel" data-role="panel">...</div>
Collapsible, javascript style
<div class="panel" id="panel">...</div> <script> $(function(){ $("#panel").panel(); }); </script>

Widget Box

Panel Title
Sub Heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus eveniet suscipit eaque impedit nostrum expedita.
Panel Title
Sub Heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus eveniet suscipit eaque impedit nostrum expedita.
Panel Title
Sub Heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus eveniet suscipit eaque impedit nostrum expedita.
<div class="panel widget-box" data-role="panel"> <div class="heading"> <div class="title">Panel Title</div> </div> <div class="content"> <div class="sub-heading">Sub Heading</div> <div class="text"> ... </div> </div> </div>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Popover

Static Popover

.marker-on-top

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

.marker-on-bottom

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

.marker-on-left

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

.marker-on-right

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Code

<div class="popover marker-on-left"> ... </div>

Popover by click

Code

<button class="button" data-role="popover" data-popover-mode="click" data-popover-position="left" data-popover-text="Button clicked" data-popover-background="bg-cyan" data-popover-color="fg-white">Click Me</button>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Hints

Example

Mouseover the text
Default
Hint bottom
Hint top
Hint right
Hint left
Variant 2 [data-hint-mode=2]
Hint bottom
Hint top
Hint right
Hint left
Custom colors
Hint bottom
Hint top
Hint right
Hint left

Code

<span data-role="hint" data-hint-background="bg-green" data-hint-color="fg-white" data-hint-mode="2" data-hint="Title|Hint content" >This element with hint</span>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Progress Bar

Example

Small
Default
Large
Gradient

Code

<div class="progress small" data-value="30" data-role="progressBar"></div> <div class="progress" data-value="85" data-color="bg-red" data-role="progressBar"></div> <div class="progress large" data-value="55" data-color="ribbed-amber" data-role="progressBar"></div> <div class="progress small gradient-bar" data-value="85" data-role="progressBar"></div>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Rating

Example

Size
small
default
large
Custom number of stars

Color
poor (value 1/3)
regular (value up to 2/3)
good (value from 2/3)
custom number of stars

Code

Declarative style
<div class="rating" data-role="rating"></div>
Javascript style
<div class="rating" id="rating"></div> <script> $(function(){ $("#rating").rating(); }); </script>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Metro UI More...

Presenter

Example

Developed with advice

Metro UI CSS developed with the advice of Microsoft to build the user interface and include: general styles, grid, layouts, typography, 20+ components, 300+ built-in icons.

Metro UI CSS build with {LESS}. Metro UI CSS is open source and has MIT licensing model.

BizSpark Startup

Metro UI CSS is a BizSpark Startup. Microsoft BizSpark is a global program that helps software startups succeed by giving them access to software development tools, connecting them with key industry players, and providing marketing visibility.

BizSpark provides free software, support, and visibility to help startups succeed. Join BizSpark and become part of a global community that has over 50,000 members in 100+ countries.

Join the BizSpark Program now

Thanks to JetBrains

Thanks to the company JetBrains for supporting the project in the form of a license for a great product PhpStorm.

Get PhpStorm now!

Code

<div class="presenter" data-role="presenter"> <div class="scene"> <div class="act"> <element class="actor"></element> ... <element class="actor"></element> </div> ... <div class="act"> <element class="actor"></element> ... <element class="actor"></element> </div> </div> </div>

Important! All actors must be have data-position attribute with top and left position, separated by comma.

<div class="actor" data-position="10,20">...</div>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Calendar

Example

Render days
No other days
Render months
Render years

Code

<!-- create calendar --> <div data-role="calendar"></div> <!-- render month --> <div data-role="calendar" data-start-mode="month"></div> <!-- render year --> <div data-role="calendar" data-start-mode="year"></div>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Date Picker

Example

Default
Preset day
Any date formats

Code

Declarative style
<div class="input-control text" data-role="datepicker"> <input type="text"> <button class="button"><span class="mif-calendar"></span></button> </div>
Javascript style
<div class="input-control text" id="datepicker"> <input type="text"> <button class="button"><span class="mif-calendar"></span></button> </div> <script> $(function(){ $("#datepicker").datepicker(); }); </script>

Complete example and html code about MetroUI can be found at http://metroui.org.ua

Colors

Metro Color

Metro UI CSS provides access to the main colors used in Windows 8. You can sets: background, text color, outline, border color for any elements.

Predefined colors

    To set background color: use prefix bg-, to set foreground color: use prefix fg-, to set outline color: use prefix ol-, to set border color: use prefix bd-. Also you can set active, hover and focus colors with classes bg(fg)-hover-*, bg(fg)-active- and bg(fg)-focus-.

    Also you can change :before and :after color and background for element with classes: before-bg-*, before-fg-*, after-bg-*, after-fg-*.

    Before and after colors

      To create ribbed background use prefix ribbed-.

      Ribbed backgrounds
        Image Background
        Click the option
          <div class="bg-* " > ... </div>

          Complete example and html code about MetroUI can be found at http://metroui.org.ua

          Font Icon

          Metro Icon Font gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Metro Icon Font includes over 400 icons.

          How to use

          Include in page head:
          <link href="metro-icons.css" rel="stylesheet">
          In html use:
          <span class="mif-icon_name"></span>

          Size

          To change size icon you can use next classes: mif-lg, mif-2x, mif-3x, mif-4x.

          Icons can be resized to any sizes over built-in classes

          <span class="mif-earth mif-2x"></span>

          Colors

          To change icon color you can use fg-* classes or use css property color.

          <span class="mif-earth fg-green"></span> <span class="mif-earth" style="color: red;"></span>

          MetroUI Icon Fonts

          New Icons
          • microscope
          • stack2
          • stack3
          • lamp
          • injection
          • thermometer2
          • justice
          • user-md
          • stethoscope
          • ambulance
          • medkit
          • paw
          • file-pdf
          • file-word
          • file-excel
          • file-powerpoint
          • file-image
          • file-archive
          • file-audio
          • file-movie
          • file-code
          • visa
          • mastercard
          • discover
          • amex
          • cc-paypal
          • heartbeat
          • venus
          • mars
          • medium
          • directions-bike
          • location-city
          • library
          Application Icon
          • microscope
          • stack2
          • stack3
          • lamp
          • injection
          • thermometer2
          • justice
          • user-md
          • stethoscope
          • ambulance
          • medkit
          • paw
          • file-pdf
          • file-word
          • file-excel
          • file-powerpoint
          • file-image
          • file-archive
          • file-audio
          • file-movie
          • file-code
          • visa
          • mastercard
          • discover
          • amex
          • cc-paypal
          • heartbeat
          • venus
          • mars
          • medium
          • directions-bike
          • location-city
          • library
          • calculator2
          • barbell
          • 3d-rotation
          • alarm
          • alarm-on
          • favorite
          • settings-ethernet
          • settings-power
          • settings-voice
          • shopping-basket
          • contacts-dialer
          • contacts-mail
          • drafts
          • mail
          • brightness-auto
          • multitrack-audio
          • widgets
          • usb
          • money
          • vertical-align-bottom
          • vertical-align-center
          • vertical-align-top
          • file-download
          • file-upload
          • keyboard-return
          • security
          • looks
          • palette
          • layers
          • layers-clear
          • local-airport
          • florist
          • gas-station
          • hotel
          • local-service
          • map2
          • traff
          • apps
          • chevron-left
          • chevron-right
          • expand-less
          • expand-more
          • menu
          • more-horiz
          • more-vert
          • unfold-less
          • unfold-more
          • not
          • drive-eta
          • event-available
          • event-busy
          • folder-special
          • folder-sd-card
          • sync-disabled
          • sync-problem
          • vpn-lock
          • vpn-publ
          • school
          • file-binary
          • mail-read
          • quote
          • home
          • pencil
          • eyedropper
          • paint
          • image
          • images
          • camera
          • headphones
          • music
          • film
          • video-camera
          • dice
          • books
          • file-empty
          • files-empty
          • file-text
          • file-picture
          • file-music
          • file-play
          • file-video
          • file-zip
          • stack
          • folder
          • folder-open
          • folder-plus
          • folder-minus
          • folder-download
          • folder-upload
          • tag
          • tags
          • barcode
          • qrcode
          • cart
          • credit-card
          • calculator
          • help
          • envelop
          • location
          • compass
          • compass2
          • map
          • history
          • bell
          • calendar
          • printer
          • keyboard
          • download
          • upload
          • floppy-disk
          • drive
          • database
          • undo
          • redo
          • bubble
          • bubbles
          • user
          • users
          • user-plus
          • user-minus
          • user-check
          • hour-glass
          • search
          • zoom-in
          • zoom-out
          • enlarge
          • shrink
          • enlarge2
          • shrink2
          • key
          • wrench
          • equalizer
          • equalizer-v
          • cog
          • cogs
          • magic-wand
          • bug
          • trophy
          • gift
          • spoon-fork
          • rocket
          • meter
          • hammer
          • fire
          • lab
          • bin
          • truck
          • target
          • power
          • switch
          • power-cord
          • clipboard
          • list-numbered
          • list
          • list2
          • tree
          • cloud
          • cloud-download
          • cloud-upload
          • download2
          • upload2
          • earth
          • link
          • flag
          • attachment
          • eye
          • bookmark
          • bookmarks
          • contrast
          • brightness
          • star-empty
          • star-half
          • star-half
          • star-full
          • heart
          • heart-broken
          • warning
          • notification
          • question
          • plus
          • minus
          • info
          • cancel
          • blocked
          • cross
          • checkmark
          • spell-check
          • enter
          • exit
          • arrow-up-left
          • arrow-up
          • arrow-up-right
          • arrow-right
          • arrow-down-right
          • arrow-down
          • arrow-down-left
          • arrow-left
          • tab
          • move-up
          • move-down
          • sort-asc
          • sort-desc
          • command
          • shift
          • crop
          • filter
          • bold
          • underline
          • italic
          • strikethrough
          • page-break
          • superscript
          • subscript
          • table
          • insert-template
          • pilcrow
          • ltr
          • rtl
          • section
          • paragraph-left
          • paragraph-center
          • paragraph-right
          • paragraph-justify
          • indent-increase
          • indent-decrease
          • embed
          • embed2
          • share
          • feed3
          • chevron-thin-down
          • chevron-thin-left
          • chevron-thin-right
          • chevron-thin-up
          • flow-branch
          • flow-cascade
          • flow-line
          • flow-parallel
          • flow-tree
          • air
          • medal
          • paper-plane
          • shareable
          • shop
          • shopping-basket2
          • thumbs-down
          • thumbs-up
          • traffic-cone
          • water
          • cabinet
          • suitcase
          • gamepad
          • lock
          • unlock
          • tools
          • pin
          • discout
          • profile
          • dollar
          • dollars
          • coins
          • male
          • female
          • piano
          • anchor
          Mobile icon
          • wifi-low
          • wifi-mid
          • wifi-full
          • perm-phone-msg
          • bt-settings
          • settings-phone
          • dialer-sip
          • dialpad
          • ring-volume
          • voicemail
          • bluetooth
          • bt-connected
          • bt-disabled
          • bt-searching
          • phonelink
          • phonelink-off
          • my-location
          • bt-audio
          • phone-bt
          • phone-forwarded
          • phone-in-talk
          • phone-locked
          • phone-missed
          • phone-paused
          • headphones
          • wifi-connect
          • feed
          • mic
          • phone
          • satellite
          • battery-full
          • battery-two
          • battery-one
          • battery-empty
          • battery-charge
          Device Icons
          • display
          • laptop
          • mobile
          • tablet
          • tablet-landscape
          Player Icons
          • play
          • pause
          • stop
          • backward
          • forward
          • first
          • last
          • previous
          • next
          • eject
          • volume-high
          • volume-medium
          • volume-low
          • volume-mute
          • volume-mute2
          • volume-plus
          • volume-minus
          • loop
          • loop2
          • infinite
          • shuffle
          Brand Icon
          • google
          • google-plus
          • facebook
          • twitter
          • youtube
          • steam
          • onedrive
          • github
          • git
          • apple
          • android
          • windows
          • skype
          • linkedin
          • html5
          • css3
          • chrome
          • firefox
          • ie
          • opera
          • safari
          • creative-cloud
          • dropbox
          • evernote
          • paypal
          • swarm
          • vk
          • yelp
          • dribbble
          • lastfm
          • pinterest
          • stumbleupon
          • vimeo

          • All brand icons are trademarks of their respective owners.
          • The use of these trademarks does not indicate endorsement of the trademark holder by Metro Icon Font, nor vice versa.
          Weather icons
          • sunrise
          • sun
          • moon
          • windy
          • wind
          • showflake
          • cloudy
          • cloudy2
          • cloud2
          • weather
          • weather2
          • weather3
          • lines
          • cloud3
          • lightning
          • lightning2
          • rainy
          • windy2
          • windy3
          • snowy
          • snowy2
          • snowy3
          • weather4
          • cloudy2
          • cloud4
          • lightning3
          • sun4
          • moon2
          • cloudy3
          • cloud5
          • lightning4
          • rainy3
          • windy4
          • windy5
          • snowy4
          • snowy5
          • weather5
          • cloudy4
          • lightning5
          • thermometer
          • none
          • celsius
          • fahrenheit
          Chart icon
          • chart-bars
          • chart-bars2
          • chart-dots
          • chart-pie
          • chart-line

          Spinner icon

          • spinner
          • spinner2
          • spinner3
          • spinner4
          • spinner5
          • loop2
          Animated Spinner icons (with subclass mif-ani-spin)
          • spinner
          • spinner2
          • spinner3
          • spinner4
          • spinner5
          • loop2
          Animated Spinner icons (with subclass mif-ani-pulse)
          • spinner
          • spinner2
          • spinner3
          • spinner4
          • spinner5
          • loop2

          Animated Icon

          Special thanks to Meneses Evandro for adding this animations.
          Normal speed
          • spanner
          • bell
          • vertical
          • horizontal
          • flash
          • bounce
          • float
          • heartbeat
          • shake
          • shuttle
          • pass
          • ripple
          Fast speed (with subclass mif-ani-fast)
          • spanner
          • bell
          • vertical
          • horizontal
          • flash
          • bounce
          • float
          • heartbeat
          • shake
          • shuttle
          • pass
          • ripple
          Slow speed (with subclass mif-ani-slow)
          • spanner
          • bell
          • vertical
          • horizontal
          • flash
          • bounce
          • float
          • heartbeat
          • shake
          • shuttle
          • pass
          • ripple

          To use animation only on-hover use classes with mif-ani-hover-*.

          Complete example and html code about MetroUI can be found at http://metroui.org.ua

          Dashboard Components Template

          Widget Info

          Example

          Todays Degrees 26'C
          Todays Revenue $ 4,500
          New Messages 354

          Code

          <div class="widget-info "> <span class="title">Info Title</span> <span class="counter">99</span> <span class="icon mif-music"></span> </div>

          Usualy placed on top of dashboard page as notice information

          Widget Panel

          Example

          Visitor today

          23,324,120

          New Visitor 20%
          Order monthly

          11,324,120

          New Orders 18%
          Revenue annual

          25,421,120

          Incremnt Income 22%

          Code

          <div class="panel widget-box "> <div class="heading "> <div class="title">{Widget Title} <span class="widget-tag ">{widget tag}</span> </div> </div> <div class="content"> <div class="text fg-gray"> <h2>{Number}</h2> <div class="text-secondary "> <span>{Description}</span> </div> </div> </div> </div>

          Usualy placed on top of dashboard page as notice information

          Statistic Progress Bar

          Example

          • 1,234
            Total orders in month
            40%
          • 1,095
            Order last month
            30%
          • 7,890
            Revenue in month
            91%

          Code

          <ul class="stat-list"> <li> <h3>{value number}</h3> <!-- statistic value --> <small>{Title}</small> <div class="stat-counter">{progress value}% <!-- put arrow icon below --> <span class="mif-arrow-up fg-green"></span> </div> <div class="progress small" id="pb2" data-role="progressBar" data-value="{progress value}" ></div> </li> </ul>

          Statistic info with progress bar on botttom

          Simple Message Table

          Example

          Monita 25 min
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat optio, incidunt inventore enim ullam earum.
          Dandy 1 hrs
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat optio, incidunt inventore enim ullam earum.

          Code

          <table class="table bordered"> ... <tr> <td class="no-padding-h"> <b class="tag alert">{Person Name}</b> <span class="place-right"><span class="fa fa-clock-o"></span> {minuts} min</span> <div>{message here}</div> </td> </tr> ... </table>

          Template for short message table

          Multi Columns Message Table

          Example

          1 Please contact me 5min
          2 Where are you 10min
          Meet with Jaya 15min

          Code

          <table class="table bordered-h"> <tr> <td><span class="tag success">1</span> </td> <td>{Message here}</td> <td>{minuts}min</td> </tr> ... </table>

          Template for multi columns message table

          add bordered-h instead of bordered to draw horizontal bordered table

          User Project Table

          Example

          Status User Time Value
          pending... Monita 10:30am 30%
          completed Monita 10:30am 30%

          Code

          <table class="table bordered-h"> <!-- heading --> <tr> <th>Status</th> <th>User</th> <th><span class="fa fa-clock-o"></span> Time</th> <th>Value</th> </tr> <!-- content --> <tr> <td>pending...</td> <td>Monita</td> <td>10:30am</td> <td>30%</td> </tr> ... </table>

          Template for user project list table

          Iconic Chat List

          Example

          • Monita
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque culpa quam.
          • Jaya Kuntjara
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque culpa quam.
          • Jaka Kelana
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque culpa quam.

          Code

          <ul class="chat-list"> ... <li> <a href="#" class="place-left"> <div class="icon small"> <img src="{avatar here}" class="circle fit-width"> </div> </a> <div > <h5> {Sender}</h5> <div>{Content}</div> </div> </li> ... <ul>

          Template for iconic chat lists

          Tweet Chat List

          Example

          • @monita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, corrupti, quas.
            1 minuts ago
          • @jaya_kuntjara Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, corrupti, quas.
            21 minuts ago
          • @jaka_kelana Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, corrupti, quas.
            1 hour ago

          Code

          <ul class="chat-list"> ... <li> <div> <a href="#">@user</a> {tweet here} </div> <small><span class="fa fa-clock-o"></span> 1 minuts ago</small> </li> ... </ul>

          Template for tweet chat lists

          Simple To Do List

          Example

          Check for completed tasks

          Code

          <ul class="todo-list"> <li> <label class="input-control checkbox"> <input type="checkbox" class="todo-cb"> <span class="check"></span> <span class="caption"> {caption here} </span> </label> </li> ... </ul>

          Template for to do List with interactive js for completed task

          Timeline List

          Example

          • 6:00 am
            2 hrs ago
            Meet with Jaya
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima laboriosam amet quibusdam provident deserunt.
          • 7:00 am
            1 hrs ago
            Send email to Jaka
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima laboriosam amet quibusdam provident deserunt.

          Code

          <ul class="timeline-list"> ... <li> <div class="date"> <!-- icon below --> <span class="icon fa fa-briefcase"></span> <!-- time table --> <div>6:00 am</div> <small>2 hrs ago</small> </div> <div class="content"> <h5>{title}</h5> <div>{content}</div> </div> </li> ... </ul>

          Template for timelined List

          Chart

          ChartJs

          Line

          Line Chart
          var myLineChart = new Chart(ctx).Line(data, options);

          Bar

          Bar Chart
          var myBarChart = new Chart(ctx).Bar(data, options);

          Radar

          Radar Chart
          var myRadarChart = new Chart(ctx).Radar(data, options);

          Polar Area

          Polar Area Chart
          var myPolarAreaChart = new Chart(ctx).PolarArea(data, options);

          Pie

          Pie Chart
          var myPieChart = new Chart(ctx).Pie(data, options);

          Donut

          Donut Chart
          var myDoughnutChart = new Chart(ctx).Doughnut(data, options);

          More information about chart js, option and example can be found at http://www.chartjs.org/docs/

          Flot Chart

          Example

          Flot Line
          Flot Bar
          Flot Area
          Flot Spline
          Flot Pie
          Flot Donut

          Code

          var plot = $.plot(placeholder, data, options);

          More information about flot chart, option and example can be found at

          Morris Chart

          Example

          Morris Area
          Morris Bar
          Morris Donut
          Morris Line

          Code

          <!-- line chart --> Morris.Line( options ); <!-- area chart --> Morris.Area( options ); <!-- bar chart --> Morris.Bar( options ); <!-- donut chart --> Morris.Donut( options );

          More information about morris chart, option and example can be found at

          Peity Chart

          Example

          Peity Line Bar
          Peity Donut Bar

          Code

          <!-- pie chart --> $("span.pie").peity("pie"); <!-- donut chart --> $('.donut').peity('donut'); <!-- line chart --> $(".line").peity("line"); <!-- bar chart --> $(".bar").peity("bar");

          More information about peity chart, option and example can be found at

          Sparkline

          Example

          Sparkline
          Sparkline
          Sparkline
          Sparkline

          More information about sparkline chart, option and example can be found at

          jQuery Plugins

          Clock Picker

          Example

          Clock Picker

          Code

          Just add data-role="clockpicker" in div.input-control

          <!-- head component --> <script src="path/to/clockpicker.js" type="text/javascript" ></script> <link media="all" rel="stylesheet" type="text/css" href="path/to/clockpicker.css" > <!-- body component --> <div class="input-control full-size text" data-role="clockpicker" data-autoclose="true" > <input type="text" value="10:10"> <span class="append-icon fa fa-clock-o"></span> </div>

          More information about clock picker, option and example can be found at

          Color Picker

          Example

          Color Picker

          Code

          Just add data-role="spectrum" in <input type="text"/>

          <!-- head component --> <script src="path/to/bootstrap-colorpicker.min.js" type="text/javascript" ></script> <link href="path/to/bootstrap-colorpicker.min.css" media="all" rel="stylesheet" type="text/css" > <!-- body component --> <div class="input-control full-size text"> <input type="text" class=" " data-role="spectrum" value="{color-code}" /> </div>

          More information about color picker, option and example can be found at

          jQuery Knob

          Example

          Knob Dialer
          Knob Dialer

          Code

          Just add class knob in <input type="text"/>

          <!-- head component --> <script src="path/to/jquery.knob.js" type="text/javascript" ></script> <!-- body component --> <div class="input-control full-size text"> <input type="text" class="knob" data-fgColor="{hex-color}" data-width="{width}" data-height="{height}" /> </div>

          More information about color picker, option and example can be found at

          Tags Input

          Example

          Tags Input

          Code

          Just add data-role="tagsinput" in <input type="text"/>

          <!-- head component --> <script src="path/to/bootstrap-tagsinput.js" type="text/javascript" ></script> <link href="path/to/bootstrap-tagsinput.css" type="text/css" media="all" rel="stylesheet" > <!-- body component --> <div class="input-control full-size text"> <input type="text" class="success" data-role="tagsinput" /> </div>

          More information about tags input, option and example can be found at

          Masked Input

          Example

          Masked Input
          Masked Input

          Code

          Just add data-mask="{masked-rules}" in <input type="text"/>

          <!-- head component --> <script src="path/to/jasny-bootstrap.min.js" type="text/javascript" ></script> <link href="path/to/jasny-bootstrap.min.css" type="text/css" media="all" rel="stylesheet" > <!-- body component --> <div class="input-control full-size text"> <input type="text" data-mask="{masked-rules}" /> </div>

          More information about masked input, option and example can be found at

          Switchery

          Example

          Switchery Input

          Code

          Just add classswitchery in <input type="checkbox"/>

          <!-- head component --> <script src="path/to/switchery.js" type="text/javascript" ></script> <link href="path/to/switchery.css" type="text/css" media="all" rel="stylesheet" > <!-- body component --> <input type="checkbox" class="switchery" data-type="{predefined-color}" />

          More information about switchery, option and example can be found at

          x-editable

          Example

          X-Editable Input
          X-Editable Input

          Code

          <!-- head component --> <script src="path/to/jquery.poshytip.js"></script> <script src="path/to/jquery-editable-poshytip.js"></script> <script src="path/to/jquery-ui-1.10.3.custom.js"></script> <script src="path/to/address.js"></script> <link media="all" type="text/css" rel="stylesheet" href="path/to/address.css"> <link media="all" type="text/css" rel="stylesheet" href="path/to/tip-metro.css"> <link media="all" type="text/css" rel="stylesheet" href="path/to/jquery-editable.css"> <!-- body component --> <a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a> <!-- javascript component --> <script type="text/javascript"> $(document).ready(function() { $('#username').editable(); }); </script>
          Main attributes you should define are:
          • type - type of input (text, textarea, select, etc)
          • url - url to server-side script to process submitted value (/post, post.php etc)
          • pk - primary key of record to be updated (ID in db)
          • id or name - name of field to be updated (column in db). Taken from id or data-name attribute
          • value - initial value. Usefull for select, where value is integer key of text to be shown. If empty - will be taken from element html contents

          More information about switchery, option and example can be found at

          jQuery Steps - Wizard

          Example

          jQuery Steps

          Code

          <!-- head component --> <script src="path/to/jquery.steps.min.js" type="text/javascript" ></script> <link href="path/to/jquery.steps.css" type="text/css" media="all" rel="stylesheet" > <!-- body component --> <div id="example-basic"> <h3>Keyboard</h3> <section> <p>Try the keyboard navigation by clicking arrow left or right!</p> </section> <h3>Effects</h3> <section> <p>Wonderful transition effects.</p> </section> <h3>Pager</h3> <section> <p>The next and previous buttons help you to navigate through your content.</p> </section> </div> <!-- javascript --> $("#example-basic").steps({ headerTag: "h3", bodyTag: "section", transitionEffect: "slideLeft", autoFocus: true });

          More information about jquery steps, option and example can be found at

          Summernote Editor

          Example

          Summernote Editor

          Code

          <!-- head component --> <script src="path/to/summernote-metro.js" type="text/javascript" ></script> <link href="path/to/summernote.css" type="text/css" media="all" rel="stylesheet" > <link href="path/to/summernote-metro.css" type="text/css" media="all" rel="stylesheet" > <!-- body component --> <form action=""> <textarea rows="10" class="summernote"> ... </textarea> </form> <!-- javascript --> # add class .summernote will auto load summernote plugin

          More information about summernote, option and example can be found at

          jQuery Text Editor

          Example

          jQuery Text Editor

          Code

          <!-- head component --> <script src="path/to/jquery-te-1.4.0.min.js" type="text/javascript" ></script> <link href="path/to/jquery-te-1.4.0.css" type="text/css" media="all" rel="stylesheet" > <!-- body component --> <form action=""> <textarea rows="10" class="jqte"> ... </textarea> </form> <!-- javascript --> # add class .jqte will auto load jQuery Text Editor plugin

          More information about jquery text editor, option and example can be found at

          Credits

          Contributors

          • rhyn85@gmail.com
          • lutfiarfianto@gmail.com
          • firstdandy@gmail.com

          Thank's to

          Open Source

          • jQuery
          • jQuery UI
          • Metro UI
          • Nanoslider
          • Twitter Bootstrap
          • Summernote
          • jQuery Text Editor
          • Chart JS
          • Flot Chart
          • Knob Dialer
          • Morris Chart
          • Peity Chart
          • Sparkline Chart
          • Drop Zone
          • Masked Input
          • Clock Picker
          • Color Picker
          • JS Shuffle
          • Masonry
          • Modernizr
          • jQuery Steps
          • Lightbox Gallery
          • Fanbox Gallery
          • Tab behave
          • JS Prettify
          • JS Moment

          About ReUsing this Template

          Step using this template

          • Content Wrapper

            Put everything under <div id="main-content"></div>

            <div id="main-content"> ... content here ... </div>
          • Grid Layout

            make 3-1 grid layout within #main-content

            <div class="grid"> <div class="row cells4"> <div class="cell colspan3"> ... help content here ... </div> <div> ... popover content here ... </div> </div> </div>
          • Writing help content

            writing help content with this structure

            <div class="panel widget-box"> <div class="content"> <div class="text"> <!-- help content start here --> <h4>... Sub Title ...</h4> <p>... description ...</p> <code class="pretty"> # code </code> <h4>... Sub Title ...</h4> <p>... description ...</p> <code class="pretty"> # code </code> ... </div> </div> </div>
          • Writing Popover content

            writing help content with this structure

            <div class="popover marker-on-left {metro-background-color} "> <p>...Content here...</p> <p>...Content here...</p> </div>

          Licence

          this template use open source GPL3 / MIT Licence