A full featured, premium web application admin dashboard built with Twitter Bootstrap 3. It comes with a myriad of ready to use components ideal for bulding you web application, CRM, CMS, admin panel, dashboard, or any other type of application backend.

You can visit the Bootstrap page to find out all the various components that you can implement with Sublime. The docs are comprehensive and they include everything to help you get started with using all the various components.

Once you've purchased Sublime, please leave a rating! Positive ratings help bring out more updates and add more features to the template.

If you have any questions that are beyond the scope of this help file, please feel free to get in touch.

Support requests can go through the form on my ThemeForest profile page
Frontend/
├── bootstrap/
│   ├── css/
│   ├── js/
│   └── fonts/
├── css/
│   ├── fonts/
│   └── skins/
├── fonts/
├── img/
├── inc/
├── js/
├── json/
├── less/
├── plugins/
├── video/
├── work/

Sublime download includes precompiled CSS, JavaScript, font assets, img assets, json data files, php files along with source LESS files. plugins folder contains third party plugin resources.

All layout variations follow this basic layout skeleton...
HTML5 doctype
<!DOCTYPE html>
<html class="no-js {page class}">
                
Head
<head>
    <!-- meta -->
    <meta charset="utf-8">
    <meta name="description" content="flat, clean, responsive, application frontend template built with bootstrap 3">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- /meta -->

    <title>Sublime - Web Application Frontend Template</title>

    <!-- page level plugin styles -->
    <link rel="stylesheet" href="plugins/owl-carousel/owl.carousel.css">
    <link rel="stylesheet" href="plugins/owl-carousel/owl.theme.css">
    <link rel="stylesheet" href="plugins/owl-carousel/owl.transitions.css">
    <link rel="stylesheet" href="plugins/magnific-popup/magnific-popup.css">
    <!-- /page level plugin styles -->

    <!-- core styles -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/themify-icons.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <!-- /core styles -->

    <!-- template styles -->
    <link rel="stylesheet" href="css/skin/palette.blue.css" id="skin">
    <link rel="stylesheet" href="css/fonts/style.1.css" id="font">
    <link rel="stylesheet" href="css/main.css">
    <!-- template styles -->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- load modernizer -->
    <script src="plugins/modernizr.js"></script>
</head>
                
body
<body>

    <!-- page preloader -->
    <div class="pageload">
        <div class="loader"></div>
    </div>
    <!-- /page preloader -->

    <!-- top navigation -->
    <header class="header">
        <div class="container">
            <nav>

                <!-- header branding -->
                <div class="branding heading-font">
                    <button type="button" class="mobile-toggle">
                        <span class="ti-menu"></span>
                    </button>
                    <a class="logo transition" href="/">
                        Sub<span class="color">lime</span>
                    </a>
                </div>
                <!-- /header branding -->

                <!-- links -->
                <div class="navigation spy">
                    <ul class="nav">
                        <li class="active">
                            <a href="#top">Home</a>
                        </li>
                        <li>
                            <a href="#about">About</a>
                        </li>
                        <li>
                            <a href="#services">Services</a>
                        </li>
                        <li>
                            <a href="#team">Team</a>
                        </li>
                        <li>
                            <a href="#portfolio">Work</a>
                        </li>
                        <li>
                            <a href="#testimony">Testimony</a>
                        </li>
                        <li>
                            <a href="#contact">Contact</a>
                        </li>
                        <li class="dropdown show-on-hover">
                            <a href="javascript:;" class="ignore" data-toggle="dropdown"><span>More</span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="elements.html" class="transition">Elements</a>
                                </li>
                                <li>
                                    <a href="blog.html" class="transition">Blog</a>
                                </li>
                                <li>
                                    <a href="post.html" class="transition">Single blog item</a>
                                </li>
                                <li>
                                    <a href="project.html" class="transition">Portfolio Project</a>
                                </li>
                                <li>
                                    <a href="404.html" class="transition">404 page</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /links -->
            </nav>
        </div>

    </header>
    <!-- /top navigation -->

    <!-- section with parralax -->
    <section id="top" class="content-section parallax vertical-center" style="background-image: url(img/sea.jpg);" >
    </section>
    <!-- /section with parralax -->

    <!-- section with light backround -->
    <section id="team" class="content-section light">
    </section>
    <!-- /section with light backround -->

        <!-- footer -->
    <footer class="content-section dark heading-font">

        <div class="container">

            <div class="row text-center">

                <div class="col-sm-12">

                    <a class="smooth-scroll scroll-top ti-angle-up" href="#top"></a>

                    <a class="transition" href="/">
                        Sub<span class="color">lime</span>
                    </a>

                </div>

                <div class="col-sm-12">
                    <small>MADE WITH <i class="ti-heart text-danger"></i> ON PLANET EARTH</small>
                    <small class="show">COPYRIGHT <span class="year"></span>. ALL RIGHTS RESERVED</small>
                </div>
            </div>
        </div>
    </footer>
    <!-- /footer -->

    <!-- core scripts -->
    <script src="plugin/jquery-1.11.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="plugin/appear/jquery.appear.js"></script>
    <script src="plugin/nav/jquery.nav.js"></script>
    <script src="plugin/jquery.easing.min.js"></script>
    <!-- /core scripts -->

    <!-- page level scripts -->
    <script src="plugin/jquery.parallax.js"></script>
    <script src="plugin/isotope/isotope.pkgd.min.js"></script>
    <script src="plugin/count-to/jquery.countTo.js"></script>
    <script src="plugin/owl-carousel/owl.carousel.min.js"></script>
    <script src="plugin/bxslider/jquery.bxslider.min.js"></script>
    <script src="plugin/jquery.mb.YTPlayer/jquery.mb.YTPlayer.js"></script>
    <script src="plugin/imagesloaded/imagesloaded.pkgd.min.js"></script>
    <script src="plugin/fitvids/jquery.fitvids.js"></script>
    <!-- /page level scripts -->

    <script src="js/main.js"></script>
    <script src="js/default.js"></script>
    <script src="js/portfolio.js"></script>

</body>
                                        

Layout Options

  • To open dropdown menus on hover add .show-on-hover to dropdown container
  • .vertical-center centers vertically decendant .container selector
  • .heading-font styles body text with heading text
  • .overlay-darken-{level} adds to a section a darkened overlay {level} being any integer between 1 and 9 represnting the opacity level
  • .transition on a link fades out the page when clicked
  • add .header-dark <header class="header header-dark"> for a dark themed header.
  • add .fixed-sticky <header class="header fixed-sticky"> defaults to a fixed header.

These are the available helper classes

  • .no-bremoves all borders from an element
  • .borderedAdd a border to all 4 sides of an element
  • .blAdd left border to an element
  • .brAdd right border to an element
  • .btAdd top border to an element
  • .bbAdd bottom border to an element
  • .bg-noneOverwites elements background color to transparent
  • .no-shadowremove box shadow
  • .shadowadd box shadow
  • .no-radiusremoves rounded borders
  • .no-mremoves all margin space from an element
  • .no-premoves all padding space from an element

p,m,b = padding,margin,border
Directions
t,b,r,l,n = top,bottom,right,left, negative
Sizing
5,10,15,20,25 = extra-small(5px),small(10px),medium(@15px),default(20px),large(25px)

Margins
Class Description
.mn -15px margin left and right
.mrn -15px margin right
.mln -15px margin left
.ml0 remove left margin
.mr0 remove right margin
.mt0 remove top margin
.mb0 remove bottom margin
.m25 Adds 25px margin to an element
.mr25 Adds 25px right margin
.mb25 Adds 25px bottom margin
.ml25 Adds 25px left margin
.mt25 Adds 25px top margin
.m20 Adds 20px margin to an element
.mr20 Adds 20px right margin
.mb20 Adds 20px bottom margin
.ml20 Adds 20px left margin
.mt20 Adds 20px top margin
.m15 Adds 15px margin to an element
.mr15 Adds 15px right margin
.mb15 Adds 15px bottom margin
.ml15 Adds 15px left margin
.mt15 Adds 15px top margin
.m10 Adds 10px margin to an element
.mr10 Adds 10px right margin
.mb10 Adds 10px bottom margin
.ml10 Adds 10px left margin
.mt10 Adds 10px top margin
.m5 Adds 5px margin to an element
.mr5 Adds 5px right margin
.mb5 Adds 5px bottom margin
.ml5 Adds 5px left margin
.mt5 Adds 5px top margin
Paddings
Class Description
.pl0 remove left padding
.pr0 remove right padding
.pt0 remove top padding
.pb0 remove bottom padding
.p25 Adds 25px padding to an element
.pr25 Adds 25px right padding
.pb25 Adds 25px bottom padding
.pl25 Adds 25px left padding
.pt25 Adds 25px top padding
.p20 Adds 20px padding to an element
.pr20 Adds 20px right padding
.pb20 Adds 20px bottom padding
.pl20 Adds 20px left padding
.pt20 Adds 20px top padding
.p15 Adds 15px padding to an element
.pr15 Adds 15px right padding
.pb15 Adds 15px bottom padding
.pl15 Adds 15px left padding
.pt15 Adds 15px top padding
.p10 Adds 10px padding to an element
.pr10 Adds 10px right padding
.pb10 Adds 10px bottom padding
.pl10 Adds 10px left padding
.pt10 Adds 10px top padding
.p5 Adds 5px padding to an element
.pr5 Adds 5px right padding
.pb5 Adds 5px bottom padding
.pl5 Adds 5px left padding
.pt5 Adds 5px top padding

Select plugin from dropdown below for more information

animate.css, just-add-water CSS animations

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Dependencies
<link rel="stylesheet" href="css/animate.min.css">
Official Documentation
http://daneden.github.io/animate.css/
Imagesloaded

Detect when images have been loaded.

Dependencies
<!-- Javascripts -->
<script href="plugins/imagesloaded/imagesloaded.js"></script>
Official Documentation
http://imagesloaded.desandro.com/

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Visit http://fontawesome.io/ to find out how you can use them.

Official Documentation
http://fontawesome.io/
jQuery Appear

a jQuery plugin for tracking element's appearance in browser viewport

Dependencies
<script src="plugins/appear/jquery.appear.js"></script>
Official Documentation
https://github.com/morr/jquery.appear/
bxSlider

Responsive jQuery Content Slider

Dependencies
<link rel="stylesheet" href="plugins/bxslider/jquery.bxslider.css">

<script src="plugins/bxslider/jquery.bxslider.min.js"></script>
Official Documentation
http://bxslider.com/
Jquery Count to

jQuery countTo is a jQuery plugin that will count up (or down) to a target number at a specified speed, rendered within an HTML DOM element.

Dependencies
<script src="plugins/count-to/jquery.countTo.js"></script>
Official Documentation
https://github.com/mhuggins/jquery-countTo
Fitvids

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Dependencies
<script src="plugins/fitvids/jquery.fitvids.js"></script>
Official Documentation
http://fitvidsjs.com/

Themify Icons

Themify Icons is a complete set of icons for use in web design and apps, consisting of 320+ pixel-perfect, hand-crafted icons that draw inspiration from Apple iOS 7 - available to the public, 100% FREE!

Dependencies
<link rel="stylesheet" href="css/themify-icons.css">
Official Documentation
http://themify.me/themify-icons
Isotope - Filter & sort magical layouts
Dependencies
<script src="plugins/isotope/isotope.pkgd.min.js"></script>
Official Documentation
http://isotope.metafizzy.co/
mb.YTPlayer 1.0

An open source jQuery component to easily build your custom Youtube® player or to use a Youtube® video as background for your page.

Dependencies
<link rel="stylesheet" href="plugins/jquery.mb.YTPlayer/YTPlayer.css">

<script src="plugins/jquery.mb.YTPlayer/jquery.mb.YTPlayer.js"></script>
Official Documentation
http://pupunzi.com/#mb.components/mb.YTPlayer/YTPlayer.html
jQuery One Page Nav

A lightweight jQuery plugin for the navigation on one-page sites. Adds smooth scrolling when clicking on the navigation and automatically selects the correct navigation items as you are scrolling through the different sections. The plugin still works even if you add additional content to the page after the fact that changes the position of each section.

Dependencies
<script src="plugins/nav/jquery.nav.js"></script>
Official Documentation
http://github.com/davist11/jQuery-One-Page-Nav
Owl Carousel

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

Dependencies
<link rel="stylesheet" href="plugins/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="plugins/owl-carousel/owl.theme.css">
<link rel="stylesheet" href="plugins/owl-carousel/owl.transitions.css">

<script src="plugins/owl-carousel/owl.carousel.min.js"></script>
Official Documentation
http://www.owlgraphic.com/owlcarousel/
Simple Text Rotator

A light weight jQuery plugin that will allow you to add a super simple rotating text to your website with little to no markup Created by Pete R.

Dependencies
<link rel="stylesheet" href="plugins/simple-text-rotator/simpletextrotator.css" />

<script src="plugins/simple-text-rotator/jquery.simple-text-rotator.js"></script>
Official Documentation
https://github.com/peachananr/simple-text-rotator

jQuery Parallax is a script

Dependencies
<script src="plugins/jquery.parallax.js"></script>
Official Documentation
http://www.ianlunn.co.uk/plugins/jquery-parallax/

Before you deploy your site update post.php located in the inc folder with your email address. You'll need to update $email_to = "email-adress"; with your own address. You can also change the email subject

Before you deploy your site update subscribe.php located in the inc folder with your mailchimp API and list id.

I've used the following images, icons or other files as listed.


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section