FlatApp - Premium, Responsive and Flat Bootstrap Admin Dashboard Template

Usage

Just a <code> element inside a <pre> element. To specify a language just add the class .language-{value} to the <code> element with one of the following values: markup css javascript or php. Check out the following examples:

For HTML

<pre class="line-numbers"><code class="language-markup">
HTML code..
</code></pre>

For CSS

<pre class="line-numbers"><code class="language-css">
CSS code..
</code></pre>

For Javascript

<pre class="line-numbers"><code class="language-javascript">
Javascript code..
</code></pre>

For PHP

<pre class="line-numbers"><code class="language-php">
PHP code..
</code></pre>

* For Internet Explorer, versions 9 and higher are supported

HTML Basic Template Structure

<!-- Body -->
<!-- In the PHP version you can set the following options from the config file -->
<!-- Add the class .hide-side-content to <body> to hide side content by default -->
<body>
    <!-- Page Container -->
    <!-- In the PHP version you can set the following options from the config file -->
    <!-- Add the class .full-width for a full width page -->
    <div id="page-container">
        <!-- Header -->
        <!-- In the PHP version you can set the following options from the config file -->
        <!-- Add the class .navbar-fixed-top or .navbar-fixed-bottom for a fixed header on top or bottom respectively -->
        <header class="navbar navbar-inverse">
            Search, Logo and Dropdowns
        </header>
        <!-- END Header -->

        <!-- Left Sidebar -->
        <!-- In the PHP version you can set the following options from the config file -->
        <!-- Add the class .sticky for a sticky sidebar -->
        <aside id="page-sidebar" class="nav-collapse collapse">
            Side Content + Main Navigation
        </aside>
        <!-- END Left Sidebar -->

        <!-- Pre Page Content -->
        <div id="pre-page-content">
            Optional Content
        </div>
        <!-- END Pre Page Content -->

        <!-- Page Content -->
        <div id="page-content">
            Main Content
        </div>
        <!-- END Page Content -->

        <!-- Footer -->
        <footer>
            Copyright etc..
        </footer>
        <!-- END Footer -->
    </div>
    <!-- END Page Container -->
</body>
<!-- END Body -->

CSS Basic Stylesheet Structure

/*
=================================================================
(#shortcode) SECTION
=================================================================
*/

/* Sub section 1 */
selector {
}

/* Sub section 2 */
selector {
}

/*
=================================================================
(#shortcode) SECTION
=================================================================
*/

/* Sub section 1 */
selector {
}

/* Sub section 2 */
selector {
}

Javascript Scroll to top function used in the template

/* Scroll to top link */
var scrollToTop = function() {

    // Get link
    var link = $('#to-top');

    $(window).scroll(function(){

        // If the user scrolled a bit (150 pixels) show the link
        if ($(this).scrollTop() > 150) {
            link.fadeIn(100);
        } else {
            link.fadeOut(100);
        }
    });

    // On click get to top
    link.click(function(){
        $('html, body').animate({ scrollTop: 0 }, 150);
        return false;
    });
};

PHP Example Code

<?php
// Comment
class Test {
    function home() {
        // ...
    }
}
?>

Syntax HighlightingShowcase your code in style!