What is Arctic Sunset UI Kit
Arctic Sunset 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 Arctic Sunset UI Kit in your ongoing project.
What is included
Once purchased, unzip the compressed folder to see the directory structure of Arctic Sunset UI Kit. You'll see something like this:
arctic-sunset ├───docs │ ├───css │ ├───images │ └───js ├───arctic-sunset-css │ ├───css │ ├───fonts │ ├───images │ │ ├───icons │ │ ├───prettyPhoto │ │ └───temp │ └───js │ └───libs └───arctic-sunset-less ├───fonts ├───images │ ├───icons │ ├───prettyPhoto │ └───temp ├───js │ └───libs └───less └───bootstrap
- docs/
- contains this documentation.
- arctic-sunset-css/
- contains Arctic Sunset 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.
- 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.
- arctic-sunset-less/
- contains Arctic Sunset UI Kit in LESS format. Use it to modify this kit in your project.
- fonts/
- contains Bootstrap 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 arctic-sunset-css
and arctic-sunset-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 Arctic Sunset UI Kit is built on Bootstrap 3 framework, it supports the same browsers as Bootstrap.
Getting Started
To start working with Arctic Sunset 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 arctic-sunset-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 arctic-sunset-less
folder. Use LESS if you want to modify Arctic Sunset 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 Arctic Sunset UI Kit.
<!doctype html> <!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]--> <!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]--> <!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]--> <!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js"><!--<![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></title> <!-- main JS libs --> <script src="js/libs/modernizr.min.js"></script> <script src="js/libs/jquery-1.10.0.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"> <!-- scripts --> <script src="js/general.js"></script> <!-- Include all needed stylesheets and scripts here --> <!--[if lt IE 9]><script src="js/respond.min.js"></script><![endif]--> <!--[if gte IE 9]> <style type="text/css"> .gradient {filter: none !important;} </style> <![endif]--> </head> <body> <!-- container --> <div class="container"> Start your work here. </div> <!--/ container --> </body> </html>
Typography
Arctic Sunset UI Kit uses free Lato webfont available at the Google Fonts. The global default font-size is 14px, with a font-weight of 700. This is applied to the <body>
. In addition, all <p>
(paragraphs) receive a font-weight of 400 and bottom margin of 16px.
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-red"><span>Red</span></a> <a href="#" class="btn btn-yellow"><span>Yellow</span></a> <a href="#" class="btn btn-green"><span>Green</span></a> <a href="#" class="btn btn-blue"><span>Blue</span></a> <a href="#" class="btn btn-red btn-round"><span>Red Rounded</span></a> <a href="#" class="btn btn-large"><span>Large White</span></a> <a href="#" class="btn btn-red btn-large"><span>Large Red</span></a>
Rounded Button with hover effect
Button with hover and active states.
Example
<a href="#" class="btn btn-round"><span>Normal</span></a> <a href="#" class="btn btn-round hover"><span>Hover</span></a> <a href="#" class="btn btn-round active"><span>Pressed</span></a>
Shaped Buttons
Buttons with left and right pointers.
Example
<a href="#" class="btn btn-left"><span>View more</span></a> <a href="#" class="btn btn-pagination"><span>View more</span></a> <a href="#" class="btn btn-right"><span>View more</span></a> <a href="#" class="btn btn-left btn-acute"><span>View more</span></a> <a href="#" class="btn btn-acute"><span>View more</span></a> <a href="#" class="btn btn-right btn-acute"><span>View more</span></a> <a href="#" class="btn btn-red btn-left btn-acute"><span>View more</span></a> <a href="#" class="btn btn-red btn-acute"><span>View more</span></a> <a href="#" class="btn btn-red btn-right btn-acute"><span>View more</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>Default Ribbon</span></div> <div class="ribbon ribbon-yellow"><span>Yellow Ribbon</span></div> <div class="ribbon ribbon-green"><span>Green Ribbon</span></div> <div class="ribbon ribbon-blue"><span>Blue Ribbon</span></div>
Badges
Easily highlight items with Badges.
Example
<div class="badge"></div> <div class="badge badge-try"></div> <div class="badge badge-popular"></div> <div class="badge badge-discount"></div> <div class="badge badge-new"></div> <div class="badge badge-fresh"></div> <div class="badge badge-sale"></div>
Rating Stars
Use rating stars for voting.
Example
<div class="rating"> <span class="star on"><input type="hidden" value="1"></span><!-- --><span class="star on"><input type="hidden" value="2"></span><!-- --><span class="star on"><input type="hidden" value="3"></span><!-- --><span class="star off"><input type="hidden" value="4"></span><!-- --><span class="star off"><input type="hidden" value="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">Default Checkbox</label> </div> <div class="rowCheckbox checkbox-large"> <input name="signup2" type="checkbox" checked id="signup2" value="signup2"> <label for="signup2">Switch</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 inlinelist"> <div class="rowRadio"> <input type="radio" name="survey" value="radio_1" id="radio_1" checked> <label for="radio_1">Checked Radio Button</label> </div> <div class="rowRadio"> <input type="radio" name="survey" value="radio_2" id="radio_2"> <label for="radio_2">Unchecked Radio Button</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>
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>
Selects
All Select elements are styled similar to Text inputs. The alternative red style available.
Element specific usage
Styled Select element require next files to be included into <head>
section of the page:
<link rel="stylesheet" href="css/cusel.css"> <script src="js/cusel-min.js"></script>
Example
<!--Default Select style--> <div class="field_select"> <select class="select_styled"> <option value="">Subject</option> <option value="Feedback">Feedback</option> <option value="Support Question">Support Question</option> <option value="Website Question">Website Question</option> <option value="Other Question or Comment">Other Question or Comment</option> </select> </div> <!--Alternative Select style--> <div class="field_select"> <select class="select_styled select_styled_red"> <option value="">Stage Select</option> <option value="">Parking</option> <option value="">Bar & Restaurant</option> <option value="">Residence</option> <option value="">Parking</option> <option value="">Bar & Restaurant</option> <option value="">Residence</option> <option value="">House</option> </select> </div>
Scroll Bars
Use any of the available classes to quickly create a styled Scroll Bar for your site.
Element specific usage
Styled Scroll Bar require next files to be included into <head>
section of the page:
<script src="js/jquery.mousewheel.js"></script> <script src="js/jquery.jscrollpane.min.js"></script>
Example
<div class="scrollbar"> <div class="inner"> <!--place your content here--> </div> </div> <div class="scrollbar style2"> <div class="inner"> <!--place your content here--> </div> </div> <div class="scrollbar style3"> <div class="inner"> <!--place your content here--> </div> </div> <div class="scrollbar style4"> <div class="inner"> <!--place your content here--> </div> </div>
<script type="text/javascript"> jQuery(function() { jQuery('.scrollbar').jScrollPane({ verticalDragMaxHeight: 25, verticalDragMinHeight:25 }); jQuery('.scrollbar.style2').jScrollPane({ verticalDragMaxHeight: 39, verticalDragMinHeight:39 }); jQuery('.scrollbar.style3').jScrollPane({ verticalDragMaxHeight: 19, verticalDragMinHeight:19 }); jQuery('.scrollbar.style4').jScrollPane({ verticalDragMaxHeight: 37, verticalDragMinHeight:37 }); }); </script>
Progress Bars
Use styled Progress Bars on your site.
Element specific usage
Styled Progress Bar require next files to be included into <head>
section of the page:
<script src="js/jquery-ui.min.js"></script> <script src="js/progressbar.js"></script>
Example
<!-- Default Progress Bar --> <div id="progressBar1" class="progressbar"> <span class="mark-left">0%</span> <span class="mark-right">100%</span> <div class="percent"></div> <div class="pbar"></div> <div class="elapsed"></div> <div class="remained"></div> </div> <!-- Progress Bar with download Bar --> <div id="progressBar2" class="progressbar style2"> <span class="mark-left">0%</span> <span class="mark-right">100%</span> <div class="percent"></div> <div class="pbar"> <div id="downloadBar2" class="downloadbar"> <div class="pbar"></div> </div> </div> <div class="elapsed"></div> <div class="remained"></div> </div>
<script type="text/javascript"> $(document).ready(function() { // Default Progress Bar $('#progressBar1').anim_progressbar({ totaltime: 600 }); // Progress Bar with download Bar $('#progressBar2').anim_progressbar({ totaltime: 800 }); $('#downloadBar2').anim_progressbar({ totaltime: 500 }); }); </script>
Range Slider
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="260;800"> </div>
<script type="text/javascript" > jQuery(document).ready(function($) { $("#price_range").rangeslider({ from: 50, to: 1000, limits: false, scale: ['$50', '$1000'], heterogeneity: ['50/500'], step: 10, smooth: true, dimension: '$' }); }); </script>
Knobs
Element specific usage
Knob elements require next file to be included into <head>
section of the page:
<script type="text/javascript" src="js/knobRot-0.2.2.js"></script>
Volume Knob
Adjust volume with this element.
Example
<div class="widget-knob widget-volume"> <input type="text" value="77" autocomplete="off" id="volume" /> </div>
<script type="text/javascript"> $(document).ready(function() { $('#volume').knobRot({ 'classes': ['volume'], 'dragVertical': false, 'frameCount': 47, 'frameWidth': 114, 'frameHeight': 114, 'detent': true, 'detentThreshold': 5, 'minimumValue': 0, 'maximumValue': 100, 'hideInput': true }); }); </script>
Balance Knob
Adjust balance with this element.
Example
<div class="widget-knob widget-balance"> <input type="text" value="36" autocomplete="off" id="balance" /> </div>
<script type="text/javascript"> $(document).ready(function() { $('#balance').knobRot({ 'classes': ['balance'], 'dragVertical': false, 'frameCount': 27, 'frameWidth': 104, 'frameHeight': 117, 'detent': true, 'detentThreshold': 2, 'minimumValue': -50, 'maximumValue': 50, 'hideInput': false }); }); </script>
Navigation
Website menu with dropdown submenu.
Example
<div class="dropdown-wrap boxed-velvet"> <ul class="dropdown inner clearfix"> <li><a href="#"><span>Account</span></a></li> <li><a href="#"><span>About Us</span></a> <ul> <li><a href="#">Portfolio</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Contacts</a> <ul> <li><a href="#">Gallery images</a></li> <li><a href="#">OneByOne Slider</a></li> <li><a href="#">Video in header</a></li> <li><a href="#">Image & Video Slider</a></li> </ul> </li> </ul> </li> <li><a href="#"><span>Settings</span></a> <ul> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Copyright</a></li> <li><a href="#">Terms of Service</a> <ul class="submenu-2"> <li><a href="#">Gallery images</a></li> <li><a href="#">OneByOne Slider</a></li> <li><a href="#">Video in header</a></li> <li><a href="#">Image & Video Slider</a></li> </ul> </li> </ul> </li> <li><a href="#"><span>Portfolio</span></a></li> <li><a href="#"><span>Log Out</span></a></li> </ul> </div>
Tabs
Add quick, dynamic tab functionality to transition through panes of local content. Two different Tab styles available.
Example
Be different, but better!

Intrepid Jonathan Trappe, 38, took off just like the 78-year-old character Carl Frederickson.
It’s all about a smile

A cluster balloonist who became the first person to fly the English Channel has Intrepid Jonathan Trappe, 38, took off just like the 78-year-old character Carl Frederickson.

14 September 2012
He made his film debut with a mirror part in Black to the Future Part II
Read More<!--Tabs default style--> <div class="tabs_framed"> <div class="inner"> <ul class="tabs clearfix"> <li><a href="#recent" data-toggle="tab">Recent</a></li> <li class="active"><a href="#popular" data-toggle="tab">Popular</a></li> </ul> <div class="tab-content boxed clearfix"> <div class="tab-pane fade" id="recent"> <!--place your content here--> </div> <div class="tab-pane fade in active" id="popular"> <!--place your content here--> </div> </div> </div> </div> <!--Tabs alternative style--> <div class="tabs_framed styled"> <div class="inner"> <ul class="tabs clearfix active_bookmark1"> <li class="active"><a href="#events" data-toggle="tab">Events</a></li> <li> <a href="#reminders" data-toggle="tab"> <sup class="note">3</sup>Reminders </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 clearfix"> <div class="tab-pane clearfix fade in active" id="events"> <!--place your content here--> </div> <div class="tab-pane clearfix fade" id="reminders"> <!--place your content here--> </div> <div class="tab-pane clearfix fade" id="starred"> <!--place your content here--> </div> <div class="tab-pane clearfix fade" id="archive"> <!--place your content here--> </div> </div> </div> </div>
Dividers
Separate content with dividers.
Example
<div class="divider"></div> <div class="divider dashed"></div>
Forms
Element specific usage
All the forms require next file to be included into <head>
section of the page:
<script src="js/jquery.powerful-placeholder.min.js"></script>
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/jquery.chosen.min.js" type="text/javascript"></script> <script src="js/nicEdit.js"></script>
Example
<div class="add-comment styled boxed" id="addcomments"> <div class="add-comment-title"><h3></h3></div> <div class="comment-form"> <form action="#" method="post" id="commentForm" class="ajax_form"> <div class="form-inner"> <div class="field_select"> <label for="contact_name" class="label_title">Name:</label> <select name="contact_name" id="contact_name" multiple data-placeholder="Your Selection"> <option value='example1@gmail.com'>Black Sabbath</option> <option value='example2@gmail.com'>Lana Ray</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="Wireframe" class="inputtext input_middle required" /> </div> <div class="clear"></div> <div class="field_text field_textarea"> <div id="edit_buttons" class="edit_buttons"></div> <label for="styled_message" class="label_title">Message:</label> <textarea cols="30" rows="10" name="styled_message" id="styled_message" class="textarea textarea_middle"></textarea> </div> <div class="clear"></div> </div> <div class="rowSubmit"> <a onclick="document.getElementById('commentForm').reset();return false" href="#" class="link-reset btn"><span>Discard</span></a> <span class="btn btn-red"> <input type="submit" id="send" value="Send Message" /> </span> </div> </form> </div> </div>
<script type="text/javascript"> // Multiselect jQuery(document).ready(function() { jQuery('#contact_name').chosen({ width: "100%" }); }); // Text Editor bkLib.onDomLoaded(function() { var myNicEditor = new nicEditor({ buttonList : [ 'bold', 'italic', 'underline', 'forecolor', 'left', 'center', 'right', 'justify' ] }); myNicEditor.setPanel('edit_buttons'); myNicEditor.addInstance('styled_message'); }); setTimeout(function () { var nic_width = $('.nicEdit-panel').width(); $('.nicEdit-container').css('width', nic_width); $('.nicEdit-main').css('width', nic_width-24); }, 2000); $(window).resize(function() { var nic_width = $('.nicEdit-panel').width(); $('.nicEdit-container').css('width', nic_width); $('.nicEdit-main').css('width', nic_width-24); }); </script>
Search Form
Example
<div class="widget-container widget_search boxed"> <div class="inner"> <form method="get" id="searchform2" action="#"> <div class="clearfix"> <span class="btn btn-small"> <input type="submit" id="searchsubmit2" value="Search" /> </span> <div class="input_wrap"> <span class="input_icon"></span> <input class="inputField" name="search3" type="text" placeholder="Type word here" /> </div> </div> </form> </div> </div>
Pricing
Use pricing items to announce prices for your services. Add class col_active
to price_col
to highlight pricing item. Add color class to price_col
class to change item color.
Available color classes are the next: price_col_green
, price_col_blue
, price_col_purple
.
Pricing Items default style
Example
-
$599monthBasic All important futures for work
- 250 SKU’s
- 1 GB Storage
- 3,5% transaction fee
-
-
$899monthUltimate All important futures for work
- Unlimited SKU’s
- 20 GB Storage
- 1% transaction fee
<div class="pricing_box price_style1 clearfix"> <ul> <li class="price_col"> <div class="price_item"> <div class="inner"> <div class="badge"></div> <div class="price_col_head"> <span class="price"> <em>$</em>5<sup>99</sup><span>month</span> </span> </div> <div class="price_col_body clearfix"> <div class="price_body_inner"> <div class="price_body_top"> <strong>Basic</strong> <span>All important futures for work</span> </div> <ul> <li>250 SKU’s</li> <li>1 GB Storage</li> <li>3,5% transaction fee</li> </ul> </div> </div> <div class="price_col_foot"> <div class="sign_up"> <a href="#" class="btn btn-large"><span>Try a Week</span></a> </div> </div> </div> </div> </li> ... ... ... </ul> </div>
Content Box
Use titled box to display different content.
Example
<div class="widget-container boxed"> <div class="inner"> <h3 class="widget-title">Widget Title</h3> <!-- place your content here --> </div> </div>
Message Field
Example
-
William Bradley "Brad" Pitt is an American actor and film producer. Pitt has received four Academy nominations and five Award nominations.
<div class="comment-list clearfix" id="comments"> <ol> <li class="comment"> <div class="comment-body"> <div class="inner"> <div class="comment-arrow"></div> <div class="comment-avatar"> <div class="avatar"> <img src="images/temp/avatar1.png" alt="" /> </div> </div> <div class="comment-text"> <div class="comment-author clearfix"> <a href="#" class="link-author">Brad Pit</a> <span class="comment-date">June 26, 2013</span> | <a href="#addcomments" class="link-reply anchor">Reply</a> </div> <div class="comment-entry"> William Bradley "Brad" Pitt is an American actor and film producer. Pitt has received four Academy nominations and five Award nominations. </div> </div> <div class="clear"></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"> <div class="inner"> <video id="my_video_1" class="video-js vjs-default-skin" controls loop preload="auto" poster="images/temp/vjs_poster2.png" data-setup="{}"> <source src="http://path-to-video/video.mp4" type='video/mp4'> </video> </div> </div>
<script> _V_("my_video_1").ready(function(){ var myPlayer = this; var aspectRatio = 192/380; var width = document.getElementById(myPlayer.id).parentElement.offsetWidth; myPlayer.width(width).height( width * aspectRatio ); 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 class="inner"> <div id="jquery_jplayer_1" class="jp-jplayer"></div> <div id="jp_container_1" class="jp-audio"> <div class="jp-type-playlist"> <div class="jp-playlist"> <ul> <li></li> </ul> </div> <div class="jp-gui jp-interface"> <div class="jp-progress"> <div class="jp-seek-bar"> <div class="jp-play-bar"></div> </div> </div> <ul class="jp-controls"> <li><a href="javascript:;" class="jp-previous disabled" tabindex="1">previous</a></li> <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li> <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li> <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li> <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li> <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li> <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li> <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li> </ul> <div class="jp-volume-bar"> <div class="jp-volume-bar-value"></div> </div> <div class="jp-current-time"></div> <div class="jp-duration"></div> <ul class="jp-toggles"> <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li> <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li> <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li> <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></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> </div> </div>
<script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ var $ = jQuery; new jPlayerPlaylist({ jPlayer: "#jquery_jplayer_1", cssSelectorAncestor: "#jp_container_1" }, [ { title:"<div class='title'><img src='images/temp/music-player1.png'><div><strong>Fall Out Boy</strong><span>Dance, Dance</span></div></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='title'><img src='images/temp/music-player2.png'><div><strong>Backstreet Boys</strong><span>Dance</span></div></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='title'><img src='images/temp/music-player3.png'><div><strong>Pet Shop Boys</strong><span>Dance, Dance, Dance</span></div></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
This slideshow is based on Bootstrap's carousel.js
Example
<div class="widget-container widget_gallery boxed"> <div class="inner"> <div id="myCarousel" class="carousel slide" data-interval="20000"> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"> <img src="images/temp/top-slider-5.jpg" alt="" /> <div class="carousel-title"> <h6>Brave animated series</h6> <p>Disney Pixar</p> </div> </div> <div class="item"> <img src="images/temp/top-slider-2.jpg" alt="" /> <div class="carousel-title"> <h6>Horton</h6> <p>Change your fate</p> </div> </div> ... ... ... </div> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> ... ... ... </ol> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a> <a class="carousel-control right" href="#myCarousel" data-slide="next"></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> <link href="css/jquery-ui-1.8.20.custom.css" rel="stylesheet">
Example
<div class="widget-container widget_calendar boxed"> <div class="inner"> <input type="text" name="date_departure" class="inputField" id="date_departure"> </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_departure'); }); // ]]> </script>
User Profile
Display information about user in a styled box.
Example
<div class="widget-container widget_avatar boxed"> <div class="inner"> <h5>Gabrielle Shanon</h5> <span class="subtitle">Comedy actors</span> <div class="avatar"> <img src="images/temp/avatar.png" alt="" /> </div> <div class="followers"> <span class="counter">1489</span> <span>followers</span> </div> <div class="follow"> <a href="#" class="btn btn-red"> <span><i class="plus"></i>Follow</span> </a> </div> </div> </div>
Simple Graph
Build graphs with Flot - attractive JavaScript plotting for jQuery.
Element specific usage
Flot require next files to be included into <head>
section of the page:
<!--[if lte IE 8]> <script type="text/javascript" src="js/excanvas.min.js"></script> <![endif]--> <script type="text/javascript" src="js/jquery.flot.js"></script> <script type="text/javascript" src="js/jquery.flot.resize.js"></script>
Example
<div class="widget-container widget_graph boxed"> <div class="inner"> <div id="graph" class="graph"></div> </div> </div>
<script type="text/javascript"> $(function() { var graphwidth = $('.widget_graph .inner').width(); $('.widget_graph .graph').css('height', parseInt(graphwidth/1.7)); $(window).resize(function() { graphwidth = $('.widget_graph .inner').width(); $('.widget_graph .graph').css('height', parseInt(graphwidth/1.7)); }); var d1 = [[0, 9], [1, 23], [1.8, 7], [2.2, 24], [2.8, 18], [4, 36]]; var graphholder = $("#graph"); var plot = $.plot(graphholder, [d1], { colors: ["#de2a19", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"], xaxis: { min: null, max: null }, yaxis: { autoscaleMargin: 0.02 }, series: { lines: { show: true, lineWidth: 3, fill: true, fillColor: "rgba(185,185,185,0.23)" }, points: { show: true, radius: 5, lineWidth: 2, } }, grid: { hoverable: true, clickable: true, margin: 12, color: "#aaa", borderColor: "#dfdcd6" } }); function showTooltip(x, y, contents) { $("<div id='graph-tooltip'>" + contents + "</div>").css({top: y - 40, left: x - 20}).appendTo("body").fadeIn(200); }; var previousPoint = null; $("#graph").bind("plothover", function (event, pos, item) { if (item) { if (previousPoint != item.dataIndex) { previousPoint = item.dataIndex; $("#graph-tooltip").remove(); var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2); showTooltip(item.pageX, item.pageY, '$' + y*100); } } else { $("#graph-tooltip").remove(); previousPoint = null; } }); }); </script>