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
<div class="ribbon"><span>Try now!</span></div> <div class="ribbon ribbon-green"><span>Popular</span></div>
Badges
Easily highlight items with Badges.
Example
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>
<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>
<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>
<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>
Navigation
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
Special offer
Rooms at La Margherita are simply decorate and feature antique wood furniture. They all have free Wi-Fi access.
night
Special offer
Rooms at La Margherita are simply decorate and feature antique wood furniture. They all have free Wi-Fi access.
night
<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>
<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
<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>
<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
<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>
<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>
<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>
<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
<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
<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>
Write a message