What is Modern Touch UI Kit

Modern Touch 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 Modern Touch UI Kit in your ongoing project.

What is included

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

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

Getting Started

To start working with Modern Touch 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 modern-touch-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 modern-touch-less folder. Use LESS if you want to modify Modern Touch 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 Modern Touch 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>
    <div class="body_wrap">
        <div class="container">

            Start your work here.

        </div>
        <!--/ container -->
    </div>
</body>
</html>
                                

Typography

Modern Touch UI Kit uses free Open Sans webfont available at the Google Fonts. The global default font-size is 13px, with a font-weight of 300. 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 in italic font-style.

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

Different Colors

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

Example

<a href="#" class="btn"><span>Default</span></a>
<a href="#" class="btn btn-blue"><span>Blue</span></a>
<a href="#" class="btn btn-green"><span>Green</span></a>
<a href="#" class="btn btn-red"><span>Red</span></a>
<a href="#" class="btn btn-yellow"><span>Yellow</span></a>
<a href="#" class="btn btn-turquoise"><span>Turquoise</span></a>
<a href="#" class="btn btn-black"><span>Black</span></a>
<a href="#" class="btn btn-brown"><span>Brown</span></a>
                                

Buttons with Icons

Use any of the available button classes to add an arrow to button and control its position and direction.

Example

<a href="#" class="btn btn-icon-left"><span>Right</span></a>
<a href="#" class="btn btn-icon-left btn-arrow-left"><span>Left</span></a>
<a href="#" class="btn btn-icon-left btn-arrow-up"><span>Up</span></a>
<a href="#" class="btn btn-icon-left btn-arrow-down"><span>Down</span></a>

<a href="#" class="btn btn-icon-right"><span>Right</span></a>
<a href="#" class="btn btn-icon-right btn-arrow-left"><span>Left</span></a>
<a href="#" class="btn btn-icon-right btn-arrow-up"><span>Up</span></a>
<a href="#" class="btn btn-icon-right btn-arrow-down"><span>Down</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-icon-left"><input type="submit" value="Submit" /></span>
                                

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="" type="checkbox" id="checkbox-1">
        <label for="checkbox-1">Simple Checkbox</label>
    </div>

    <div class="rowCheckbox checkbox-large">
        <input name="" type="checkbox" id="checkbox-2">
        <label for="checkbox-2">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="radio" id="radio-1" checked>
        <label for="radio-1">Checked Radio Button</label>
    </div>
    <div class="rowRadio">
        <input type="radio" name="radio" id="radio-2">
        <label for="radio-2">Unchecked Radio Button</label>
    </div>
</div>
                                

Text Inputs

All Text inputs are styled.

Element specific usage

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

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

Example

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

<div class="field_text omega">
    <input type="text" name="email" id="email" placeholder="Email">
</div>
                                

Textareas

All Textareas are styled similar to Text inputs.

Element specific usage

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

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

Example

<div class="field_text field_textarea">
    <textarea id="message" placeholder="Message"></textarea>
</div>
                                

Selects

All Select elements are styled similar to Text inputs.

Element specific usage

Styled Select element require next files to be included into <head> section of the page:

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

Example

<div class="field_select">
    <select class="select_styled">
        <option value="">Subject</option>
        <option value="Feedback">Feedback</option>
        <option value="Support">Support Question</option>
        <option value="Website">Website Question</option>
        <option value="Other">Other Question or Comment</option>
    </select>
</div>
                                

Pagination

Use any of the available classes to quickly create pagination component for your site.

Example

1 2 3
1 2 3
1 2 3
<div class="tf_pagination">
    <div class="inner">
        <a class="page_prev" href="#"><span></span></a>
        <span class="page-numbers page_current">1</span>
        <a href="#" class="page-numbers">2</a>
        <a href="#" class="page-numbers">3</a>
        <a class="page_next" href="#"><span></span></a>
    </div>
</div>

<div class="tf_pagination style2">
    <div class="inner">
        <a class="page_prev" href="#"><span></span></a>
        <span class="page-numbers page_current">1</span>
        <a href="#" class="page-numbers">2</a>
        <a href="#" class="page-numbers">3</a>
        <a class="page_next" href="#"><span></span></a>
    </div>
</div>

<div class="tf_pagination style3">
    <div class="inner">
        <a class="page_prev" href="#"><span>‹</span></a>
        <span class="page-numbers page_current">1</span>
        <a href="#" class="page-numbers">2</a>
        <a href="#" class="page-numbers">3</a>
        <a class="page_next" href="#"><span>›</span></a>
    </div>
</div>

<div class="tf_pagination style3 small">
    <div class="inner">
        <a class="page_prev" href="#"><span>‹</span></a>
        <a class="page-numbers" href="#"></a>
        <a class="page_next" href="#"><span>›</span></a>
    </div>
</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="scrollbar-inner">
        <!--place your content here-->
    </div>
</div>

<div class="scrollbar style2">
    <div class="scrollbar-inner">
        <!--place your content here-->
    </div>
</div>

<div class="scrollbar style3">
    <div class="scrollbar-inner">
        <!--place your content here-->
    </div>
</div>

<div class="scrollbar style4">
    <div class="scrollbar-inner">
        <!--place your content here-->
    </div>
</div>
                                
Enable Scroll Bars via JS:
<script type="text/javascript">
    jQuery(function()
    {
        jQuery('.scrollbar').jScrollPane({
            verticalDragMaxHeight: 18,
            verticalDragMinHeight:18
        });

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

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

        jQuery('.scrollbar.style4').jScrollPane({
            verticalDragMaxHeight: 38,
            verticalDragMinHeight:38
        });
    });
</script>
                                

Progress Bars

Use any of the available classes to quickly create a styled Progress Bar for 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%
<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>

<div id="progressBar2" class="progressbar style2">
    <span class="mark-left">0%</span>
    <span class="mark-right">100%</span>
    <div class="percent"></div>
    <div class="pbar"></div>
    <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: 800
        });

        $('#progressBar2').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" value="120;720">
</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/300'],
            step: 10,
            smooth: true,
            dimension: '$'
        });
    });
</script>
                                

Website Menu with search option

Example

<div id="topmenu">
    <ul class="dropdown clearfix boxed boxed-blue">
        <li class="link-more"><a href="#"><i></i></a></li>
        <li><a href="#"><span>Home</span></a></li>
        <li><a href="#"><span>Services</span></a>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a>
                    <ul>
                        <li><a href="#">Link 4</a></li>
                        <li><a href="#">Link 5</a></li>
                        <li><a href="#">Link 6</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#"><span>About</span></a></li>
        <li class="menu-search">
            <form id="searchForm" class="menu-search-form" method="post">
                <input type="text" name="search" value="" class="menu-search-field" placeholder="Search the website" />
                <input type="submit" value="" class="btn menu-search-submit" name="search-send" />
            </form>
        </li>
    </ul>
</div>
                                

Menu of Icons with dropdown

Example

<ul class="dropdown dropdown-icons clearfix boxed boxed-green">
    <li>
        <a href="#">
            <span><i class="icon-menu"></i></span>
        </a>
        <ul>
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
        </ul>
    </li>
    <li>
        <a href="#">
            <span><i class="icon-menu icon-menu-2"></i></span>
        </a>
        <ul>
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">
            <span><i class="icon-menu icon-menu-3"></i></span>
        </a>
        <ul>
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a>
                <ul>
                    <li><a href="#">Submenu 1</a></li>
                    <li><a href="#">Submenu 2</a></li>
                    <li><a href="#">Submenu 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">
            <span><i class="icon-menu icon-menu-4"></i></span>
        </a>
        <ul>
            <li><a href="#">Submenu 1</a></li>
        </ul>
    </li>
</ul>
                                

Vertical Menu of Icons

Example

<ul class="menu-vertical boxed boxed-green">
    <li class="active">
        <a href="#"><span><i class="icon-menu"></i></span></a>
    </li>
    <li>
        <a href="#"><span><i class="icon-menu icon-menu-2"></i></span></a>
    </li>
    <li>
        <a href="#"><span><i class="icon-menu icon-menu-3"></i></span></a>
    </li>
    <li>
        <a href="#"><span><i class="icon-menu icon-menu-4"></i></span></a>
    </li>
    <li>
        <a href="#"><span><i class="icon-menu icon-menu-5"></i></span></a>
    </li>
</ul>
                                

Example

<div class="dropdownMenu">
    <a id="drop" href="#" class="dropdown-toggle" data-toggle="dropdown">Sort by filter</a>
    <ul class="dropdown-menu" aria-labelledby="drop">
        <li><a href="#">Date</a></li>
        <li><a href="#">Popularity</a></li>
        <li><a href="#">Price</a></li>
    </ul>
</div>
                                

Grid Menu

Example

<div class="grid-menu clearfix">
    <div class="grid-box">
        <a href="#" class="boxed boxed-red">
            <strong><i class="icon-grid"></i></strong>
            <span>Games</span>
        </a>
    </div>
    <div class="grid-box">
        <a href="#" class="boxed boxed-turquoise">
            <strong><i class="icon-grid icon-grid-2"></i></strong>
            <span>Contact</span>
        </a>
    </div>
    <div class="grid-box grid-box-large">
        <a href="#" class="boxed boxed-yellow">
            <strong><i class="icon-grid icon-grid-3"></i></strong>
            <span>Portfolio</span>
        </a>
    </div>
</div>	
                                

Pricing

Use pricing items to announce prices for your services. Two different pricing styles available. Add color class to price_item class to change item color.
Available color classes are the next: blue, green, red, yellow, turquoise, black, brown.

Pricing Items default style

Example

  • Premium
    $1900/month
    • Bandwidth
    • Disk Space
    • 25 Databases
  • Business
    $3000/month
    • Bandwidth
    • Disk Space
    • Databases
<div class="pricing_box">
    <ul class="row">
        <li class="col-sm-6 price_col">
            <!--pricing item-->
            <div class="price_item boxed blue">
                <div class="price_col_head">
                    <strong>Business</strong>
                </div>
                <div class="price_col_body">
                    <div class="price_body_inner">
                        <div class="price_body_top">
                            <span class="price">
                                <em>$</em>30<sup>00</sup><sub>/month</sub>
                            </span>
                        </div>
                        <ul>
                            <li><span class="large">∞</span> Bandwidth</li>
                            <li><span class="large">∞</span> Disk Space</li>
                            <li><span class="large">∞</span> Databases</li>
                        </ul>
                    </div>
                </div>
                <div class="price_col_foot">
                    <div class="sign_up">
                        <a href="#" class="btn btn-icon-left"><span>Add to cart</span></a>
                    </div>
                </div>
            </div>
            <!--/ pricing-item -->
        </li>
        ...
        ...
        ...
    </ul>
</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 boxed">
    <div class="inner">
        <video id="my_video_1" class="video-js" controls loop
        preload="auto" poster="images/temp/vjs-poster2.jpg"
        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 = 330/512;
        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>
                                

Sliders

Image Slider

The slideshow is based on Bootstrap's carousel.js

Element specific usage

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

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

Example

<div class="widget-container widget-gallery boxed">
    <div class="inner">
        <div id="myCarousel" class="carousel slide" data-interval="20000">
        <!-- Carousel items -->
        <div class="carousel-inner">
        <div class="item">
            <a href="images/temp/post_img7.jpg" class="prettyPhoto" data-rel="prettyPhoto" title="">
            <img src="images/temp/post_img7.jpg" alt="" />
            </a>
        </div>
        ...
        ...
        ...
        </div>

        <div class="carousel-controls">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0"></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>
</div>
                                

Element specific usage

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

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

Example

<div class="carouFredsel">
    <div class="inner">
        <ul id="carouFredsel-1">
        <li>
            <div class="carousel-image">
                <a href="images/temp/carousel-1.png" data-rel="prettyPhoto" title="">
                    <img src="images/temp/carousel-1.png" alt="" />
                </a>
            </div>
        </li>
        ...
        ...
        ...
        </ul>
        <a id="carousel-prev-1" class="prev" href="#">‹</a>
        <a id="carousel-next-1" class="next" href="#">›</a>
    </div>
</div>
                                
Enable Carousel via JS:
<script>
    jQuery(document).ready(function($) {
        $('#carouFredsel-1').carouFredSel({
            next : "#carousel-next-1",
            prev : "#carousel-prev-1",
            auto: false,
            scroll: {items : 1}
        });

        $(window).resize(function() {
            $('#carouFredsel-1').carouFredSel({
                next : "#carousel-next-1",
                prev : "#carousel-prev-1",
                auto: false,
                scroll: {items : 1}
            });
        })
    });
</script>
                                

Calendar

Calendar allow users to select multiple dates.

Element specific usage

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

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

Example

<div class="widget-container widget_calendar boxed boxed-red">
    <div class="inner">
        <input type="text" name="date_departure" class="inputField" 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 user profile in a styled box.

Example

Jack Daniels
Antepreneur
125 followers
Follow
<div class="widget-container boxed">
    <div class="widget-container widget-avatar boxed boxed-yellow">
        <div class="inner">
            <h5>Jack Daniels</h5>
            <span class="subtitle">Antepreneur</span>
            <div class="avatar">
                <img src="images/temp/avatar.png" alt="" />
            </div>
            <div class="followers">
                <span class="counter">125</span> followers
            </div>
            <a href="#" class="btn btn-brown btn-follow">
                <span><i></i>Follow</span>
            </a>
        </div>
    </div>
</div>
                                

Social Buttons

Add the Social links block to your site.

Example

<div class="widget-container widget-social">
    <ul class="clearfix">
        <li class="social-facebook"><a href="#"><i>Facebook</i></a></li>
        <li class="social-twitter"><a href="#"><i>Twitter</i></a></li>
        <li class="social-dribble"><a href="#"><i>Dribble</i></a></li>
        <li class="social-deviantart"><a href="#"><i>DeviantArt</i></a></li>
        <li class="social-google"><a href="#"><i>Google+</i></a></li>
        <li class="social-vimeo"><a href="#"><i>Vimeo</i></a></li>
    </ul>
</div>
                                

Weather Forecast

Use this widget to make weather forecast on the website.

Example

31°Mostly Sunny31°/18°
20°Rain20°/11°
27°Partly Cloudy27°/15°
23°Cloudy23°/14°
26°Mostly Sunny26°/16°
32°Sunny32°/19°
24°Light Rain24°/12°
Bucharest
<div class="widget-container widget-weather boxed boxed-turquoise">
    <div class="weather-highlighted">
        <div class="weather-item clearfix su">
            <i class="icon-weather icon-weather-1"></i>
            <div class="inner">
                <strong>31°</strong>
                <span>Mostly Sunny</span>
                <span>31°/18°</span>
            </div>
        </div>
        ...
        ...
        ...
    </div>

    <div class="weather-location clearfix">
        <strong>Bucharest</strong>
        <form id="searchForm" class="weather-search-form" method="post">
            <input type="text" name="search" class="weather-search-field" />
            <input type="submit" class="btn weather-search-submit" name="search-send" />
        </form>
    </div>

    <ul class="weather-forecast clearfix">
        <li>
            <a href="javascript:;" id="su">
                <strong>su</strong>
                <span>
                    <i class="icon-weather icon-weather-1"></i>
                </span>
                <span>31°</span>
            </a>
        </li>
        ...
        ...
        ...
    </ul>
</div>