Funky Tunes UI Kit

Version: 1.0 Last update: 04.02.2014

What is Funky Tunes UI Kit

Funky Tunes 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 Funky Tunes UI Kit in your ongoing project.

What is included

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

funky-tunes
├───docs
│   ├───css
│   ├───images
│   └───js
├───funky-tunes-css
│   ├───css
│   ├───fonts
│   │   └───video-js
│   │   └───icons-small
│   ├───images
│   │   ├───icons
│   │   ├───prettyPhoto
│   │   └───temp
│   └───js
│       └───libs
│       └───jplayer
└───funky-tunes-less
    ├───fonts
    │   └───video-js
    │   └───icons-small
    ├───images
    │   ├───icons
    │   ├───prettyPhoto
    │   └───temp
    ├───js
    │   └───libs
    │   └───jplayer
    └───less
        └───bootstrap
                                    
docs/
contains this documentation.
funky-tunes-css/
contains Funky Tunes 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 icons for CSS version of the kit.
fonts/icons-small/
contains Font icons 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.
funky-tunes-less/
contains Funky Tunes 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 icons for LESS version of the kit.
fonts/icons-small/
contains Font icons 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 funky-tunes-css and funky-tunes-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 Funky Tunes UI Kit is built on Bootstrap 3 framework, it supports the same browsers as Bootstrap.

Getting Started

To start working with Funky Tunes 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 funky-tunes-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 funky-tunes-less folder. Use LESS if you want to modify Funky Tunes 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 Funky Tunes UI Kit.

<!doctype html>
<!--[if lt IE 8 ]><html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta name="author" content="">
        <meta name="keywords" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Funky Tunes | Template</title>

        <!-- main JS libs  -->
        <script src="js/libs/jquery-1.11.0.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/libs/html5shiv.js"></script>
        <script src="js/libs/respond.min.js"></script>
        <![endif]-->
    </head>

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


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

Typography

Funky Tunes UI Kit uses free Open Sans, Allerta and Montserrat webfonts 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 line height of 24px and bottom margin of 25px.
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>
                                

Transparent Buttons

Example

<a href="#" class="btn btn-left btn-transparent"><span>Prev</span></a>
<a href="#" class="btn btn-transparent"><span>Download all files</span></a>
<a href="#" class="btn btn-right btn-transparent"><span>Next</span></a>
                                

Buttons with Different Sizes

Two button sizes available.

Example

<a href="#" class="btn"><span>Default Button</span></a>
<a href="#" class="btn btn-large"><span>Large Button</span></a>
                                

Shaped Buttons

Buttons with left and right pointers.

Example

<a href="#" class="btn btn-left"><span>Prev</span></a>
<a href="#" class="btn"><span>Download all files</span></a>
<a href="#" class="btn btn-right"><span>Next</span></a>

<a href="#" class="btn btn-left btn-red"><span>Prev</span></a>
<a href="#" class="btn btn-red"><span>Download all files</span></a>
<a href="#" class="btn btn-right btn-red"><span>Next</span></a>

<a href="#" class="btn btn-left btn-green"><span>Prev</span></a>
<a href="#" class="btn btn-green"><span>Download all files</span></a>
<a href="#" class="btn btn-right btn-green"><span>Next</span></a>
                                

Buttons with Icons

Example

<a href="#" class="btn btn-red">
    <span><i class="glyphicon glyphicon-shopping-cart"></i>Buy Now!</span>
</a>
                                    
<a href="#" class="btn btn-green">
    <span><i class="glyphicon glyphicon-download-alt"></i>Download</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>
                                

Rating Stars

Use rating stars for voting.

Example


<div class="rating clearfix">
    <span class="star voted" rel="1"></span>
    <span class="star voted" rel="2"></span>
    <span class="star voted" rel="3"></span>
    <span class="star voted" rel="4"></span>
    <span class="star" rel="5"></span>
</div>

<div class="rating rating-large clearfix">
    <span class="star voted" rel="1"></span>
    <span class="star voted" rel="2"></span>
    <span class="star voted" rel="3"></span>
    <span class="star" rel="4"></span>
    <span class="star" rel="5"></span>
</div>
                                

Scroll Bars

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="scrollbar">
    ...Content...
</div>
                                    
<div class="scrollbar style2">
    ...Content...
</div>
                                
Enable Scroll Bars via JS:
<script>
    jQuery(function() {
        jQuery('.scrollbar').jScrollPane({
            autoReinitialise: true,
            verticalGutter: 0
        });
    });
</script>
                                

Website menu with dropdown submenu.

Example

<ul class="menu boxed clearfix bg-image-home">
    <li><a href="#"><i class="menu-icon menu-icon-1"></i>Home</a></li>
    <li>
        <a href="#"><i class="menu-icon menu-icon-2"></i>Online Radio</a>
        <ul>
            <li><a href="#">Katy Perry</a></li>
            <li><a href="#">Miley Cyrus</a></li>
            <li><a href="#">Selena Gomez</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="menu-icon menu-icon-3"></i>Top 25</a>
        <ul>
            <li><a href="#">Miley Cyrus</a></li>
            <li><a href="#">Katy Perry</a></li>
            <li><a href="#">Lene Marlin</a></li>
        </ul>
    </li>
    <li>
        <a href="#"><i class="menu-icon menu-icon-4"></i>TV show</a>
        <ul>
            <li>
                <a href="#">Katy Perry</a>
                <ul>
                    <li><a href="#">Album 1</a></li>
                    <li><a href="#">Album 2</a></li>
                    <li><a href="#">Album 3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Miley Cyrus</a>
                <ul>
                    <li><a href="#">Album 1</a></li>
                    <li><a href="#">Album 2</a></li>
                    <li><a href="#">Album 3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Selena Gomez</a>
                <ul>
                    <li><a href="#">Album 1</a></li>
                    <li><a href="#">Album 2</a></li>
                    <li><a href="#">Album 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#"><i class="menu-icon menu-icon-5"></i>News</a></li>
    <li><a href="#"><i class="menu-icon menu-icon-8"></i>Contact Us</a></li>
</ul>
                                

Tabs

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

Example

<div class="tabs-framed tabs-framed-right boxed">
    <ul class="tabs clearfix">
        <li><a href="#profile1" data-toggle="tab"><i class="icon-tab-4"></i>Photos</a></li>
        <li class="active"><a href="#profile2" data-toggle="tab"><i class="icon-tab-5"></i>Profile</a></li>
        <li><a href="#profile3" data-toggle="tab"><i class="icon-tab-6"></i>Music</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade" id="profile1">
            ...Content...
        </div>

        <div class="tab-pane fade in active" id="profile2">
            ...Content...
        </div>

        <div class="tab-pane fade" id="profile3">
            ...Content...
        </div>
    </div>
</div>
                                

Tabbed Post Items

Example

  • Lil Wayne
  • Bruno mars
  • Niki Minaj
  • Selena Gomez
  • Tim McGraw
  • Deep Purple
  • Katy Perry
  • Miley Cyrus
  • Christina

Lil Wayne

ARTISTs OF THE WEEK

Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.

Bruno mars

ARTISTs OF THE WEEK

Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.

Niki Minaj

ARTISTs OF THE WEEK

Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.

Selena Gomez

ARTISTs OF THE WEEK

Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.

Tim McGraw

ARTISTs OF THE WEEK

Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.

Deep Purple

ARTISTs OF THE WEEK

Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.

Katy Perry

ARTISTs OF THE WEEK

Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.

Miley Cyrus

ARTISTs OF THE WEEK

Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.

Christina

ARTISTs OF THE WEEK

Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.


                                

Pricing

Use pricing items to announce prices for your services.

Pricing Items style 3

Example

Full acc

For music lovers
  • 50 000 songs
  • All profiles
  • Exclusive
  • Hot news
$9 per month
Buy!
<div class="price-list style3">
    <div class="price-item boxed">
        <div class="price-content bg-image-note4">
            <h3 class="price-title">Full acc</h3>
            <h6 class="price-subtitle">For music lovers</h6>
            <ul>
                <li>50 000 songs</li>
                <li>All profiles</li>
                <li>Exclusive stories</li>
                <li>Hot news</li>
            </ul>
        </div>
        <div class="price">
            <strong><sub>$</sub>9</strong>
            <span>per month</span>
        </div>
        <a href="#" class="btn btn-full btn-large">
            <span><i class="glyphicon glyphicon-shopping-cart"></i>Buy!</span>
        </a>
    </div>
</div>
                                

Content Box

Use titled box to display different content.

Example

Title

SubTitle
<div class="widget-container boxed">
    <div class="inner">
        <h3 class="widget-title">Widget Title</h3>
        <!-- place your content here -->
    </div>
</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="widget-container widget-video boxed">
    <video id="video1" controls preload="auto" poster="images/temp/vjs-poster-4.jpg" class="video-js vjs-styled-skin">
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
    </video>
</div>
                                
Enable Video Player via JS:
<script>
    videojs("video1", {
        "height": "auto",
        "width": "auto"
    }).ready(function() {
        var myPlayer = this; // Store the video object
        var aspectRatio = 342 / 536; // Make up an aspect ratio
        function resizeVideoJS() {
            // Get the parent element's actual width
            var width = document.getElementById(myPlayer.id()).parentElement.offsetWidth;
            // Set width to fill parent element, Set height
            myPlayer.width(width).height(width * aspectRatio);
        }
        resizeVideoJS(); // Initialize the function
        window.addEventListener("resize", resizeVideoJS, false); // Call the function on resize
    });
</script>
                                

Audio Players

Circle Audio Player

Element specific usage

Circle Audio Player require next files to be included into <head> section of the page:

<link href="css/jplayer.css" rel="stylesheet">
<script src="js/jplayer/jquery.jplayer.min.js"></script>
<script src="js/jplayer/jquery.transform2d.js"></script>
<script src="js/jplayer/jquery.grab.js"></script>
<script src="js/jplayer/mod.csstransforms.min.js"></script>
<script src="js/jplayer/circle.player.js"></script>   
                                

Example

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="cp_container_1" class="cp-container clearfix">
    <div class="cp-wrap">
        <div class="cp-progress-holder">
            <div class="cp-progress-1"></div>
            <div class="cp-progress-2"></div>
        </div>
        <div class="cp-circle-control"></div>
        <ul class="cp-controls">
            <li><a class="cp-play" tabindex="1">play</a></li>
            <li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li>
        </ul>
        <div class="jp-current-time"></div>
    </div>
    <div class="jp-controls jp-buttons">
        <div class="song-title">
            <div class="item-song">Picasso Baby</div>
            <div class="item-artist">jay-z</div>
        </div>
        <a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a>
        <a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a>
        <div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div>
    </div>
    <div class="jp-no-solution">
        <span>Update Required</span>
        <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>
    </div>
</div>
                                
Enable Circle Audio Player via JS:
<script>
    //<![CDATA[
    $(document).ready(function(){

        new CirclePlayer(
            "#jquery_jplayer_1",
            {
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
            },
            {
                cssSelectorAncestor: "#cp_container_1",
                swfPath: "js/jplayer",
                supplied: "oga, mp3",
                wmode: "window",
                smoothPlayBar: false,
                keyEnabled: false,
                preload: "auto"
            }
        );
    });
    //]]>
</script>
                                

User Profile

Display information about user in a styled box.

Example

<div class="tabs-framed tabs-framed-right boxed widget-container widget-profile">
    <ul class="tabs clearfix">
        <li>
            <a href="#profile5" data-toggle="tab"><i class="icon-tab-4"></i>Photos</a>
        </li>
        <li class="active">
            <a href="#profile6" data-toggle="tab"><i class="icon-tab-5"></i>Profile</a>
        </li>
        <li>
            <a href="#profile7" data-toggle="tab"><i class="icon-tab-6"></i>Music</a>
        </li>
        <li>
            <a href="#profile8" data-toggle="tab"><i class="icon-tab-7"></i>Comments</a>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade" id="profile5">
            <div class="profile-social">
                <a href="#"><span class="icon-small-pinterest"></span></a>
                <a href="#"><span class="icon-small-twitter"></span></a>
                <a href="#"><span class="icon-small-facebook"></span></a>
            </div>
            <div class="profile-image">
                <img src="images/temp/profile-1.jpg" alt="" />
            </div>
            <div class="bottom">
                <div class="profile-desc">
                    <a href="#" class="profile-title">Miley Cyrus</a>
                    <span class="profile-subtitle">ARTIST PROFILE</span>
                </div>
                <ul class="profile-links clearfix">
                    <li class="profile-views">
                        <a href="#"><i class="icon-small-author"></i>7 034</a>
                    </li>
                    <li class="profile-likes">
                        <a href="#"><i class="icon-small-like"></i>12 980</a>
                    </li>
                    <li class="profile-comments">
                        <a href="#"><i class="icon-small-comment"></i>9 156</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="tab-pane fade in active" id="profile6">
            <div class="profile-social">
                <a href="#"><span class="icon-small-pinterest"></span></a>
                <a href="#"><span class="icon-small-twitter"></span></a>
                <a href="#"><span class="icon-small-facebook"></span></a>
            </div>
            <div class="profile-image">
                <img src="images/temp/profile-2.jpg" alt="" />
            </div>
            <div class="bottom">
                <div class="profile-desc">
                    <a href="#" class="profile-title">Anna Maria Jopek</a>
                    <span class="profile-subtitle">ARTIST PROFILE</span>
                </div>
                <ul class="profile-links clearfix">
                    <li class="profile-views">
                        <a href="#"><i class="icon-small-author"></i>7 034</a>
                    </li>
                    <li class="profile-likes">
                        <a href="#"><i class="icon-small-like"></i>12 980</a>
                    </li>
                    <li class="profile-comments">
                        <a href="#"><i class="icon-small-comment"></i>9 156</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="tab-pane fade" id="profile7">
            <div class="profile-social">
                <a href="#"><span class="icon-small-pinterest"></span></a>
                <a href="#"><span class="icon-small-twitter"></span></a>
                <a href="#"><span class="icon-small-facebook"></span></a>
            </div>
            <div class="profile-image">
                <img src="images/temp/profile-3.jpg" alt="" />
            </div>
            <div class="bottom">
                <div class="profile-desc">
                    <a href="#" class="profile-title">Katy Perry</a>
                    <span class="profile-subtitle">ARTIST PROFILE</span>
                </div>
                <ul class="profile-links clearfix">
                    <li class="profile-views">
                        <a href="#"><i class="icon-small-author"></i>7 034</a>
                    </li>
                    <li class="profile-likes">
                        <a href="#"><i class="icon-small-like"></i>12 980</a>
                    </li>
                    <li class="profile-comments">
                        <a href="#"><i class="icon-small-comment"></i>9 156</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="tab-pane fade" id="profile8">
            <div class="profile-social">
                <a href="#"><span class="icon-small-pinterest"></span></a>
                <a href="#"><span class="icon-small-twitter"></span></a>
                <a href="#"><span class="icon-small-facebook"></span></a>
            </div>
            <div class="profile-image">
                <img src="images/temp/profile-4.jpg" alt="" />
            </div>
            <div class="bottom">
                <div class="profile-desc">
                    <a href="#" class="profile-title">Madonna</a>
                    <span class="profile-subtitle">ARTIST PROFILE</span>
                </div>
                <ul class="profile-links clearfix">
                    <li class="profile-views">
                        <a href="#"><i class="icon-small-author"></i>7 034</a>
                    </li>
                    <li class="profile-likes">
                        <a href="#"><i class="icon-small-like"></i>12 980</a>
                    </li>
                    <li class="profile-comments">
                        <a href="#"><i class="icon-small-comment"></i>9 156</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
                                

Statistical Data

Statistics widget is based on Google Charts.

Element specific usage

Google Charts require next file to be included into <head> section of the page:

<script src="https://www.google.com/jsapi"></script>
                                

Example

Chart positions
2013
<div class="widget-container widget-stats boxed boxed-transparent">
    <div class="stats-top">
        <h6 class="widget-title">Chart positions</h6>
        <div class="widget-subtitle">2013</div>
    </div>
    <div class="stats-content fade-effect">
        <div id="stats" class="carousel slide" data-interval="20000">
            <!-- Carousel items -->
            <div class="carousel-inner">
                
                <div class="item">
                    <div id="graph-1" class="graph"></div>
                    <script type="text/javascript">
                        google.load("visualization", "1", {packages:["corechart"]});
                        google.setOnLoadCallback(drawChart);
                        function drawChart() {
                            var data = google.visualization.arrayToDataTable([
                                ['Month', 'Place', {type: 'string', role: 'tooltip', p: {html:true}}],
                                ['Jan',  3, '<strong>3</strong><span>place</span>'],
                                ['Feb',  1, '<strong>1</strong><span>place</span>'],
                                ['Mar',  5, '<strong>5</strong><span>place</span>'],
                                ['Apr',  8, '<strong>8</strong><span>place</span>'],
                                ['May',  9, '<strong>9</strong><span>place</span>'],
                                ['Jun',  6, '<strong>6</strong><span>place</span>'],
                                ['Jul',  3, '<strong>3</strong><span>place</span>'],
                                ['Aug',  8, '<strong>8</strong><span>place</span>'],
                                ['Sep',  4, '<strong>4</strong><span>place</span>'],
                                ['Oct',  2, '<strong>2</strong><span>place</span>'],
                                ['Nov',  6, '<strong>6</strong><span>place</span>'],
                                ['Dec',  9, '<strong>9</strong><span>place</span>']
                            ]);

                            var options = {
                                curveType: 'function',
                                chartArea:{left:0, top:10, width:"100%"},
                                hAxis: {textStyle: {color: 'transparent', fontSize: 0}},
                                vAxis: {direction: -1, gridlines: {color: 'transparent', count: 0}, baselineColor: 'transparent'},
                                tooltip: {isHtml: true},
                                backgroundColor:{fill: 'transparent'},
                                series: [{
                                    color: '#fff',
                                    visibleInLegend: false,
                                    pointSize: 4,
                                    lineWidth: 3,
                                    areaOpacity: .1
                                }]
                            };

                            var chart = new google.visualization.LineChart(document.getElementById('graph-1'));
                            chart.draw(data, options);

                            $(window).resize(function() {
                                chart.clearChart();
                                chart.draw(data, options);
                            });
                            $('#stats').on('slid.bs.carousel', function () {
                                chart.clearChart();
                                chart.draw(data, options);
                            })
                        }
                    </script>
                    <div class="stats-tab-bottom clearfix">
                        <span class="artist">Passenger</span>
                        <span class="position"><strong>1</strong>st<em>top<br>position</em></span>
                    </div>
                </div>
                ...
                ...
                ...
                
            </div>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#stats" data-slide="prev"></a>
            <a class="carousel-control right" href="#stats" data-slide="next"></a>
        </div>
    </div>
</div>
                                

Tour Calendar

Element specific usage

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

<script src="js/jquery.carouFredSel-6.2.1-packed.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
                                    

Example

Calendar

<div class="widget-container widget-schedule clearfix">
    <h2 class="widget-title"><i></i>Calendar</h2>
    <div class="carousel">
        <ul id="schedule">
            
            <li class="schedule-item clearfix">
                <div class="schedule-left">
                    <div class="schedule-name">Kyle<br />Minouge</div>
                    <div class="schedule-date">january 25th</div>
                    <div class="rating clearfix">
                        <span class="star voted" rel="1"></span>
                        <span class="star voted" rel="2"></span>
                        <span class="star voted" rel="3"></span>
                        <span class="star" rel="4"></span>
                        <span class="star" rel="5"></span>
                    </div>
                </div>
                <div class="schedule-right">
                    <div class="schedule-avatar">
                        <a href="#"><img src="images/temp/schedule-avatar-2.jpg" alt="" /></a>
                    </div>
                    <div class="schedule-links">
                        <a class="schedule-details" href="#"><i class="icon-small-info"></i>Details</a>
                        <a class="schedule-add" href="#"><i class="icon-small-star"></i>Add to list</a>
                    </div>
                </div>
            </li>
            ...
            ...
            ...

        </ul>
        <a class="prev" id="schedule-prev" href="#">‹</a>
        <a class="next" id="schedule-next" href="#">›</a>
    </div>
</div>
                                
Enable Schedule via JS:
<script>
    jQuery(document).ready(function ($) {

        function scheduleInit() {
            $('#schedule').carouFredSel({
                swipe : {
                    onTouch: true
                },
                prev: '#schedule-prev',
                next: "#schedule-next",
                auto: {
                    play: true,
                    timeoutDuration: 16000
                },
                scroll: {
                    pauseOnHover: true,
                    items: 1,
                    duration: 500,
                    easing: 'swing'
                }
            });
        }

        scheduleInit();

        $(window).resize(function() {
            scheduleInit();
        });
    });
</script>
                                

Music Charts

Top 3 Chart

Top 3 songs and video clips.

Example

<div class="widget-container widget-top3chart boxed">
    <ul class="chart-tab music">
        <li class="clearfix">
            <span class="position">1</span>
            <div class="chart-avatar"><img src="images/temp/thumb-4.jpg" alt="" /></div>
            <a href="#" class="chart-title"><strong>Wide Awake</strong>Miley Cyrus</a>
            <a href="#" class="chart-like">246<i class="icon-small-like"></i></a>
        </li>
        <li class="clearfix">
            <span class="position">2</span>
            <div class="chart-avatar"><img src="images/temp/thumb-6.jpg" alt="" /></div>
            <a href="#" class="chart-title"><strong>Bullet proof</strong>Madonna</a>
            <a href="#" class="chart-like">984<i class="icon-small-like"></i></a>
        </li>
        <li class="clearfix">
            <span class="position">3</span>
            <div class="chart-avatar"><img src="images/temp/thumb-8.jpg" alt="" /></div>
            <a href="#" class="chart-title"><strong>She Wolf</strong>Rihanna</a>
            <a href="#" class="chart-like">896<i class="icon-small-like"></i></a>
        </li>
    </ul>

    <ul class="chart-tab video active">
        <li class="clearfix">
            <span class="position">1</span>
            <div class="chart-avatar"><img src="images/temp/thumb-9.jpg" alt="" /></div>
            <a href="#" class="chart-title"><strong>She Wolf</strong>Shakira</a>
            <a href="#" class="chart-like">593<i class="icon-small-like"></i></a>
        </li>
        <li class="clearfix">
            <span class="position">2</span>
            <div class="chart-avatar"><img src="images/temp/thumb-10.jpg" alt="" /></div>
            <a href="#" class="chart-title"><strong>Wide Awake</strong>Katy Perry</a>
            <a href="#" class="chart-like">412<i class="icon-small-like"></i></a>
        </li>
        <li class="clearfix">
            <span class="position">3</span>
            <div class="chart-avatar"><img src="images/temp/thumb-11.jpg" alt="" /></div>
            <a href="#" class="chart-title"><strong>Bullet proof</strong>Bruno Mars</a>
            <a href="#" class="chart-like">360<i class="icon-small-like"></i></a>
        </li>
    </ul>
    <ul class="chart-links green clearfix">
        <li class="text">Top3</li>
        <li>
            <a href="javascript:;" class="music"><i class="icon-small-note"></i>Music</a>
        </li>
        <li>
            <a href="javascript:;" class="video active"><i class="icon-small-cam"></i>Videos</a>
        </li>
    </ul>
</div>