ProUI

Loading..

Syntax Highlighting
Great for showcasing your code!

Usage Example

HTML

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

CSS

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

Javascript

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

PHP

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

HTML Template's Structure

<!-- Body -->
<body>
    <!-- Page Wrapper -->
    <div id="page-wrapper">
        <!-- Page Container -->
        <div id="page-container">
            <!-- Alternative Sidebar -->
            <div id="sidebar-alt">
                Alternative Sidebar Content
            </div>
            <!-- END Alternative Sidebar -->

            <!-- Main Sidebar -->
            <div id="sidebar">
                Main Sidebar Content
            </div>
            <!-- END Main Sidebar -->

            <!-- Main Container -->
            <div id="main-container">
                <!-- Header -->
                <header class="navbar navbar-default">
                    Header Content
                </header>
                <!-- END Header -->

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

                <!-- Footer -->
                <footer>
                    Footer Content
                </footer>
                <!-- END Footer -->
            </div>
            <!-- END Main Container -->
        </div>
        <!-- END Page Container -->
    </div>
    <!-- END Page Wrapper -->
</body>
<!-- END Body -->

PHP Dummy Code

<?php
class App {
    function home() {
        // ...
    }

    function profile() {
        // ...
    }

    function settings() {
        // ...
    }
}

CSS 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 functionality

/* Scroll to top functionality */
var scrollToTop = function() {
    // Get link
    var link = $('#to-top');
    var windowW = window.innerWidth
                    || document.documentElement.clientWidth
                    || document.body.clientWidth;

    $(window).scroll(function(){
        // If the user scrolled a bit (150 pixels) show the link in large resolutions
        if (($(this).scrollTop() > 150) && (windowW > 991)) {
            link.fadeIn(100);
        } else {
            link.fadeOut(100);
        }
    });

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

        return false;
    });
};