What is Vanilla Cream UI Kit

Vanilla Cream 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 Vanilla Cream UI Kit in your ongoing project.

What is included

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

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

Getting Started

To start working with Vanilla Cream 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 vanilla-cream-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 vanilla-cream-less folder. Use LESS if you want to modify Vanilla Cream 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 Vanilla Cream 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

Vanilla Cream UI Kit uses free Open Sans webfont available at the Google Fonts. The global default font-size is 13px, with a font-weight of 400. This is applied to the <body> and all paragraphs. 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>Read more</span></a>
<a href="#" class="btn btn-white"><span>Read more</span></a>
<a href="#" class="btn btn-large btn-green"><span>Read more</span></a>
                                

Button with hover effect

Button with hover and active states.

Example

<a href="#" class="btn btn-hover"><span>Normal</span></a>
<a href="#" class="btn btn-hover hover"><span>Hover</span></a>
<a href="#" class="btn btn-hover active"><span>Pressed</span></a>
                                

Shaped Buttons

Buttons with left and right pointers.

Example

<a href="#" class="btn btn-left"><span>Back</span></a>
<a href="#" class="btn btn-right"><span>Next</span></a>
                                

Mini Buttons

Small rounded Buttons.

Example

<a href="#" class="btn btn-mini" title="Check"></a>
<a href="#" class="btn btn-mini btn-play" title="Play"></a>
<a href="#" class="btn btn-mini btn-close" title="Close"></a>
                                

Special Buttons

Buttons for different purposes.

Example

<a href="#" class="btn btn-follow"><span>Follow</span></a>
                                    
<a href="#" class="btn btn-search btn-green"><span>Search</span></a>
                                    
<a href="#" class="btn btn-left btn-green"><span>Back</span></a><!--
--><a href="#" class="btn btn-acute"><span>Show More Polls</span></a><!--
--><a href="#" class="btn btn-right btn-green"><span>Next</span></a>
                                

Buttoned Input

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

Example

<span class="btn btn-hover"><input type="submit" value="Submit" /></span>
                                

Share Button

Share Button with counter.

Example

<a class="shareButton gradient" href="#">
    <span class="shareIcon"><i></i></span>
    <span class="shareText">Share</span>
    <span class="shareCount gradient">3K</span>
</a>
                                

List Selector

Example

<ul id="listSelector" class="listSelector gradient">
    <li class="list-multi"><a href="#"></a></li><!--
    --><li class="list-double selected"><a href="#"></a></li><!--
    --><li class="list-single"><a href="#"></a></li>
</ul>
                                

Ribbons

Easily highlight items with Ribbons.

Example

10 December 2012

10 December 2012

10 December 2012
<div class="ribbon"><span>10 December 2012</span></div>
<div class="ribbon ribbon-green"><span>10 December 2012</span></div>
<div class="ribbon ribbon-brown"><span>10 December 2012</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-fresh"></div>
<div class="badge badge-sale"></div>

<div class="badge style2"></div>
<div class="badge style2 badge-green"></div>
<div class="badge style2 badge-brown"></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">Simple Checkbox</label>
	</div>

	<div class="rowCheckbox checkbox-middle">
		<input name="signup2" type="checkbox" checked id="signup2" value="signup2">
		<label for="signup2">Switch</label>
	</div>

	<div class="rowCheckbox checkbox-large">
		<input name="signup3" type="checkbox" checked id="signup3" value="signup3">
		<label for="signup3">Large 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_v3" id="radio_v3" checked>
		<label for="radio_v3">Checked</label>
	</div>
	<div class="rowRadio">
		<input type="radio" name="survey" value="radio_v4" id="radio_v4">
		<label for="radio_v4">Unchecked</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>
                                

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

These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.

These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.

These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.

These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.

<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>
                                
Enable Scroll Bars via JS:
<script type="text/javascript">
    jQuery(function()
    {
        jQuery('.scrollbar').jScrollPane({
            verticalDragMaxHeight: 55,
            verticalDragMinHeight:55
        });

        jQuery('.scrollbar.style2').jScrollPane({
            verticalDragMaxHeight: 30,
            verticalDragMinHeight:30
        });

        jQuery('.scrollbar.style3').jScrollPane({
            verticalDragMaxHeight: 14,
            verticalDragMinHeight:14
        });

        jQuery('.scrollbar.style4').jScrollPane({
            verticalDragMaxHeight: 55,
            verticalDragMinHeight:55
        });
    });
</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%
<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>
                                
Enable Progress Bars via JS:
<script type="text/javascript">
    $(document).ready(function() {
        $('#progressBar1').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">
    <input id="price_range" type="text" name="price_range" value="120;360">
</div>
                                
Enable Price Range via JS:
<script type="text/javascript" >
    jQuery(document).ready(function($) {
        // Price Range Input
        $("#price_range").rangeslider({
            from: 10,
            to: 500,
            limits: false,
            scale: ['10', '500'],
            heterogeneity: ['50/250'],
            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': 45,
            'frameWidth': 88,
            'frameHeight': 88,
            '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

Use it as a main menu for your site.

Example

<div id="topmenu">
    <ul class="dropdown clearfix gradient">
        <li class="menu-level-0"><a href="#"><span>Home</span></a></li>
        <li class="menu-level-0"><a href="#"><span>About</span></a>
            <ul class="submenu-1">
                <li class="menu-level-1"><a href="#">Web design</a></li>
                <li class="menu-level-1"><a href="#">User interface</a></li>
                <li class="menu-level-1"><a href="#">Social media</a>
                    <ul class="submenu-2">
                        <li class="menu-level-2"><a href="#">Gallery images</a></li>
                        <li class="menu-level-2"><a href="#">OneByOne Slider</a></li>
                        <li class="menu-level-2"><a href="#">Video in header</a></li>
                        <li class="menu-level-2"><a href="#">Video Slider</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="menu-level-0"><a href="#"><span>Contacts</span></a></li>
    </ul>
</div>
                                

Two different styles available.

Example

<!-- Dropdown Menu default style -->
<div class="dropdownMenu gradient">
    <a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><i class="ico-cat"></i>Options</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><i class="ico-cat ico-cat2"></i>Home</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><i class="ico-cat ico-cat3"></i>Like</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><i class="ico-cat ico-cat4"></i>Settings</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><i class="ico-cat ico-cat5"></i>Messages</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><i class="ico-cat ico-cat6"></i>Conversation</a></li>
    </ul>
</div>
                                    
<!-- Dropdown Menu alternative style -->
<div class="dropdownMenu style2 gradient">
    <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><i class="ico-cat ico-cat1"></i>Products</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><i class="ico-cat ico-cat2"></i>Home</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><i class="ico-cat ico-cat3"></i>Like</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><i class="ico-cat ico-cat4"></i>Settings</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><i class="ico-cat ico-cat5"></i>Messages</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><i class="ico-cat ico-cat6"></i>Conversation</a></li>
    </ul>
</div>                                    
                                

Tabs

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

Example

4 august 2013

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

See more

5 November

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

See more
<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>
        </ul>

        <div class="tab-content clearfix">
            <div class="tab-pane fade in active" id="events">
                <!--place your content here-->
            </div>
            <div class="tab-pane fade" id="reminders">
                <!--place your content here-->
            </div>
        </div>
    </div>
</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

×

Write a message

<div class="add-comment styled boxed boxed-cream" id="addcomments">
    <span class="add-comment-close">×</span>
    <div class="add-comment-title gradient"><h3>Write a message</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'>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="ex. Happy New Year!" class="inputtext input_middle required" />
                </div>
                <div class="clear"></div>
                <div class="field_text field_textarea">
                    <div id="edit_buttons" class="edit_buttons gradient"></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 btn-white"><span>Discard</span></a>
                <span class="btn"><input type="submit" id="send" value="Send" /></span>
            </div>
        </form>
    </div>
</div>
                                
Enable Contact Form via JS:
<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>
                                

Login Form

Element specific usage

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

<script src="js/jquery.customInput.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
                                

Example

<div class="widget-container widget_login styled boxed boxed-cream">
    <div class="inner">
        <form action="#" method="post" class="loginform">
            <div class="field_text">
                <label for="user_login2" class="label_title">Email</label>
                <input type="text" name="log2" id="user_login2" value="" placeholder="Email" />
                <span class="input_icon input_email"></span>
            </div>
            <div class="field_text">
                <label for="user_pass2" class="label_title">Password</label>
                <input type="password" name="pwd2" id="user_pass2" value="" placeholder="Password" />
                <span class="input_icon input_pass"></span>
            </div>
            <div class="rowRemember clearfix">
                <div class="forgetmenot input_styled checklist">
                    <div class="rowCheckbox checkbox-middle">
                        <input type="checkbox" name="remember2" id="remember2" value="" checked>
                        <label for="remember2">Remember me?</label>
                    </div>
                </div>
                <span class="forget_password"><a href="#">Forgot Password?</a></span>
            </div>
            <div class="rowSubmit">
                <span class="btn btn-hover">
                    <input type="submit" name="login-submit2" id="login-submit2" value="Subscribe Now" />
                </span>
            </div>
        </form>
    </div>
</div>
                                

Example

<div class="widget-container widget_search styled boxed boxed-cream">
    <div class="inner">
        <form method="get" id="searchform2" action="#">
            <div class="clearfix">
                <span class="btn">
                    <input type="submit" value="Search" />
                </span>
                <div class="field_text">
                    <input name="search2" value="" type="text" placeholder="Type word here" />
                </div>
            </div>
        </form>
    </div>
</div>
                                

Pricing

Use pricing items to announce prices for your services. Two 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_light.

Pricing Items default style

Example

  • $99/month
    Basic Lots of clients & users
    • 250 SKU’s
    • 1 GB Storage
    • 3,5% transaction fee
  • $299/month
    Premium Lots of clients & users
    • 2,500 SKU’s
    • 5 GB Storage
    • 1,5% transaction fee
  • $499/month
    Ultimate Lots of clients & users
    • Unlimited SKU’s
    • 20 GB Storage
    • 1% transaction fee
<div class="pricing_box price_style1 clearfix">
    <ul>

        <li class="price_col">
            <!--pricing item-->
            <div class="price_item">
                <div class="inner">
                    <div class="badge style2"></div>
                    <div class="price_col_head">
                        <span class="price">
                            <sup>$</sup>
                            <em>99</em>
                            <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>Lots of clients & users</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">
                                <span>Try a Week</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ pricing-item -->
        </li>

        <li class="price_col price_col_green col_active">
            <!--pricing item-->
            <div class="price_item">
                <div class="inner">
                    <div class="badge style2"></div>
                    <div class="price_col_head">
                        <span class="price">
                            <sup>$</sup>
                            <em>299</em>
                            <span>/month</span>
                        </span>
                    </div>
                    <div class="price_col_body clearfix">
                        <div class="price_body_inner">
                            <div class="price_body_top">
                                <strong>Premium</strong>
                                <span>Lots of clients  & users</span>
                            </div>
                            <ul>
                                <li>2,500 SKU’s</li>
                                <li>5 GB Storage</li>
                                <li>1,5% transaction fee</li>
                            </ul>
                        </div>
                    </div>
                    <div class="price_col_foot">
                        <div class="sign_up">
                            <a href="#" class="btn btn-green btn-large">
                                <span>Buy Now</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ pricing-item -->
        </li>

        <li class="price_col">
            <!--pricing item-->
            <div class="price_item">
                <div class="badge style2"></div>
                <div class="inner">
                    <div class="price_col_head">
                        <span class="price">
                            <sup>$</sup>
                            <em>499</em>
                            <span>/month</span>
                        </span>
                    </div>
                    <div class="price_col_body clearfix">
                        <div class="price_body_inner">
                            <div class="price_body_top">
                                <strong>Ultimate</strong>
                                <span>Lots of clients & users</span>
                            </div>
                            <ul>
                                <li>Unlimited SKU’s</li>
                                <li>20 GB Storage</li>
                                <li>1% transaction fee</li>
                            </ul>
                        </div>
                    </div>
                    <div class="price_col_foot">
                        <div class="sign_up">
                            <a href="#" class="btn">
                                <span>Subscribe Now</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ pricing-item -->
        </li>

    </ul>
</div>
                                    

Pricing Items alternative style

To switch to alternative pricing style just add price_style2 class to pricing_box.

Example

  • $99/month
    Basic Lots of clients & users
    • 2,500 SKU’s
    • 5 GB Storage
    • 1,5% transaction fee
  • $499/month
    Ultimate Lots of clients & users
    • 2,500 SKU’s
    • 5 GB Storage
    • 1,5% transaction fee
<ul class="row pricing_box price_style2">
    <li class="price_col col_active price_col_green col-sm-6">
        <!--pricing item-->
        <div class="price_item">
            <div class="badge style2"></div>
            <div class="inner">
                <div class="price_col_head">
                    <span class="price"><sup>$</sup><em>99</em><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>Lots of clients & users</span>
                        </div>
                        <ul>
                            <li>2,500 SKU’s</li>
                            <li>5 GB Storage</li>
                            <li>1,5% transaction fee</li>
                        </ul>
                    </div>
                </div>
                <div class="price_col_foot">
                    <div class="sign_up">
                        <a href="#" class="btn btn-large btn-green"><span>Buy Now</span></a>
                    </div>
                </div>
            </div>
        </div>
        <!--/ pricing-item -->
    </li>

    <li class="price_col col-sm-6">
        <!--pricing item-->
        <div class="price_item">
            <div class="badge style2"></div>
            <div class="inner">
                <div class="price_col_head">
                    <span class="price"><sup>$</sup><em>499</em><span>/month</span></span>
                </div>
                <div class="price_col_body clearfix">
                    <div class="price_body_inner">
                        <div class="price_body_top">
                            <strong>Ultimate</strong>
                            <span>Lots of clients & users</span>
                        </div>
                        <ul>
                            <li>2,500 SKU’s</li>
                            <li>5 GB Storage</li>
                            <li>1,5% transaction fee</li>
                        </ul>
                    </div>
                </div>
                <div class="price_col_foot">
                    <div class="sign_up">
                        <a href="#" class="btn"><span>30 Day Free Trial</span></a>
                    </div>
                </div>
            </div>
        </div>
        <!--/ pricing-item -->
    </li>
</ul>
                                    

Content Box

Use titled box to display different content.

Example

Widget Title

<div class="widget-container boxed">
    <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 styled clearfix">
    <ol>
        <li class="comment">
            <div class="comment-body">
                <div class="comment-arrow"></div>
                <div class="comment-avatar">
                    <div class="avatar">
                        <img src="images/temp/avatar3.png" alt="" />
                    </div>
                </div>
                <div class="comment-text">
                    <div class="comment-author clearfix">
                        <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.
                    </div>
                </div>
                <div class="clear"></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" 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>
                                
Enable Video Player via JS:
<script>
    _V_("my_video_1").ready(function(){
        var myPlayer = this;
        var aspectRatio = 190/390;
        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="inner">
                <div class="jp-playlist">
                    <ul class="jp-playlist-inner">
                        <li></li>
                    </ul>
                </div>
                <div class="jp-gui jp-interface">
                    <div class="jp-controls-wrap">
                        <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"></div>
                            </div>
                        </div>
                        <ul class="jp-controls">
                            <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-previous disabled" tabindex="1">previous</a></li>
                            <li><a href="javascript:;" class="jp-play gradient" tabindex="1">play</a></li>
                            <li><a href="javascript:;" class="jp-pause gradient" 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-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>
                            <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                            <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>
                        </ul>
                        <div class="jp-volume-bar">
                            <div class="jp-volume-bar-value"></div>
                        </div>
                    </div>
                </div>
                <div class="jp-no-solution">
                    <span>Update Required</span>
                    <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash</a>
                </div>
            </div>
        </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:"<ul><li class='item-artist'>3 Doors Down – </li><li class='item-song'>Superman</li></ul>",
                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:"<ul><li class='item-artist'>Daft Punk – </li><li class='item-song'>Get Lucky</li></ul>",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg"
            },
            {
                title:"<ul><li class='item-artist'>Justin Timberlake – </li><li class='item-song'>Mirrors</li></ul>",
                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 boxed-cream">
    <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-1.jpg" alt="" />
                    <div class="carousel-title">
                        <h6>Ratatouille</h6>
                        <p>The latest unstoppable hero</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 styled">
    <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($) {

        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 Smith
Web designer
<div class="widget-container widget_avatar boxed boxed-cream">
    <div class="inner clearfix">
        <div class="avatar">
            <img src="images/temp/avatar.png" alt="" />
        </div>
        <h5>Bradley Smith</h5>
        <span class="subtitle">Web designer</span>
        <div class="follow">
            <a href="#" class="btn btn-follow"><span>Follow</span></a>
            <div class="followers">
                <span class="counter">1687</span>
                <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">
    <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.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: ["#669146", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],
            xaxis: {
                min: null,
                max: null
            },
            yaxis: {
                autoscaleMargin: 0.02
            },
            series: {
                lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true,
                    fillColor: "rgba(188,176,150,0.3)"
                },
                points: {
                    show: true,
                    radius: 4,
                    lineWidth: 2,
                    fillColor: "#f6f3ee"
                }
            },
            grid: {
                hoverable: true,
                clickable: true,
                margin: 12,
                color: "#a09d96",
                borderColor: "#b7ab92"
            }
        });

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

        var previousPoint = null;
        $("#graph").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>