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

Default Green Red All Capitals

<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

Prev Download all files Next

<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

Default Button Large Button

<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

Prev Download all files Next
Prev Download all files Next
Prev Download all files Next

<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

Buy Now! Download

<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.

Miley Cyrus ARTIST PROFILE

Anna Maria Jopek ARTIST PROFILE

Katy Perry ARTIST PROFILE

Madonna ARTIST PROFILE

<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