Intro

First of all i want to thank you for purchasing my theme.

I have huge experience, develop this template with love and pay attention to every single detail, including testing and etc, still if you spot some kind of bugs or want improvments to specific elements or just need new feature don`t hessitate to contact us

Updates

We love all customers so every one get free updates.

This is ongoing project so will add features and will fix bugs, also we make this like a framework so don`t hessitate to propouse features or submit bugs.

Free support

We provide free suport via email system, you need to email at support@suggeelson.com

All other methods like comments, tweets and etc. will be redirected to email support only, support respond is very fast but some time may be 48 hours delay ( if fall in weekends or national celebrations days). Please be kind and wait to our respond.

What is included

After you unzip package you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.

Features

Full feature list for Supr template

  • Responsive design
  • 3 columns layout (left sidebar, content ,right sidebar)
  • Full compatible with bootstrap 3 and up
  • Fixed header, fixed sidebar, fixed right sidebar, hided sidebar, toggled sidebar
  • Integrated flot charts - Lines, bars, ordered bars, pie chart, with tooltips and autoupdate content
  • Intergrated Chartjs
  • Intergrated Morris chart
  • Jquery sparklines - bars, lines, pies
  • Glow gauges, normal gauges
  • Easy pie charts
  • Form Elements
    • Text fields - with autofocus, predefined value, password metter, readonly and disabled fields, with tooltips, min and max lenght, help blocks, with icons, success input, warning input, error input, small height, large height, grid inputs, appended group, preapend group, with buttons, with dropdowns, tags, fileupload
    • Predefined width - input-mini, input-small, input-medium, input-large, input-xlarge
    • Masked inputs - Phone field, date field, ssn field, product key, eye script, percent
    • Textarea - Normal, elastic textarea, with input limit
    • Selects - Simple select, multiselect, simple select with filter ( select2 ), multiselect with filter, Dual list boxs
    • Checkboxes - checked, unchecked, disabled, check all checkboxes, inline checkboxes
    • Radios - normal, disabled radio , inline radios
    • Switches - on/of, disabled states
    • Spinners - basic spinner, decimal spinner, curency spinner, time spinner
    • Pickers - Date and time picker, date range picker, color pickers, flat color pickers
  • Form Layouts - Horizontal form, vertical form, with group dividers ( group border), hoverstripped
  • Form Validation - required field, email field, min and max value field, password field, range field, url validation, date validation, number validation, text area, credit card validation, checkbox validation, file upload validation ( including size), select2 validation
  • Form wizard - wizard with steps (nice icons in steps), without steps, horizontal and vertical wizard, wizard with validation.
  • WYSIWYG editor - bootstrap editor , in panel box, in modal
  • Markdown editor
  • Code Editor
  • Tables
    • Static tables - basic table, stripped table, hover table, bordered table, responsvie table, non responsive table
    • Data tables - basic data tables, with tabletools
    • Ajax tables
    • Responsive tables
  • Notification messages - static messages, callout messages, dynamic messages, regular, info,success and error messages, sticky messages.
  • Panels
    • Color variations - panel default, panel info, panel success, panel warning, panel danger, panel primary,
    • Plain panels in every color
    • Other variations - closed by default, panel with icon, panel with horizontal scrollbar and vertical scrollbar, nested panels
  • Tiles - all colour variations like panels, with count numbers ( numbers count from 0 to desired digit)
  • Tabs - normal tabs, justified tabs, tabs with tab drop function, left tabs, right tabs, bellow tabs
  • Accordions - accordion toggle, and only toggle
  • Progressbars - normal variations, stripped variations, circular variations with icons, percents, animated progressbars, flat style, white style for sidebar and etc
  • Sliders - basic slider, with steps, range slider, vertical slider
  • Tooltips - tooltip on left, tooltip on top, tooltip on right, tooltip on bottom
  • Popovers - popover on left, popover on top, popover on right, popover on bottom
  • Modals - short modal, long modal, no footer modal, no header modal, no header and footer modal, large modal, small modal, alert modal, confirm modal, prompt modal, different animation effect for every modal- fadeIn, scale, superScale, fadeInLeft , fadeInRight, fadeInBottom
  • Wells - normal well, small well, large well
  • Pills - basic pills, stacked pills, justified pills
  • Paginations - pager, pager with align links, complex paginations
  • Carousels, labels and badges
  • Icons - Linea icons, Glyphicons, fontawesome pack, skycons pack 10 animated weather icons
  • Buttons - small buttons, normal buttons, large buttons, button block, with icons, alternative style, 5 colors, split buttons, with dropdown, with dropup, round buttons, left button, right button
  • Calendar - calendar with drop events, with predefined events, with add event options.
  • Bootstrap grid system
  • Lists - Unorder list, unstyled list, description list, horizontal description list, list group, listgroup with links, drag and drop list
  • Email app - inbox, collapsible sidebar, write message and send message.
  • Dropzone.js file manager
  • Gallery with edit image and etc.
  • Maps - google maps, route google maps, geo location google maps, vector maps
  • Invoice page
  • Profile page
  • Blank page
  • Login page , lockscreen page
  • Error pages - error 403 ,error 404, error 500

HTML markup

Page markup

This is whole general page markup without inside elements

<html>
    <body>
        <!-- Start #header -->    
        <div id="header">

        </div>
        <!-- End #header -->

        <!-- Start #wrapper -->
        <div id="wrapper">

            <!-- Start #left-sidebar -->
            <div id="left-sidebar">

            </div>

            <!-- Start #right-sidebar -->
            <div id="right-sidebar">

            </div>

            <!-- Start .page-content -->
            <div id="content" class="page-content clearfix">
                <div class="contentwrapper"><!--Content wrapper-->

                    Page content goes here

                </div><!-- End contentwrapper -->
            </div><!-- End #content -->

        </div>
        <!-- End #wrapper -->

        <!-- Start #footer -->
        <div id="footer">

        </div>
        <!-- End #footer -->

    </body>
</html>

Header markup

Lets see the header markup, i will not paste the whole section just the containers for detailed example just open any page and find header

Header contain two block one is navbar witch hold logo, dropdown menus etc. and header area with usefull links.

<!-- .#header -->
<div id="header">

    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">
                Supr.<span class="slogan">admin</span>
            </a>
        </div> 

        <!-- .no-collapse -->
        <div id="navbar-no-collapse" class="navbar-no-collapse">

        </div>

    </nav>
</div> <!-- / .#header -->

Left sidebar markup

Creating left sidebar

Left sidebar contain a most valued navigation for template, also have space for some widgets and panels

<!--Sidebar background-->
<div id="sidebarbg" class="hidden-lg hidden-md hidden-sm hidden-xs"></div>
<!--Sidebar content-->
<div id="sidebar" class="page-sidebar hidden-lg hidden-md hidden-sm hidden-xs">

    <div class="shortcuts">
        <ul>
            <li><a href="support.html" title="Support section" class="tip"><i class="s24 icomoon-icon-support"></i></a></li>
            <li><a href="#" title="Database backup" class="tip"><i class="s24 icomoon-icon-database"></i></a></li>
            <li><a href="charts.html" title="Sales statistics" class="tip"><i class="s24 icomoon-icon-pie-2"></i></a></li>
            <li><a href="#" title="Write post" class="tip"><i class="s24 icomoon-icon-pencil"></i></a></li>
        </ul>
    </div><!-- End search -->            

     <!-- Start .sidebar-inner -->
    <div class="sidebar-inner">

        <!-- Start .sidebar-scrollarea -->
        <div class="sidebar-scrollarea">

            Navigation inside

        </div>

    </div>

</div>

sidenav is created by standart bootstrap markup easy to modify and reproduce via loops in any server side lang or other apps.

Here is the short example:

<!-- .sidenav -->
<div class="sidenav">

    <div class="sidebar-widget mb0">
        <h6 class="title mb0">Navigation</h6>
    </div><!-- End .sidenav-widget -->

    <div class="mainnav">
        <ul>
            <li><a href="index.html"><i class="s16 icomoon-icon-screen-2"></i><span class="txt">Dashboard</span> </a></li>
            <li>
                <a href="#"><i class="s16 icomoon-icon-stats-up"></i><span class="txt">Charts</span> </a>
                <ul class="sub">
                    <li><a href="charts-flot.html"><i class="s16 icomoon-icon-arrow-right-3"></i><span class="txt">Flot charts</span></a></li>
                    <li><a href="charts-rickshaw.html"><i class="s16 icomoon-icon-arrow-right-3"></i><span class="txt">Rickshaw charts</span></a></li>
                    <li><a href="charts-morris.html"><i class="s16 icomoon-icon-arrow-right-3"></i><span class="txt">Morris charts</span></a></li>
                    <li><a href="charts-chartjs.html"><i class="s16 icomoon-icon-arrow-right-3"></i><span class="txt">Chartjs</span></a></li>
                    <li><a href="charts-other.html"><i class="s16 icomoon-icon-arrow-right-3"></i><span class="txt">Other charts</span></a></li>
                </ul>
            </li>
        </ul>
    </div>
</div><!-- / .sidenav -->

If you want to insert some widgets into sidebar area use this example

<div class="sidebar-widget">
    <h6 class="title">Disk Space Usage</h6>
    <div class="content clearfix">
        Your code here
    </div>

</div><!-- End .sidenav-widget -->

Right sidebar markup

Right sidebar markup is almost identical with the left sidebar

By defauth right sidebar is show only in big screens and hided in small to preserve more space.

<!-- Start #right-sidebar -->
<aside id="right-sidebar" class="right-sidebar">

    <!-- Start .sidebar-inner -->
    <div class="sidebar-inner">

        <!-- Start .sidebar-scrollarea -->
        <div class="sidebar-scrollarea">

            Your content here

        </div>

    </div>

</aside>

Content markup

Content is the place where you put all pages, this will be the place witch you modified most times for every single page

<!--Body content-->
<div id="content" class="page-content clearfix">
    <div class="contentwrapper"><!--Content wrapper-->

        Here we add pages

    </div><!-- End contentwrapper -->
</div><!-- End #content -->

Icons

Template come with more that 2000 icons, all icons are located in fonts/ directory.

Demo with icons you can see in icons.html file

Warning

Do not use all icons, theese icons are only for demo propouse i suggest to pick 100-200 icons and generate your own font in this wonderfull app Icomoon app

This will decrese loading time and improve your app in production servers, if you have hard time to do this just drop email to help you out

Basic usage

Just add i tag and specify a desired icon tag. This code will show a home icon

<i class="fa fa-home"> fa fa-home</i>

If you need to control size just add a size class ( see CSS section for detailed explain of how to use helpers). This code will show a 24px size icon

<i class="fa fa-home s24"> fa fa-home</i>
p>If you want specific color you need to add color class as well. ( see CSS section for detailed explain). This code will show a 24px size green icon

<i class="fa fa-home s24 color-green"> fa fa-home</i>

Warning

Be sure to add additional classes like fa and glyphicon for theese two type of icons. In icons.html page when you do copy and paste icon class will not show the icon until you add this pre class

Checkout the icons.html page to see all icons