What is Skinny Frames UI Kit

Skinny Frames 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 Skinny Frames UI Kit in your ongoing project.

What is included

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

skinny-frames
├───docs
│   ├───css
│   ├───images
│   └───js
├───skinny-frames-css
│   ├───css
│   ├───fonts
│   │   └───video-js
│   ├───images
│   │   ├───icons
│   │   └───temp
│   └───js
│       └───libs
└───skinny-frames-less
    ├───fonts
    │   └───video-js
    ├───images
    │   ├───icons
    │   └───temp
    ├───js
    │   └───libs
    └───less
        └───bootstrap
                                    
docs/
contains this documentation.
skinny-frames-css/
contains Skinny Frames 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.
skinny-frames-less/
contains Skinny Frames 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 skinny-frames-css and skinny-frames-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 Skinny Frames UI Kit is built on Bootstrap 3 framework, it supports the same browsers as Bootstrap.

Getting Started

To start working with Skinny Frames 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 skinny-frames-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 skinny-frames-less folder. Use LESS if you want to modify Skinny Frames 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 Skinny Frames 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>Skinny Frames | Template</title>

    <!-- main JS libs -->
    <script src="js/libs/modernizr.min.js"></script>
    <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]-->
    <!--[if gte IE 9]>
    <style type="text/css">
        .gradient {filter: none !important;}
    </style>
    <![endif]-->
</head>

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

Typography

Skinny Frames UI Kit uses free Sanchez webfont available at the Google Fonts. The global default font-size is 14px, this is applied to the <body>. In addition, all <p> (paragraphs) receive a 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-white"><span>White</span></a>
<a href="#" class="btn btn-gray"><span>Gray</span></a>
<a href="#" class="btn btn-round"><span>Rounded</span></a>
<a href="#" class="btn btn-caps"><span>All Capitals</span></a>
                                

Alternative Buttons

Another button style with different colors.

Example

<a href="#" class="btn"><span>Pink</span></a>
<a href="#" class="btn btn-orange"><span>Orange</span></a>
<a href="#" class="btn btn-brown"><span>Brown</span></a>
<a href="#" class="btn btn-green"><span>Green</span></a>
<a href="#" class="btn btn-blue"><span>Blue</span></a>
                                

Buttons with Different Sizes

Four different button sizes available.

Example

<a href="#" class="btn"><span>Default</span></a>
<a href="#" class="btn btn-large"><span>Large</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 btn-middle"><span>Download all files</span></a>
<a href="#" class="btn btn-right"><span>Next</span></a>
                                

Special Buttons

Example

<a href="#" class="btn btn-follow"><span>Follow</span></a>
<a href="#" class="btn btn-send"><span>Send Message</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

Pink Ribbon
Brown Ribbon
Green Ribbon
<div class="ribbon">
    <div class="ribbon-stitches-top"></div>
    <span>Pink Ribbon</span>
</div>

<div class="ribbon ribbon-brown">
    <div class="ribbon-stitches-top"></div>
    <span>Brown Ribbon</span>
</div>

<div class="ribbon ribbon-green">
    <div class="ribbon-stitches-top"></div>
    <span>Green Ribbon</span>
</div>
                                

Badges

Easily highlight items with Badges.

Example

Text widget

Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate

Text widget

Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate

Text widget

Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate

<div class="widget-container widget-text boxed badged">
    <div class="inner">
        <div class="badge-top"></div>
        <h3 class="widget-title">Text widget</h3>
        <div class="textwidget">
        <p>Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate</p>
        </div>
        <div class="badge-bottom"></div>
    </div>
</div>

<div class="widget-container widget-text boxed badged badge-green">
    <div class="inner">
        <div class="badge-top"></div>
        <h3 class="widget-title">Text widget</h3>
        <div class="textwidget">
        <p>Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate</p>
        </div>
        <div class="badge-bottom"></div>
    </div>
</div>

<div class="widget-container widget-text boxed badged badge-brown">
    <div class="inner">
        <div class="badge-top"></div>
        <h3 class="widget-title">Text widget</h3>
        <div class="textwidget">
        <p>Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate</p>
        </div>
        <div class="badge-bottom"></div>
    </div>
</div>
                                

Rating Stars

Use rating stars for voting.

Example

<div class="rating clearfix">
    <span class="star on" rel="1"></span>
    <span class="star on" rel="2"></span>
    <span class="star on" rel="3"></span>
    <span class="star off" rel="4"></span>
    <span class="star off" 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">Simple Checkbox</label>
    </div>
    
    <div class="rowCheckbox switch">
        <input name="signup2" type="checkbox" checked id="signup2" value="signup2">
        <label for="signup2">Switch</label>
    </div>
    
    <div class="rowCheckbox switch-large">
        <input name="signup3" type="checkbox" checked id="signup3" value="signup3">
        <label for="signup3">Large Switch</label>
    </div>
</div>
                                    
<div class="input_styled checklist">
    <div class="rowCheckbox label-right">
        <input name="signup4" type="checkbox" checked id="signup4" value="signup4">
        <label for="signup4">Text on the Left</label>
    </div>

    <div class="rowCheckbox switch label-right">
        <input name="signup5" type="checkbox" checked id="signup5" value="signup5">
        <label for="signup5">Text on the Left</label>
    </div>

    <div class="rowCheckbox switch-large label-right">
        <input name="signup6" type="checkbox" checked id="signup6" value="signup6">
        <label for="signup6">Text on the Left</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">Checked</label>
    </div>
    
    <div class="rowRadio">
        <input type="radio" name="survey" value="radio2" id="radio2">
        <label for="radio2">Unchecked</label>
    </div>
</div>
                                    
<div class="input_styled radiolist">
    <div class="rowRadio label-right">
        <input type="radio" name="survey" value="radio3" id="radio3">
        <label for="radio3">Text on the Left</label>
    </div>
    
    <div class="rowRadio label-right">
        <input type="radio" name="survey" value="radio4" id="radio4">
        <label for="radio4">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.

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

0% 100%
0% 100%
<!-- 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="total"></div>
    <div class="elapsed"></div>
    <div class="remained"></div>
    <div class="pbar"></div>
</div>

<!-- Progress Bar with Download Bar -->
<div id="progressBar2" class="progressbar styled">
    <span class="mark-left">0%</span>
    <span class="mark-right">100%</span>
    <div class="percent"></div>
    <div class="total"></div>
    <div class="elapsed"></div>
    <div class="remained"></div>
    <div class="pbar">
        <div id="downloadBar2" class="downloadbar">
            <div class="pbar"></div>
        </div>
    </div>
</div>
                                
Enable Progress Bars via JS:
<script type="text/javascript">
    $(document).ready(function() {

        // Progress Bar
        $('#progressBar1').anim_progressbar({
            totaltime: 800
        });

        // Progress Bar with Download Bar
        $('#progressBar2').anim_progressbar({
            totaltime: 900
        });
        $('#downloadBar2').anim_progressbar({
            totaltime: 600
        });
        
    });
</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 styled">
    <input id="price-range" type="text" name="price-range" value="240;760">
</div>
                                
Enable Price Range via JS:
<script type="text/javascript" >
    jQuery(document).ready(function($) {
        $("#price-range").rangeslider({
            from: 0,
            to: 1000,
            limits: false,
            scale: ['0$', '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="100"  autocomplete="off" id="volume" />
</div>
                                
Enable Volume via JS:
<script type="text/javascript">
    $(document).ready(function() {
        $('#volume').knobRot({
            'classes': ['volume'],
            'dragVertical': false,
            'frameCount': 51,
            'frameWidth': 81,
            'frameHeight': 81,
            '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="0" autocomplete="off" id="balance" />
</div>
                                
Enable Balance via JS:
<script type="text/javascript">
    $(document).ready(function() {
        $('#balance').knobRot({
            'classes': ['balance'],
            'dragVertical': false,
            'frameCount': 51,
            'frameWidth': 87,
            'frameHeight': 87,
            'detent': true,
            'detentThreshold': 2,
            'minimumValue': -50,
            'maximumValue': 50,
            'hideInput': true
        });
    });
</script>
                                

Website Menu

Website menu with dropdown submenu.

Example

<ul class="menu clearfix ">
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>About</span></a>
        <ul>
            <li><a href="#">Web design</a></li>
            <li><a href="#">User interface</a></li>
            <li><a href="#">Social media</a>
                <ul>
                    <li><a href="#">Gallery images</a></li>
                    <li><a href="#">OneByOne Slider</a></li>
                    <li><a href="#">Audio Player</a></li>
                    <li><a href="#">Video Player</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#"><span>Contacts</span></a></li>
    <li><a href="#"><span>Products</span></a></li>
</ul>
                                

Example

<div class="dropdown gradient">
    <a id="drop" href="#" role="button" class="dropdown-toggle gradient" data-toggle="dropdown"><span></span>Settings</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop">
        <li role="presentation"><a role="menuitem" href="#">Web design</a></li>
        <li role="presentation"><a role="menuitem" href="#">User interface</a></li>
        <li role="presentation"><a role="menuitem" href="#">Social Media</a></li>
        <li role="presentation"><a role="menuitem" href="#">Reminder</a></li>
    </ul>
</div>
                                

Tabs

Add quick, dynamic tab functionality to transition through panes of local content. Two different Tab styles available.

Example

4 august 2013

He made his film debut with a minor part in Back to the Future

See more

5 November

He made his film debut with a minor part in Back to the Future

See more

11 October

He made his film debut with a minor part in Back to the Future

See more

14 September

He made his film debut with a minor part in Back to the Future

See more
<!-- tabs -->
<div class="tabs-framed styled">
    <div class="inner">
        <ul class="tabs clearfix">
            <li class="active"><a href="#events" data-toggle="tab">Events</a></li>
            <li><a href="#reminder" data-toggle="tab"><sup class="note">3</sup>Reminder</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 boxed">
            <div class="tab-pane fade in active clearfix" id="events">
                <div class="tab-image pull-left"><img src="../images/temp/tab-img-5.jpg" alt="" /></div>
                <h4>4 august 2013</h4>
                <p>He made his film debut with a minor part in Back to the Future</p>
                <a href="#" class="btn btn-green"><span>See more</span></a>
            </div>
            <div class="tab-pane fade clearfix" id="reminder">
                <div class="tab-image pull-right"><img src="../images/temp/tab-img-6.jpg" alt="" /></div>
                <h4>5 November</h4>
                <p>He made his film debut with a minor part in Back to the Future</p>
                <a href="#" class="btn btn-green"><span>See more</span></a>
            </div>
            <div class="tab-pane fade clearfix" id="starred">
                <div class="tab-image pull-left"><img src="../images/temp/tab-img-7.jpg" alt="" /></div>
                <h4>11 October</h4>
                <p>He made his film debut with a minor part in Back to the Future</p>
                <a href="#" class="btn btn-green"><span>See more</span></a>
            </div>
            <div class="tab-pane fade clearfix" id="archive">
                <div class="tab-image pull-right"><img src="../images/temp/tab-img-8.jpg" alt="" /></div>
                <h4>14 September</h4>
                <p>He made his film debut with a minor part in Back to the Future</p>
                <a href="#" class="btn btn-green"><span>See more</span></a>
            </div>
        </div>
    </div>
</div>
<!--/ tabs -->          
                                

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>
                                

Example

Write a message

<div class="add-comment styled boxed" id="addcomments">
    <div class="add-comment-title"><h3>Write a message</h3></div>
    <div class="comment-form">
        <form action="#" method="post" id="commentForm">
            <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="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 lightPlaceholder">
                    <label for="subject" class="label_title">Subject:</label>
                    <input type="text" name="subject" id="subject" value="" placeholder="ex. Electrosoul system" />
                </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>
            <div class="rowSubmit">
                <a onclick="document.getElementById('commentForm').reset(); return false" href="#" class="link-reset btn btn-middle btn-gray"><span>Discard</span></a>
                <span class="btn btn-send"><input type="submit" id="send" value="Send Message" /></span>
            </div>
        </form>
    </div>
</div>
                                
Enable Contact Form via JS:
<script type="text/javascript">
    
    // Chosen
    jQuery(document).ready(function() {
        jQuery('#contact-name').chosen({ width: "100%" });
        jQuery('#commentForm .link-reset').click(function(){
            jQuery("#contact-name").trigger("chosen:updated");
        });
    });

    // NicEdit
    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');
            jQuery('#nicedit-message').val('');
            myNicEditor.panelInstance('nicedit-message');
        });
    });
</script>
                                

Two different styles available.

Example

<!-- Widget Search Default style -->
<div class="widget-container widget-search boxed">
    <div class="inner">
        <form method="get" id="searchform" action="#">
            <span class="btn btn-middle btn-gray">
                <input type="submit" value="Search" />
            </span>
            <div class="field_text">
                <input name="search" value="" type="text" placeholder="Type word here" />
            </div>
        </form>
    </div>
</div>
                                    
<!-- Widget Search Alternative style -->
<div class="widget-container widget-search boxed styled">
    <div class="inner">
        <form method="get" id="searchform2" action="#">
            <span class="btn btn-middle btn-caps">
                <input type="submit" value="Search" />
            </span>
            <div class="field_text lightPlaceholder">
                <input name="search2" value="" type="text" placeholder="Type word here" />
            </div>
        </form>
    </div>
</div>                                    
                                

Use pricing items to announce prices for your services. Three different pricing styles available. 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

  • $/month99
    Basic All important futures for work
    • 250 SKU’s
    • 1 GB Storage
    • 3,5% transaction fee
<div class="pricing_box price_style1">
    <ul>
        <li class="price_col price_col_green">
            <div class="price_item">
                <div class="inner">
                    <div class="badge badge-popular"></div>
                    <div class="price_col_head">
                        <span class="price">
                            <em>$</em>99<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-gray">
                                <span>Try a Week</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
                                

Content Box

Use titled box to display different content.

Example

Widget Title

<div class="widget-container boxed border-top pink">
    <div class="inner">
        <h3 class="widget-title">Widget Title</h3>
        <!-- place your content here -->
    </div>
</div>
                                

Message Field

Example

  1. He made his film debut with a minor part in Back to the Future Part II (1989), then landed a succession.
<div class="comment-list message-field">
    <ol>
        <li class="comment">
            <div class="comment-body">
                <div class="comment-avatar">
                    <div class="avatar">
                        <img src="images/temp/avatar5.png" alt="" />
                    </div>
                </div>
                <div class="comment-text">
                    <div class="comment-author">
                        <a href="#" class="link-author">Elijah Wood</a>
                    </div>
                    <div class="comment-entry">
                        He made his film debut with a minor part in Back to the Future Part II (1989), then landed a succession. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </div>
                </div>
            </div>
        </li>
    </ol>
</div>
                                

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="song-title"></div>
                <div class="jp-current-time"></div>
                <div class="jp-duration"></div>
                <div class="clear"></div>
                <div class="jp-progress">
                    <div class="jp-seek-bar">
                        <div class="jp-play-bar gradient">
                            <div class="jp-seek-handle"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="jp-controls jp-buttons">
                <a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a><!--
                --><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</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>
            </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:"<span class='item-artist'>Rihanna - </span><span class='item-song'>Only Girl</span><img class='item-image' src='images/temp/music-player-4.jpg' alt='' />",
                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:"<span class='item-artist'>Yaki Da - </span><span class='item-song'>Dancing</span><img class='item-image' src='images/temp/music-player-5.jpg' alt='' />",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg"
            },
            {
                title:"<span class='item-artist'>Pandora - </span><span class='item-song'>Sands of Time</span><img class='item-image' src='images/temp/music-player-6.jpg' alt='' />",
                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="myCarousel3" class="carousel slide" data-interval="20000">
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="active item">
                    <a href="#">
                        <img src="images/temp/post-img-1.jpg" alt="" />
                    </a>
                    <div class="carousel-desc gradient">
                        <strong>Brave</strong>
                        <span>«Change your fate.»</span>
                    </div>
                </div>
                <div class="item">
                    <a href="#">
                        <img src="images/temp/post-img-2.jpg" alt="" />
                    </a>
                    <div class="carousel-desc gradient">
                        <strong>Ice Age</strong>
                        <span>«Change your fate.»</span>
                    </div>
                </div>
                ...
                ...
                ...
            </div>
            <!-- Carousel indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel3" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel3" data-slide-to="1"></li>
                ...
                ...
                ...
            </ol>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#myCarousel3" data-slide="prev"></a>
            <a class="carousel-control right" href="#myCarousel3" data-slide="next"></a>
        </div>
    </div>
</div>
                                    

Calendar

Calendar allow users to select multiple dates. Two different styles available.

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


<!-- Widget Calendar default style -->                                    
<div class="widget-container widget-calendar boxed">
    <div class="inner">
        <input type="text" name="date_departure" class="inputField" value="" id="date_departure">
    </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_departure');
    });
    // ]]>
</script>
                                

User Profile

Display information about user in a styled box.

Example

Bradley Cooper
Сomedian actor
<div class="widget-container widget-profile boxed">
    <div class="inner clearfix">
        <div class="avatar">
            <img src="images/temp/avatar.png" alt="" />
        </div>
        <h5>Bradley Cooper</h5>
        <span class="subtitle">Сomedian actor</span>
        <div class="follow">
            <a href="#" class="btn btn-follow"><span>Follow</span></a>
            <div class="followers">
                <strong>1687</strong>
                <span>followers</span>
            </div>
        </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>
                                
Enable Graph via JS:
<script type="text/javascript">
    $(function() {
        var graphwidth = $('.widget-graph .inner').width();
        $('.widget-graph .graph').css('height', parseInt(graphwidth/1.6));
        $(window).resize(function() {
            graphwidth = $('.widget-graph .inner').width();
            $('.widget-graph .graph').css('height', parseInt(graphwidth/1.6));
        });

        var d1 = [[0, 9], [1, 23], [1.6, 8], [2.2, 24], [2.8, 18], [4, 36]],
        graphholder = $("#graph"),
        plot = $.plot(graphholder, [d1], {
            colors: ["#ee5190", "#ee5190", "#ee5190", "#ee5190", "#ee5190"],
            xaxis: {
                min: null,
                max: null
            },
            yaxis: {
                autoscaleMargin: 0.02
            },
            series: {
                lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true,
                    fillColor: "rgba(255,168,0,0.11)"
                },
                points: {
                    show: true,
                    radius: 5,
                    lineWidth: 2,
                    fillColor: "#fff"
                },
                shadowSize: 0
            },
            grid: {
                hoverable: true,
                clickable: true,
                margin: 15,
                color: "#333",
                borderColor: "#e5e5e5"
            }
        });

        function showTooltip(x, y, contents) {
            $("<div id='graph-tooltip'>" + contents + "</div>").css({top: y - 60, left: x - 28}).appendTo("body").fadeIn(200);
        }

        var previousPoint = null;
        graphholder.on("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>