What is City Break UI Kit

City Break UI Kit is a number of useful user interface components built on Bootstrap 3 framework. We did not modify any line of Bootstrap, so you can safely use City Break UI Kit in your ongoing project.

What is included

Once purchased, unzip the compressed folder to see the directory structure of City Break UI Kit. You'll see something like this:

city-break
├───docs
│   ├───css
│   ├───images
│   └───js
├───city-break-css
│   ├───css
│   ├───fonts
│   │   └───video-js
│   ├───images
│   │   ├───icons
│   │   ├───prettyPhoto
│   │   └───temp
│   └───js
│       └───libs
└───city-break-less
    ├───fonts
    │   └───video-js
    ├───images
    │   ├───icons
    │   ├───prettyPhoto
    │   └───temp
    ├───js
    │   └───libs
    └───less
        └───bootstrap
                                    
docs/
contains this documentation.
city-break-css/
contains City Break UI Kit in simple CSS format. Use it to easily start your project.
css/
contains all the stylesheets for CSS version of the kit.
fonts/
contains Bootstrap Glyphicons for CSS version of the kit.
fonts/video-js/
contains Video Player Glyphicons for CSS version of the kit.
images/
contains all the images for CSS version of the kit.
images/icons/
contains all the icons for CSS version of the kit.
images/temp/
contains all the temporary images for CSS version of the kit.
js/
contains all the JS files for CSS version of the kit.
city-break-less/
contains City Break UI Kit in LESS format. Use it to modify this kit in your project.
fonts/
contains Bootstrap Glyphicons for LESS version of the kit.
fonts/video-js/
contains Video Player Glyphicons for LESS version of the kit.
images/
contains all the images for LESS version of the kit.
images/icons/
contains all the icons for LESS version of the kit.
images/temp/
contains all the temporary images for LESS version of the kit.
js/
contains all the JS files for LESS version of the kit.
less/
contains all the stylesheets for LESS version of the kit.

Note: The folders city-break-css and city-break-less is fully independent from each other, including all the images and JS files. You can use the version you prefer without pulling images or JS files from the other version of the kit.

Browser support

Since City Break UI Kit is built on Bootstrap 3 framework, it supports the same browsers as Bootstrap.

Getting Started

To start working with City Break UI Kit you can use a basic template.html, or take the completely functional pages included in this package. Since it is built on Bootstrap, you can also use it on your project with Bootstrap 3.
We provide you both CSS and LESS standalone versions which are completely identical in design and functions.

CSS Version: You can use CSS version by dropping contents of city-break-css folder to your project folder and including style.css file in your HTML page: <link href="style.css" media="screen" rel="stylesheet">

LESS Version: You can find it in city-break-less folder. Use LESS if you want to modify City Break UI Kit. We built it Bootstrap way so you won't find big difference. Use less/variables.less to modify different styles, use style.less to remove needless components.

If you want to start from scratch, the best way is to use our template where all startup files are already included and ready to be used. You can find template.html file both for CSS and LESS version in their respective folders.

Basic Template

You can use a basic HTML template to write your code, or take completely functional pages included in this package. Basic template as well as completely functional pages are available both for CSS and LESS versions of the City Break UI Kit.

<!doctype html>
    <!--[if lt IE 8 ]><html lang="en" class="ie7"> <![endif]-->
    <!--[if IE 8 ]><html lang="en" class="ie8"> <![endif]-->
    <!--[if IE 9 ]><html lang="en" class="ie9"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>City Break | Template</title>

    <!-- main JS libs -->
    <script src="js/libs/jquery-1.10.2.min.js"></script>
    <script src="js/libs/jquery-ui.min.js"></script>
    <script src="js/libs/bootstrap.min.js"></script>

    <!-- Style CSS -->
    <link href="css/bootstrap.css" media="screen" rel="stylesheet">
    <link href="style.css" media="screen" rel="stylesheet">

    <!-- General Scripts -->
    <script src="js/general.js"></script>

    <!--[if lt IE 9]><script src="js/respond.min.js"></script><![endif]-->
</head>

<body>
    <div class="body-wrap">
        <!--container-->
        <div class="container">
            Start Your Work Here
    
    
        </div>
        <!--/ container -->
    </div>
</body>
</html>
                                

Typography

City Break UI Kit uses free PT Sans webfont available at the Google Fonts. The global default font-size is 13px, this is applied to the <body>. In addition, all <p> (paragraphs) receive a bottom margin of 10px.
Also, all headings, <h1> through <h6> are available.

Example

Example (h1)

Example (h2)

Example (h3)

Example (h4)

Example (h5)
Example (h6)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

<h1>Example (h1)</h1>
<h2>Example (h2)</h2>
<h3>Example (h3)</h3>
<h4>Example (h4)</h4>
<h5>Example (h5)</h5>
<h6>Example (h6)</h6>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
                                    

Buttons

Simple Buttons

Use any of the available button classes to quickly create a simple button.

Example

<a href="#" class="btn"><span>Default</span></a>
<a href="#" class="btn btn-green"><span>Green</span></a>
<a href="#" class="btn btn-gray"><span>Gray</span></a>
<a href="#" class="btn btn-red"><span>Red</span></a>
<a href="#" class="btn btn-caps"><span>All Capitals</span></a>
<a href="#" class="btn btn-shadow"><span>Shadow</span></a>
                                

Buttons with Different Sizes

Three different button sizes available.

Example

<a href="#" class="btn btn-small"><span>Small</span></a>
<a href="#" class="btn btn-middle"><span>Middle</span></a>
<a href="#" class="btn"><span>Default</span></a>
                                

Shaped Buttons

Buttons with left and right pointers.

Example

<a href="#" class="btn btn-left"><span>Prev</span></a>
<a href="#" class="btn"><span>Download all files</span></a>
<a href="#" class="btn btn-right"><span>Next</span></a>

<a href="#" class="btn btn-gray btn-left"><span>Prev</span></a>
<a href="#" class="btn btn-gray"><span>Download all files</span></a>
<a href="#" class="btn btn-gray btn-right"><span>Next</span></a>

<a href="#" class="btn btn-red btn-left"><span>Prev</span></a>
<a href="#" class="btn btn-red"><span>Download all files</span></a>
<a href="#" class="btn btn-red btn-right"><span>Next</span></a>

<a href="#" class="btn btn-green btn-left"><span>Prev</span></a>
<a href="#" class="btn btn-green"><span>Download all files</span></a>
<a href="#" class="btn btn-green btn-right"><span>Next</span></a>
                                

Buttons with Icons

Icons can be placed on the right or left side.

Example

<a href="#" class="btn btn-icon btn-gray"><span>Discard</span></a>
<a href="#" class="btn btn-icon btn-icon-send"><span>Send message</span></a>
<a href="#" class="btn btn-icon btn-icon-go"><span>Continue</span></a>
<a href="#" class="btn btn-icon btn-icon-checkout btn-red"><span>157 available</span></a>
<a href="#" class="btn btn-icon btn-icon-login btn-green"><span>Log In</span></a>
<a href="#" class="btn btn-icon btn-icon-signup btn-green"><span>Sign Up</span></a>

<a href="#" class="btn btn-icon btn-icon-right btn-gray"><span>Discard</span></a>
<a href="#" class="btn btn-icon btn-icon-right btn-icon-send"><span>Send message</span></a>
<a href="#" class="btn btn-icon btn-icon-right btn-icon-go"><span>Continue</span></a>
<a href="#" class="btn btn-icon btn-icon-right btn-icon-checkout btn-red"><span>157 available</span></a>
<a href="#" class="btn btn-icon btn-icon-right btn-icon-login btn-green"><span>Log In</span></a>
<a href="#" class="btn btn-icon btn-icon-right btn-icon-signup btn-green"><span>Sign Up</span></a>
                                

Special Buttons

Example

<a href="#" class="btn btn-follow"><span><em>659</em>Follow</span></a>
<a href="#" class="btn btn-like"><span><em>2159</em>Like</span></a>
                                

Buttoned Input

Wrap input type="submit" into span and use available button classes to create a styled Input.

Example

<span class="btn"><input type="submit" value="Send Message" /></span>
                                

Ribbons

Easily highlight items with Ribbons.

Example

Try now!
Popular
<div class="ribbon"><span>Try now!</span></div>
<div class="ribbon ribbon-green"><span>Popular</span></div>
                                

Badges

Easily highlight items with Badges.

Example

<a href="#" class="badge"><span class="glyphicon glyphicon-tags"></span></a>
<a href="#" class="badge badge-red"><span class="glyphicon glyphicon-heart"></span></a>
                                

Rating Stars

Use rating stars for voting.

Example

<div class="rating clearfix">
    <span class="star voted" rel="1"></span>
    <span class="star voted" rel="2"></span>
    <span class="star voted" rel="3"></span>
    <span class="star voted" rel="4"></span>
    <span class="star" rel="5"></span>
</div>

<div class="rating rating-large clearfix">
    <span class="star voted" rel="1"></span>
    <span class="star voted" rel="2"></span>
    <span class="star voted" rel="3"></span>
    <span class="star voted" rel="4"></span>
    <span class="star" rel="5"></span>
</div>
                                

Form Elements

Checkboxes

Use styled checkboxes instead of the usual ones.

Element specific usage

Attribute name required for input element.

Styled Checkbox require next file to be included into <head> section of the page:

<script src="js/jquery.customInput.js"></script>
                                

Example

<div class="input_styled checklist">
    <div class="rowCheckbox">
        <input name="signup" type="checkbox" checked id="signup" value="signup">
        <label for="signup">Checkbox</label>
    </div>
    <div class="rowCheckbox rowCheckbox-alt">
        <input name="signup5" type="checkbox" checked id="signup5" value="signup5">
        <label for="signup5">Dark Checkbox</label>
    </div>
    <div class="rowCheckbox switch">
        <input name="signup2" type="checkbox" checked id="signup2" value="signup2">
        <label for="signup2">Switch</label>
    </div>
</div>

<div class="input_styled checklist">
    <div class="rowCheckbox label-right">
        <input name="signup3" type="checkbox" checked id="signup3" value="signup3">
        <label for="signup3">Sign up</label>
    </div>
    <div class="rowCheckbox rowCheckbox-alt label-right">
        <input name="signup7" type="checkbox" checked id="signup7" value="signup7">
        <label for="signup7">Newsletter sign up</label>
    </div>
    <div class="rowCheckbox switch label-right">
        <input name="signup4" type="checkbox" checked id="signup4" value="signup4">
        <label for="signup4">Recurring Payment</label>
    </div>
</div>
                                

Radio Buttons

Use styled radio buttons instead of the usual ones.

Element specific usage

Attribute name required for input element.

Styled Radio Button require next file to be included into <head> section of the page:

<script src="js/jquery.customInput.js"></script>
                                

Example

<div class="input_styled radiolist">
    <div class="rowRadio">
        <input type="radio" name="survey" value="radio1" id="radio1" checked>
        <label for="radio1">Radio Button</label>
    </div>
    <div class="rowRadio rowRadio-alt">
        <input type="radio" name="survey" value="radio5" id="radio5" checked>
        <label for="radio5">Dark Radio Button</label>
    </div>
</div>

<div class="input_styled radiolist">
    <div class="rowRadio label-right">
        <input type="radio" name="survey" value="radio3" id="radio3" checked>
        <label for="radio3">Text on the left</label>
    </div>
    <div class="rowRadio rowRadio-alt label-right">
        <input type="radio" name="survey" value="radio7" id="radio7" checked>
        <label for="radio7">Text on the left</label>
    </div>
</div>
                                

Text Inputs

All Text inputs are styled.

Element specific usage

Text Inputs with placeholders require next file to be included into <head> section of the page:

<script src="js/jquery.powerful-placeholder.min.js"></script>
                                

Example

<div class="field_text">
    <input type="text" name="name" id="name" placeholder="Name">
</div>

<div class="field_text omega">
    <input type="text" name="email" id="email" placeholder="Email">
</div>
                                
Enable Placeholders via JS:
<script>
    jQuery(document).ready(function($) {
        if($("[placeholder]").size() > 0) {
            $.Placeholder.init();
        }
    });
</script>
                                

Textareas

All Textareas are styled similar to Text inputs.

Element specific usage

Textareas with placeholders require next file to be included into <head> section of the page:

<script src="js/jquery.powerful-placeholder.min.js"></script>
                                

Example

<div class="field_text field_textarea">
    <textarea id="message" placeholder="Message"></textarea>
</div>
                                
Enable Placeholders via JS:
<script>
    jQuery(document).ready(function($) {
        if($("[placeholder]").size() > 0) {
            $.Placeholder.init();
        }
    });
</script>
                                

Progress Bars

Use styled Progress Bars on your site.

Example

<!-- Progress Bar -->
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
</div>

<!-- Progress Bar with Download Bar -->
<div class="progress style2 download">
    <div class="progress-bar download-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
    <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
</div>

<!-- Progress Bar style 3 -->
<div class="progress style3">
    <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
</div>

<!-- Progress Bar style 4 -->
<div class="progress style4">
    <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
</div>

<!-- Progress Bar style 5 -->
<div class="progress style5">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
                                

Range Sliders

Range Slider allow users to select a value from a numerical range by simply dragging a slider.

Element specific usage

Range Slider require next files to be included into <head> section of the page:

<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slider.bundle.js"></script>
<script src="js/jquery.slider.js"></script>
<link rel="stylesheet" href="css/jslider.css">
                                

Example

<div class="range-slider">
    <input id="price-range" type="text" name="price-range" value="26;76">
</div>
                                    
<div class="range-slider styled single">
    <input id="price-range-2" type="text" name="price-range" value="0;36">
</div>    
                                
Enable Price Range via JS:
<script>
    jQuery(document).ready(function($) {
        // Price Range
        $("#price-range").rangeslider({
            from: 0,
            to: 100,
            limits: false,
            scale: ['0%', '100%'],
            heterogeneity: ['50/50'],
            step: 1,
            smooth: true,
            dimension: '%'
        });

        // Price Range single value
        $("#price-range-2").rangeslider({
            from: 0,
            to: 100,
            limits: false,
            scale: ['0%', '100%'],
            heterogeneity: ['50/50'],
            step: 1,
            smooth: true,
            dimension: '%'
        });
    });
</script>
                                

Website Menu

Website menu with dropdown submenu.

Example

<ul class="menu boxed clearfix">
    <li><a href="#"><i class="menu-icon menu-icon-1"></i>Home</a></li>
    <li>
        <a href="#"><i class="menu-icon menu-icon-2"></i>Tickets</a>
        <ul>
            <li><a href="#">Air Tickets</a></li>
            <li><a href="#">Train Tickets</a></li>
            <li><a href="#">Ship Tickets</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="menu-icon menu-icon-3"></i>Services</a>
        <ul>
            <li><a href="#">Service 1</a></li>
            <li><a href="#">Service 2</a></li>
            <li><a href="#">Service 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="menu-icon menu-icon-4"></i>Reserve</a>
        <ul>
            <li>
                <a href="#">5 Stars Hotel</a>
                <ul>
                    <li><a href="#">Single Room</a></li>
                    <li><a href="#">Double Room</a></li>
                    <li><a href="#">Triple Room</a></li>
                </ul>
            </li>
            <li>
                <a href="#">4 Stars Hotel</a>
                <ul>
                    <li><a href="#">Single Room</a></li>
                    <li><a href="#">Double Room</a></li>
                    <li><a href="#">Triple Room</a></li>
                </ul>
            </li>
            <li>
                <a href="#">3 Stars Hotel</a>
                <ul>
                    <li><a href="#">Single Room</a></li>
                    <li><a href="#">Double Room</a></li>
                    <li><a href="#">Triple Room</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#"><i class="menu-icon menu-icon-6"></i>Contact Us</a></li>
</ul>
                                

Website Menu alternative style

Example

<ul class="menu style2 boxed clearfix">
    <li><a href="#"><i class="menu-icon menu-icon-1"></i>Home</a></li>
    <li><a href="#"><i class="menu-icon menu-icon-2"></i>Tickets</a></li>
    <li><a href="#"><i class="menu-icon menu-icon-3"></i>Services</a></li>
    <li><a href="#"><i class="menu-icon menu-icon-4"></i>Reserve</a></li>
    <li><a href="#"><i class="menu-icon menu-icon-6"></i>Contact</a></li>
</ul>
                                

User Menu

Edit user information.

Example

<ul class="menu user-menu boxed clearfix">
    <li>
        <a href="#"><i class="menu-icon menu-icon-8"></i>My profile</a>
        <ul>
            <li><a href="#">invite friends</a></li>
            <li><a href="#">Find Friend</a></li>
            <li><a href="#">Log Out</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="menu-icon menu-icon-9"></i>Edit Profile</a>
        <ul>
            <li><a href="#">Edit UserName</a></li>
            <li><a href="#">Edit Password</a></li>
            <li><a href="#">Edit Info</a></li>
        </ul>
    </li>
</ul>
                                

Tabs

Add quick, dynamic tab functionality to transition through panes of local content.

Example

10 Days Only

Special offer

Rooms at La Margherita are simply decorate and feature antique wood furniture. They all have free Wi-Fi access.

$99 per
night
Sale Ends 31.05 Other hot deals
14 Days Only

Special offer

Rooms at La Margherita are simply decorate and feature antique wood furniture. They all have free Wi-Fi access.

$149 per
night
Sale Ends 26.06 Other hot deals
6 Days Only

New offer

Rooms at La Margherita are simply decorate and feature antique wood furniture. They all have free Wi-Fi access.

$89 per
night
Sale Ends 20.05 Reserve
<div class="tabs-framed boxed">
    <ul class="tabs clearfix">
        <li class="active"><a href="#events" data-toggle="tab">Events</a></li>
        <li><a href="#starred" data-toggle="tab">Starred</a></li>
        <li><a href="#archive" data-toggle="tab">Archive</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade in active" id="events">
            <!-- Place Your Content Here -->
        </div>

        <div class="tab-pane fade" id="starred">
            <!-- Place Your Content Here -->
        </div>

        <div class="tab-pane fade" id="archive">
            <!-- Place Your Content Here -->
        </div>
    </div>
</div>
                                

Blogging Elements

Tags

This widget presents Tag Cloud for your blog.

Example

<div class="widget-container widget-tags boxed">
    <div class="inner">
        <h3 class="widget-title">Tags<i></i></h3>
        <div class="tagcloud clearfix">
            <a href="#"><span>Rooms</span></a>
            <a href="#"><span>Simple</span></a>
            <a href="#"><span>Decorated</span></a>
            <a href="#"><span>Wood</span></a>
            <a href="#"><span>Furniture</span></a>
            <a href="#"><span>Feature</span></a>
            <a href="#"><span>Conditioning</span></a>
            <a href="#"><span>Hotels</span></a>
            <a href="#"><span>Glasses</span></a>
            <a href="#"><span>Rooms</span></a>
            <a href="#"><span>Simple</span></a>
            <a href="#"><span>Decorated</span></a>
            <a href="#"><span>Wood</span></a>
            <a href="#"><span>Furniture</span></a>
            <a href="#"><span>Feature</span></a>
            <a href="#"><span>Conditioning</span></a>
            <a href="#"><span>Hotels</span></a>
            <a href="#"><span>Glasses</span></a>
        </div>
    </div>
</div>
                                

Calendar

Calendar allow users to select multiple dates.

Element specific usage

Calendar require next files to be included into <head> section of the page:

<script src="js/libs/jquery-ui.min.js"></script>
<script src="js/jquery-ui.multidatespicker.js"></script>
                                

Example


<div class="widget-container widget-calendar boxed">
    <div class="inner">
        <input type="text" name="date" class="inputField" value="" id="date">
    </div>
</div>
                                
Enable Calendar via JS:
<script>
    // <![CDATA[
    jQuery(document).ready(function($) {
        var daysRange = 5;

        function assignCalendar(id){
            $('<div class="calendar" />')
                    .insertAfter( $(id) )
                    .multiDatesPicker({
                        dateFormat: 'yy-mm-dd',
                        minDate: new Date(),
                        maxDate: '+1y',
                        altField: id,
                        firstDay: 1,
                        showOtherMonths: true
                    }).prev().hide();
        }

        assignCalendar('#date');
    });
    // ]]>
</script>
                                

Forms

Contact Form

Element specific usage

Contact Form require next files to be included into <head> section of the page:

<link rel="stylesheet" href="css/chosen.css">
<script src="js/chosen.jquery.min.js" type="text/javascript"></script>
<script src="js/nicEdit.js"></script>
<script type="text/javascript" src="js/jquery.powerful-placeholder.min.js"></script>                                    
                                

Example

Write a message

<div class="add-comment contact-form styled boxed green-line">
    <div class="add-comment-title"><h3>Write a message</h3></div>
    <div class="comment-form">
        <form action="#" method="post" id="commentForm">
            <div class="inner">
                <div class="field_select">
                    <label for="contact-name" class="label_title">Contacts</label>
                    <select name="contact-name" id="contact-name" multiple data-placeholder="Select Name">
                        <option value='example1@gmail.com'>Mike Charley</option>
                        <option value='example2@gmail.com'>Andy Lurs</option>
                        <option value='example3@gmail.com'>Toby Lightman</option>
                        <option value='example4@gmail.com'>Lene Marlin</option>
                        <option value='example5@gmail.com'>Deep Purple</option>
                    </select>
                </div>
                <div class="field_text">
                    <label for="subject" class="label_title">Subject</label>
                    <input type="text" name="subject" id="subject" value="" placeholder="You can add a subject" />
                </div>
                <div class="field_text field_textarea">
                    <label for="nicedit-message" class="label_title">Message</label>
                    <textarea name="nicedit-message" id="nicedit-message"></textarea>
                </div>
                <div class="rowSubmit clearfix">
                    <a href="#" class="link-reset btn btn-icon btn-gray btn-discard" onclick="document.getElementById('commentForm').reset(); return false">
                        <span>Discard</span>
                    </a>
                    <span class="btn btn-icon btn-icon-send btn-submit">
                        <input type="submit" id="send" value="Send Message" />
                    </span>
                </div>
            </div>
        </form>
    </div>
</div>
                                
Enable Contact Form via JS:
<script>
    // Fire multiselect
    jQuery(document).ready(function() {
        jQuery('#contact-name').chosen({ width: "100%" });
        jQuery('#commentForm .link-reset').click(function(){
            jQuery("#contact-name").trigger("chosen:updated");
        });
    });

    // Fire Text Editor
    bkLib.onDomLoaded(function() {
        var myNicEditor = new nicEditor({
            buttonList : [
                'bold',
                'italic',
                'underline',
                'forecolor',
                'left',
                'center',
                'right',
                'justify'
            ]
        });
        myNicEditor.panelInstance('nicedit-message');

        jQuery('#commentForm .link-reset').click(function(){
            myNicEditor.removeInstance('nicedit-message');
            $('#nicedit-message').val('');
            myNicEditor.panelInstance('nicedit-message');
        });
    });
</script>
                                

Message Field

Example

  1. Magazine
    Rooms at La Margherita are simply decorated and feature antique wood furniture.
<div class="comment-list message-field">
   <ol>
       <li class="comment">
           <div class="comment-body boxed blue-line">
               <div class="comment-avatar">
                   <div class="avatar">
                       <img src="images/temp/avatar5.jpg" alt="" />
                   </div>
               </div>
               <div class="comment-text">
                   <div class="comment-info">Magazine</div>
                   <div class="comment-author">
                       <a href="#" class="link-author">Channing Tatum</a>
                   </div>
                   <div class="comment-entry">
                       Rooms at La Margherita are simply decorated and feature antique wood furniture.
                   </div>
               </div>
           </div>
       </li>
   </ol>
</div>
                                

Video Player

Use Video.js player to play video content.

Element specific usage

Video Player require next files to be included into <head> section of the page:

<link href="css/video-js.css" rel="stylesheet">
<script src="js/video.js"></script>
                                

Example

<div class="video-player">
    <video id="video1" controls preload="none" poster="images/temp/post-img-3.jpg" class="video-js vjs-styled-skin">
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
    </video>
</div>
                                
Enable Video Player via JS:
<script>
    videojs.options.flash.swf = "js/video-js.swf";
    
    videojs("video1", {
        "height": "auto",
        "width": "auto"
    }).ready(function() {
                var myPlayer = this;
                var aspectRatio = 1 / 2;
                function resizeVideoJS() {
                    var width = document.getElementById(myPlayer.id()).parentElement.offsetWidth;
                    myPlayer.width(width).height(width * aspectRatio);
                }

                resizeVideoJS();
                window.onresize = resizeVideoJS;
            });
</script>
                                

Audio Player

Use jPlayer to play audio content.

Element specific usage

Audio Player require next files to be included into <head> section of the page:

<link href="css/jplayer.css" rel="stylesheet">
<script src="js/jquery.jplayer.min.js"></script>
<script src="js/jplayer.playlist.min.js"></script>
                                

Example

<div class="widget-container widget-audio boxed">
    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div id="jp_container_1" class="jp-audio">
        <div class="jp-gui jp-interface">
            <div class="jp-controls">
                <div class="jp-current-time"></div>
                <div class="jp-duration"></div>
                <div class="song-image"></div>
                <div class="jp-progress">
                    <div class="jp-seek-bar">
                        <div class="jp-play-bar">
                            <div class="jp-seek-handle"></div>
                        </div>
                    </div>
                </div>
                <div class="song-title"></div>
            </div>
            <div class="jp-controls jp-buttons">
                <a href="javascript:;" class="jp-playlist-toggle" tabindex="1" title="toggle playlist">toggle playlist</a><!--
                --><a href="javascript:;" class="jp-previous disabled" tabindex="1">previous</a><!--
                --><a href="javascript:;" class="jp-play" tabindex="1">play</a><!--
                --><a href="javascript:;" class="jp-pause" tabindex="1">pause</a><!--
                --><a href="javascript:;" class="jp-next" tabindex="1">next</a><!--
                --><a href="javascript:;" class="jp-stop" tabindex="1">stop</a><!--
                --><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a><!--
                --><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a><!--
                --><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a><!--
                --><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a><!--
                --><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a><!--
                --><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a><!--
                --><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a>
            </div>
            <div class="jp-volume-bar">
                <div class="jp-volume-bar-value"></div>
            </div>
        </div>
        <div class="jp-playlist">
            <ul class="jp-playlist-inner">
                <li></li>
            </ul>
        </div>
        <div class="jp-no-solution">
            <span>Update Required</span>
            <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>
        </div>
    </div>
</div>
                                
Enable Audio Player via JS:
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function(){

        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1"
        }, [
            {
                title:"<div class='item-image'><img src='images/temp/music-player-1.jpg' alt='' /></div><div class='item-title'><span class='item-artist'>Beyoncé</span><span class='item-song'>Love on Top</span></div>",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg"
            },
            {
                title:"<div class='item-image'><img src='images/temp/music-player-2.jpg' alt='' /></div><div class='item-title'><span class='item-artist'>Lene Marlin</span><span class='item-song'>Unforgivable Sinner</span></div>",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg"
            },
            {
                title:"<div class='item-image'><img src='images/temp/music-player-3.jpg' alt='' /></div><div class='item-title'><span class='item-artist'>Toby Lightman</span><span class='item-song'>Lets go Racing Boys</span></div>",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
            }
        ], {
            swfPath: "js",
            supplied: "oga, mp3",
            wmode: "window",
            smoothPlayBar: false,
            keyEnabled: false
        });
    });
    //]]>
</script>
                                

Sliders

Image Slider

Image Slider with thumbnails.

Element specific usage

Image Slider require next files to be included into <head> section of the page:

<script src="js/jquery.carouFredSel-6.2.1-packed.js"></script>
<link href="css/prettyPhoto.css" rel="stylesheet">
<script src="js/jquery.prettyPhoto.js"></script>
                                

Example

<div id="gallery-1" class="tf-gallery boxed">
    <div class="gallery-images-wrap">
        <ul class="gallery-images">
            <li>
                <a href="images/temp/carousel-1.jpg" data-rel="prettyPhoto[gal]">
                    <img src="images/temp/carousel-1.jpg" alt="" />
                </a>
            </li>
            ...
            ...
            ...
        </ul>
        <a href="#" class="tf-gallery-btn prev">PREV</a>
        <a href="#" class="tf-gallery-btn next">NEXT</a>
    </div>
    <div class="gallery-thumbs-wrap">
        <ul class="gallery-thumbs">
            <li><img src="images/temp/carousel-thumb-1.jpg" alt="" /></li>
            ...
            ...
            ...
        </ul>
    </div>
</div>
                                
Enable Image Slider via JS:
<script>
    jQuery(document).ready(function($) {
        var gallery = $("#gallery-1"),
                galleryContent = gallery.html();

        gallery.tfGallery();

        $(window).resize(function() {
            gallery.empty().html(galleryContent);
            setTimeout(function(){gallery.tfGallery()},0);
            $(".tf-gallery a[data-rel^='prettyPhoto']").prettyPhoto();
        });
    });
</script>
                                

User Profile

Display information about user in a styled box.

Example

CharlizeTheron
American model and actress
<div class="widget-container widget-profile boxed blue-line">
    <div class="avatar"><img src="images/temp/avatar.jpg" alt="" /></div>
    <div class="inner">
        <h5 class="profile-title">
            <span>Charlize</span>
            <strong>Theron</strong>
        </h5>
        <span class="profile-subtitle">American model and actress</span>
    </div>
    <div class="follow">
        <a href="#" class="btn btn-icon btn-icon-right btn-icon-signup btn-green">
            <span>Following</span>
        </a>
    </div>
</div>
                                

Statistics

Use this widget to display statistics.

Element specific usage

Statistics require next file to be included into <head> section of the page:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
                                

Example

Hotel occupancy

This Week
  • Last Week
  • This Week
  • Next Week
14%
45%
26%
Guest Info:
Male 55%
Female 40%
Kids 5%
View other stats
<div class="widget-container widget-stats boxed green-line">
    <div class="widget-title">
        <a href="#" class="link-refresh" id="link-refresh-1">
            <span class="glyphicon glyphicon-refresh"></span>
        </a>
        <h3>Hotel occupancy</h3>
    </div>
    <div class="stats-content clearfix">
        <div class="stats-content-right">
            <div class="stats-select">
                <strong><span>This Week</span></strong>
                <ul>
                    <li><span>Last Week</span></li>
                    <li><span>This Week</span></li>
                    <li><span>Next Week</span></li>
                </ul>
            </div>

            <!-- Statistics Tab 1 -->
            <div class="stats-tab">
                <div class="occupancy down"><span>14%</span></div>
                <div id="graph-1" class="graph"></div>
                <script type="text/javascript">
                    google.load("visualization", "1", {packages:["corechart"]});
                    google.setOnLoadCallback(drawChart);
                    function drawChart() {
                        var data = google.visualization.arrayToDataTable([
                            ['Day', 'Guests'],
                            ['SUN',  600],
                            ['MON',  440],
                            ['TUE',  260],
                            ['WED',  480],
                            ['THU',  640],
                            ['FRI',  500],
                            ['SAT',  620]
                        ]);
                        var options = {
                            curveType: 'function',
                            chartArea:{left:0, top:10, width:"100%"},
                            hAxis: {textStyle: {color: '#474748', fontSize: 10, bold: true}},
                            vAxis: {gridlines: {color: '#fff', count: 0}, baselineColor: '#fff'},
                            tooltip: {isHtml: true},
                            series: [{
                                color: '#3797d3',
                                visibleInLegend: false,
                                pointSize: 5,
                                lineWidth: 2,
                                areaOpacity: 0
                            }]
                        };

                        var chart = new google.visualization.LineChart(document.getElementById('graph-1'));
                        chart.draw(data, options);

                        $(window).resize(function() {
                            chart.clearChart();
                            chart.draw(data, options);
                        });
                        $('.stats-select li').click(function() {
                            chart.clearChart();
                            chart.draw(data, options);
                        });
                    }
                </script>
            </div>
            <!--/ Statistics Tab 1 -->
            ...
            ...
            ...
        </div>

        <div class="stats-content-left">
            <div class="inner">
                <h6>Guest Info:</h6>
                
                <div class="progressBar">
                    <div class="progress-text clearfix">
                        <span class="mark left">Male</span>
                        <span class="mark right">55%</span>
                    </div>
                    <div class="progress style2">
                        <div class="progress-bar" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%;"></div>
                    </div>
                </div>
                ...
                ...
                ...
            </div>
            <a href="#" class="btn btn-icon btn-icon-right btn-icon-go">
                <span>View other stats</span>
            </a>
        </div>
    </div>
</div>