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
<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
<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>
<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
<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>
<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>
<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>
Navigation
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>
Dropdown Menu
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
<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>
<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>
Image Carousel
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>
<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>
<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
<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
Social Links
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
<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>