logo

Easily use code syntax highlighting to demo the code you want! For Internet Explorer support, version 9 or higher is required.

HTML Basic Template Structure

<!-- Body -->
<!-- Add the class .fixed to <body> for a fixed layout on large resolutions (min: 1200px) -->
<!-- <body class="fixed"> -->
<body>
    <!-- Page Container -->
    <div id="page-container">
        <!-- Header -->
        <!-- Add the class .navbar-fixed-top or .navbar-fixed-bottom for a fixed header on top or bottom respectively -->
        <!-- <header class="navbar navbar-inverse navbar-fixed-top"> -->
        <!-- <header class="navbar navbar-inverse navbar-fixed-bottom"> -->
        <header class="navbar navbar-inverse">
            Logo, widgets etc..
        </header>
        <!-- END Header -->

        <!-- Inner Container -->
        <div id="inner-container">
            <!-- Sidebar -->
            <aside id="page-sidebar">
                Search and Main Navigation
            </aside>
            <!-- END Sidebar -->

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

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

CSS Basic Stylesheet Structure

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

/* Sub section 1 */
.class {
}

/* Sub section 2 */
.class {
}

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

/* Sub section 1 */
.class {
}

/* Sub section 2 */
.class {
}

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(150);
        } else {
            link.fadeOut(150);
        }
    });

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

PHP Example Code

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