Con

Overview

Con is admin dashboard based on Materialize framework. Template fully based on HTML5, CSS3 standards. Is fully responsive and clean on every device and every modern browser (IE9 and newer). Responsive. Con admin dashboard looks equally good on computers and mobile devices. Customizable.
If you know how to work with Gulp, you can easily change the template source code. Change the main color, sizes, fonts, menus, etc. HTML code is divided into blocks – for example you can easily change the side navigation in one place and it will builds in all html files directly. You do not have to worry about cross-browser CSS. SASS and Autoprefixer will do it for you. Material Design. Con based on clean and modern design technique. Commented code. All code commented and all pages have code samples for each item or widget. Over 2100 icons. You can use FontAwesome, Material Design, IonIcons and Weather icons packs. Free updates and lifetime support.

Template Structure

All template files have fixed structure consisting of top navbar, sidebar, breadcrumbs, search bar, chat, content and footer as shown below:

Beginning of Page

Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions.

<!DOCTYPE html>
<!--[if lt IE 7]>  <html class="lt-ie7"> <![endif]-->
<!--[if IE 7]>     <html class="lt-ie8"> <![endif]-->
<!--[if IE 8]>     <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->

RTL Support

Con friendly with Right to Left orientation. To use it, just add .rtl classname in <html> tag.

<!DOCTYPE html>
<!--[if lt IE 7]>  <html class="lt-ie7 rtl"> <![endif]-->
<!--[if IE 7]>     <html class="lt-ie8 rtl"> <![endif]-->
<!--[if IE 8]>     <html class="lt-ie9 rtl"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="rtl"> <!--<![endif]-->

Page Head

Page head contains metadata, javascript and css files:

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Con - Admin Dashboard with Material Design</title>

  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>

  <link rel="icon" type="image/png" href="assets/_con/images/icon.png">
  <!-- build:css assets/css/style.css -->
  <!-- nanoScroller -->
  <link rel="stylesheet" type="text/css" href="assets/nanoScroller/nanoscroller.css" />

  <!-- Main -->
  <link rel="stylesheet" type="text/css" href="assets/_con/css/_con.min.css" />
  <!-- endbuild -->

  <!--[if lt IE 9]>
    <script src="assets/html5shiv/html5shiv.min.js"></script>
  <![endif]-->
</head>

Top Navbar

Top navbar has some options. You can change it, using this classnames:

.navbar-dark - dark color scheme
.navbar-static - static position
.navbar-under - navbar under sidebar

<!--
Top Navbar
  Options:
    .navbar-dark - dark color scheme
    .navbar-static - static navbar
    .navbar-under - under sidebar
-->
<nav class="navbar-top">
  <div class="nav-wrapper">

    <!-- Sidebar toggle -->
    <a href="#" class="yay-toggle">
      <div class="burg1"></div>
      <div class="burg2"></div>
      <div class="burg3"></div>
    </a>
    <!-- Sidebar toggle -->

    <!-- Logo -->
    <a href="#!" class="brand-logo">
      <img src="assets/_con/images/logo.png" alt="Con">
    </a>
    <!-- /Logo -->

    <!-- Menu -->
    <ul>
      <li><a href="#!" class="search-bar-toggle"><i class="mdi-action-search"></i></a>
      </li>
      <li class="user">
        <a class="dropdown-button" href="#!" data-activates="user-dropdown">
          <img src="assets/_con/images/user.jpg" alt="John Doe" class="circle">John Doe<i class="mdi-navigation-expand-more right"></i>
        </a>

        <ul id="user-dropdown" class="dropdown-content">
          <li><a href="page-profile.html"><i class="fa fa-user"></i> Profile</a>
          </li>
          <li><a href="mail-inbox.html"><i class="fa fa-envelope"></i> Messages <span class="badge new">2</span></a>
          </li>
          <li><a href="#!"><i class="fa fa-cogs"></i> Settings</a>
          </li>
          <li class="divider"></li>
          <li><a href="page-sign-in.html"><i class="fa fa-sign-out"></i> Logout</a>
          </li>
        </ul>
      </li>
    </ul>
    <!-- /Menu -->

  </div>
</nav>
<!-- /Top Navbar -->

Sidebar

Con uses Yay sidebar. This is list with available sidebar classes:

Effects:
- .yay-overlay - overlay content
- .yay-push - push content to right
- .yay-shrink - shrink content width
Options:
- .yay-hide-to-small - no hide menu, just set it small with big icons
- .yay-static - stop using fixed sidebar (will scroll with content)
- .yay-gestures - to show and hide menu using gesture swipes
- .yay-overlap-content - hide menu on content click
- .yay-light - light color scheme
Hide on Page Startup:
- .yay-hide - set it to <body> tag.
Toggle button:
- .yay-toggle classname for custom toggle buttons.

<!--
Yay Sidebar
Options [you can use all of theme classnames]:
  .yay-hide-to-small         - no hide menu, just set it small with big icons
  .yay-static                - stop using fixed sidebar (will scroll with content)
  .yay-gestures              - to show and hide menu using gesture swipes
  .yay-light                 - light color scheme
  .yay-hide-on-content-click - hide menu on content click

Effects [you can use one of these classnames]:
  .yay-overlay  - overlay content
  .yay-push     - push content to right
  .yay-shrink   - shrink content width
-->
<aside class="yaybar yay-shrink yay-hide-to-small yay-gestures">

  <div class="top">
    <div>
      <!-- Sidebar toggle -->
      <a href="#" class="yay-toggle">
        <div class="burg1"></div>
        <div class="burg2"></div>
        <div class="burg3"></div>
      </a>
      <!-- Sidebar toggle -->

      <!-- Logo -->
      <a href="#!" class="brand-logo">
        <img src="assets/_con/images/logo-white.png" alt="Con">
      </a>
      <!-- /Logo -->
    </div>
  </div>


  <div class="nano">
    <div class="nano-content">

      <ul>
        <li class="label">Menu</li>
        <li>
          <a class="yay-sub-toggle waves-effect waves-blue"><i class="fa fa-dashboard"></i> Dashboards<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a>
          <ul>
            <li>
              <a href="dashboard.html" class="waves-effect waves-blue"> Dashboard <span class="badge new"></span></a>
            </li>
            <li>
              <a href="dashboard-v1.html" class="waves-effect waves-blue"> Dashboard v1</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="widgets.html" class="waves-effect waves-blue"><i class="fa fa-magic"></i> Widgets</a>
        </li>

        <li>
          <a href="layouts.html" class="waves-effect waves-blue"><i class="mdi mdi-av-web"></i> Layouts</a>
        </li>

        <li>
          <a class="yay-sub-toggle waves-effect waves-blue"><i class="fa fa-indent"></i> Menu Levels<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a>
          <ul>
            <li>
              <a class="yay-sub-toggle waves-effect waves-blue" href="#!">Second Level<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a>
              <ul>
                <li>
                  <a class="yay-sub-toggle waves-effect waves-blue" href="#!">Third Level<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a>
                  <ul>
                    <li><a href="#!" class="waves-effect waves-blue">Fourth Level</a>
                    </li>
                    <li><a href="#!" class="waves-effect waves-blue">Fourth Level</a>
                    </li>
                    <li><a href="#!" class="waves-effect waves-blue">Fourth Level</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a class="yay-sub-toggle waves-effect waves-blue" href="#!">Third Level<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a>
                  <ul>
                    <li><a href="#!" class="waves-effect waves-blue">Fourth Level</a>
                    </li>
                    <li><a href="#!" class="waves-effect waves-blue">Fourth Level</a>
                    </li>
                    <li><a href="#!" class="waves-effect waves-blue">Fourth Level</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>

        <li class="label">Elements</li>
        <li>
          <a class="yay-sub-toggle waves-effect waves-blue"><i class="fa fa-css3"></i> CSS<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a>
          <ul>
            <li><a class="waves-effect waves-blue" href="css-alerts.html"><i class="mdi-alert-warning"></i> Alerts</a>
            </li>
            <li><a class="waves-effect waves-blue" href="css-badges.html"><i class="mdi-action-stars"></i> Badges</a>
            </li>
            <li><a class="waves-effect waves-blue" href="css-colors.html"><i class="mdi-image-palette"></i> Colors</a>
            </li>
            <li><a class="waves-effect waves-blue" href="css-grid.html"><i class="mdi-action-dashboard"></i> Grid</a>
            </li>
            <li><a class="waves-effect waves-blue" href="css-icons.html"><i class="mdi-communication-invert-colors-on"></i> Icons</a>
            </li>
            <li><a class="waves-effect waves-blue" href="css-shadow.html"><i class="mdi-maps-layers"></i> Shadow</a>
            </li>
            <li><a class="waves-effect waves-blue" href="css-typography.html"><i class="fa fa-font"></i> Typography</a>
            </li>
          </ul>
        </li>

        <li>
          <a class="yay-sub-toggle waves-effect waves-blue"><i class="fa fa-cubes"></i> UI Elements<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a>
          <ul>
            <li><a class="waves-effect waves-blue" href="ui-buttons.html"><i class="fa fa-square"></i> Buttons</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ui-cards.html"><i class="mdi-av-web"></i> Cards</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ui-collapsible.html"><i class="mdi-action-view-day"></i> Collapsible</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ui-collections.html"><i class="fa fa-server"></i> Collections</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ui-dropdown.html"><i class="mdi-navigation-arrow-drop-down-circle"></i> Dropdown</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ui-modals.html"><i class="fa fa-external-link"></i> Modals</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ui-progress-bars.html"><i class="fa fa-tasks"></i> Progress Bars</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ui-tables.html"><i class="fa fa-table"></i> Tables</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ui-tabs.html"><i class="mdi-action-tab-unselected"></i> Tabs</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ui-toasts.html"><i class="mdi-action-announcement"></i> Toasts</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ui-tooltips.html"><i class="fa fa-comment-o"></i> Tooltips</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ui-waves.html"><i class="mdi-image-blur-on"></i> Waves</a>
            </li>

            <li><a class="waves-effect waves-blue" href="ui-search-bar.html"><i class="mdi-action-search"></i> Search Bar</a>
            </li>
          </ul>
        </li>

        <li class="label">Components</li>
        <li>
          <a class="yay-sub-toggle waves-effect waves-blue"><i class="fa fa-check-square-o"></i> Forms<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a>
          <ul>
            <li><a class="waves-effect waves-blue" href="forms-base.html"><i class="fa fa-cube"></i> Base</a>
            </li>
            <li><a class="waves-effect waves-blue" href="forms-advanced.html"><i class="fa fa-cubes"></i> Advanced</a>
            </li>
            <li><a class="waves-effect waves-blue" href="forms-validation.html"><i class="fa fa-check-square-o"></i> Validation</a>
            </li>
            <li><a class="waves-effect waves-blue" href="forms-editors.html"><i class="fa fa-edit"></i> Editors</a>
            </li>
            <li><a class="waves-effect waves-blue" href="forms-checkout.html"> Checkout</a>
            </li>
            <li><a class="waves-effect waves-blue" href="forms-contacts.html"> Contacts</a>
            </li>
            <li><a class="waves-effect waves-blue" href="forms-login.html"> Login</a>
            </li>
            <li><a class="waves-effect waves-blue" href="forms-register.html"> Register</a>
            </li>
          </ul>
        </li>

        <li class="open">
          <a class="yay-sub-toggle waves-effect waves-blue"><i class="fa fa-globe"></i> Pages<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a>
          <ul>
            <li><a class="waves-effect waves-blue" href="page-profile.html">Profile</a>
            </li>
            <li><a class="waves-effect waves-blue" href="page-timeline.html">Timeline</a>
            </li>
            <li><a class="waves-effect waves-blue" href="page-forgot-password.html">Forgot Password</a>
            </li>
            <li><a class="waves-effect waves-blue" href="page-lock.html">Screen Lock</a>
            </li>
            <li><a class="waves-effect waves-blue" href="page-sign-in.html">Sign In</a>
            </li>
            <li><a class="waves-effect waves-blue" href="page-sign-up.html">Sign Up</a>
            </li>
            <li><a class="waves-effect waves-blue" href="page-404.html">404</a>
            </li>
            <li><a class="waves-effect waves-blue" href="page-500.html">500</a>
            </li>
            <li class="active"><a class="waves-effect waves-blue" href="page-blank.html">Blank</a>
            </li>
          </ul>
        </li>

        <li class="label">Extra</li>
        <li>
          <a class="yay-sub-toggle waves-effect waves-blue"><i class="fa fa-envelope"></i> Mailbox<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a>
          <ul>
            <li><a class="waves-effect waves-blue" href="mail-inbox.html"><i class="mdi-content-inbox"></i> Inbox</a>
            </li>
            <li><a class="waves-effect waves-blue" href="mail-compose.html"><i class="mdi-content-add-circle"></i> Compose</a>
            </li>
            <li><a class="waves-effect waves-blue" href="mail-view.html"><i class="mdi-content-drafts"></i> View</a>
            </li>
          </ul>
        </li>

        <li>
          <a class="yay-sub-toggle waves-effect waves-blue"><i class="mdi mdi-action-shopping-cart"></i> eCommerce<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a>
          <ul>
            <li><a class="waves-effect waves-blue" href="ecommerce-dashboard.html"><i class="fa fa-dashboard"></i> Dashboard</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ecommerce-products.html"><i class="fa fa-tags"></i> Products</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ecommerce-product-single.html"><i class="fa fa-tag"></i> Product Single</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ecommerce-orders.html"><i class="fa fa-cart-plus"></i> Orders</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ecommerce-order-single.html"><i class="fa fa-cart-plus"></i> Order Single</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ecommerce-customers.html"><i class="fa fa-users"></i> Customers</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ecommerce-settings.html"><i class="fa fa-cog"></i> Settings</a>
            </li>
            <li><a class="waves-effect waves-blue" href="ecommerce-invoice.html"><i class="ion ion-android-list"></i> Invoice</a>
            </li>
          </ul>
        </li>

        <li>
          <a class="yay-sub-toggle waves-effect waves-blue"><i class="fa fa-bar-chart"></i> Charts<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a>
          <ul>
            <li><a class="waves-effect waves-blue" href="charts-flot.html">Flot</a>
            </li>
            <li><a class="waves-effect waves-blue" href="charts-rickshaw.html">Rickshaw</a>
            </li>
            <li><a class="waves-effect waves-blue" href="charts-sparkline.html">Sparkline</a>
            </li>
            <li><a class="waves-effect waves-blue" href="charts-nvd3.html">NVD3</a>
            </li>
          </ul>
        </li>

        <li>
          <a class="yay-sub-toggle waves-effect waves-blue"><i class="mdi mdi-maps-place"></i> Maps<span class="yay-collapse-icon mdi-navigation-expand-more"></span></a>
          <ul>
            <li><a class="waves-effect waves-blue" href="maps-google.html">Google Maps</a>
            </li>
            <li><a class="waves-effect waves-blue" href="maps-vector.html">Vector Maps</a>
            </li>
          </ul>
        </li>

        <li class="label">Stats</li>
        <li class="content">
          <span><i class="fa fa-spinner"></i> Server Load</span>
          <div class="progress small light-green lighten-4">
            <div class="light-green accent-5" style="width: 37%"></div>
          </div>

          <span><i class="fa fa-thumbs-o-up"></i> User Satisfaction</span>
          <div class="progress small">
            <div style="width: 91%"></div>
          </div>
        </li>
      </ul>

    </div>
  </div>
</aside>
<!-- /Yay Sidebar -->

Content

Content consists of page title, breadcrumbs and page's main body. HTML code of Content container as shown below:

<!-- Main Content -->
<section class="content-wrap">

  <!-- Breadcrumb -->
  <div class="page-title">
    <div class="row">
      <div class="col s12 m9 l10">
        <h1>Blank</h1>

        <ul>
          <li>
            <a href="#"><i class="fa fa-home"></i> Home</a>  <i class="fa fa-angle-right"></i>
          </li>

          <li><a href='dashboard.html'>Dashboard</a>  <i class='fa fa-angle-right'></i>
          </li>
          <li><a href='#'>Pages</a>  <i class='fa fa-angle-right'></i>
          </li>
          <li><a href='page-blank.html'>Blank</a>
          </li>
        </ul>
      </div>
      <div class="col s12 m3 l2 right-align">
        <a href="#!" class="btn grey lighten-3 grey-text z-depth-0 chat-toggle"><i class="fa fa-comments"></i></a>
      </div>
    </div>
  </div>
  <!-- /Breadcrumb -->

  <!-- Page Content-->
  Page content goes here
  <!-- /Page Content-->

</section>
<!-- /Main Content -->

Search Bar

Search Bar contains search results and big search input. HTML code as shown below:

<!-- Search Bar -->
<div class="search-bar">
  <div class="layer-overlay"></div>
  <div class="layer-content">
    <form action="#!">
      <!-- Header -->
      <a class="search-bar-toggle grey-text text-darken-2" href="#!"><i class="mdi-navigation-close"></i></a>

      <!-- Search Input -->
      <div class="input-field">
        <i class="mdi-action-search prefix"></i>
        <input type="text" name="con-search" placeholder="Search...">
      </div>

      <!-- Search Results -->
      <div class="search-results">

        <div class="row">
          <div class="col s12 l4">
            <h4>Users</h4>

            <div class="each-result">
              <img src="assets/_con/images/user2.jpg" alt="Felecia Castro" class="circle photo">
              <div class="title">Felecia Castro</div>
              <div class="label">Content Manager</div>
            </div>

            <div class="each-result">
              <img src="assets/_con/images/user3.jpg" alt="Max Brooks" class="circle photo">
              <div class="title">Max Brooks</div>
              <div class="label">Programmer</div>
            </div>

            <div class="each-result">
              <img src="assets/_con/images/user4.jpg" alt="Patsy Griffin" class="circle photo">
              <div class="title">Patsy Griffin</div>
              <div class="label">Support</div>
            </div>

            <div class="each-result">
              <img src="assets/_con/images/user6.jpg" alt="Vernon Garrett" class="circle photo">
              <div class="title">Vernon Garrett</div>
              <div class="label">Photographer</div>
            </div>
          </div>
          <div class="col s12 l4">
            <h4>Articles</h4>

            <div class="each-result">
              <div class="icon circle blue white-text">MD</div>
              <div class="title">Material Design</div>
              <div class="label nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi consequatur debitis veritatis dolorum, enim libero!</div>
            </div>

            <div class="each-result">
              <div class="icon circle teal white-text">
                <i class="fa fa-dashboard"></i>
              </div>
              <div class="title">Admin Dashboard</div>
              <div class="label nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi consequatur debitis veritatis dolorum, enim libero!</div>
            </div>

            <div class="each-result">
              <div class="icon circle orange white-text">RD</div>
              <div class="title">Responsive Design</div>
              <div class="label nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi consequatur debitis veritatis dolorum, enim libero!</div>
            </div>

            <div class="each-result">
              <div class="icon circle red white-text">
                <i class="fa fa-tablet"></i>
              </div>
              <div class="title">Mobile First</div>
              <div class="label nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi consequatur debitis veritatis dolorum, enim libero!</div>
            </div>
          </div>
          <div class="col s12 l4">
            <h4>Posts</h4>

            <div class="no-result">No results were found ;(</div>
          </div>
        </div>

      </div>

    </form>
  </div>
</div>
<!-- /Search Bar -->

Chat

Chat contains list of contacts and chat messages block. For customaze available 1 option for light color scheme. Just use chat-light classname. HTML code as shown below:

<!--
Chat
  .chat-light - light color scheme
-->
<div class="chat">
  <div class="layer-overlay"></div>

  <div class="layer-content">

    <!-- Contacts -->
    <div class="contacts">
      <!-- Top Bar -->
      <div class="topbar">
        <a href="#!" class="text">Chat</a>
        <a href="#!" class="chat-toggle"><i class="mdi-navigation-close"></i></a>
      </div>
      <!-- /Top Bar -->

      <div class="nano">
        <div class="nano-content">

          <span class="label">Online</span>

          <div class="user">
            <img src="assets/_con/images/user2.jpg" alt="Felecia Castro" class="circle photo">

            <div class="name">Felecia Castro</div>
            <div class="status">Lorem status</div>

            <div class="online"><i class="green-text fa fa-circle"></i>
            </div>
          </div>

          <div class="user">
            <img src="assets/_con/images/user3.jpg" alt="Max Brooks" class="circle photo">

            <div class="name">Max Brooks</div>
            <div class="status">Lorem status</div>

            <div class="online"><i class="green-text fa fa-circle"></i>
            </div>
          </div>

          <div class="user">
            <img src="assets/_con/images/user4.jpg" alt="Patsy Griffin" class="circle photo">

            <div class="name">Patsy Griffin</div>
            <div class="status">Lorem status</div>

            <div class="online"><i class="green-text fa fa-circle"></i>
            </div>
          </div>

          <div class="user">
            <img src="assets/_con/images/user5.jpg" alt="Chloe Morgan" class="circle photo">

            <div class="name">Chloe Morgan</div>
            <div class="status">Lorem status</div>

            <div class="online"><i class="green-text fa fa-circle"></i>
            </div>
          </div>

          <div class="user">
            <img src="assets/_con/images/user6.jpg" alt="Vernon Garrett" class="circle photo">

            <div class="name">Vernon Garrett</div>
            <div class="status">Lorem status</div>

            <div class="online"><i class="yellow-text fa fa-circle"></i>
            </div>
          </div>

          <div class="user">
            <img src="assets/_con/images/user7.jpg" alt="Greg Mcdonalid" class="circle photo">

            <div class="name">Greg Mcdonalid</div>
            <div class="status">Lorem status</div>

            <div class="online"><i class="yellow-text fa fa-circle"></i>
            </div>
          </div>

          <div class="user">
            <img src="assets/_con/images/user8.jpg" alt="Christian Jackson" class="circle photo">

            <div class="name">Christian Jackson</div>
            <div class="status">Lorem status</div>

            <div class="online"><i class="yellow-text fa fa-circle"></i>
            </div>
          </div>


          <span class="label">Offline</span>

          <div class="user">
            <img src="assets/_con/images/user9.jpg" alt="Willie Kelly" class="circle photo">

            <div class="name">Willie Kelly</div>
            <div class="status">Lorem status</div>
          </div>

          <div class="user">
            <img src="assets/_con/images/user10.jpg" alt="Jenny Phillips" class="circle photo">

            <div class="name">Jenny Phillips</div>
            <div class="status">Lorem status</div>
          </div>

          <div class="user">
            <img src="assets/_con/images/user11.jpg" alt="Darren Cunningham" class="circle photo">

            <div class="name">Darren Cunningham</div>
            <div class="status">Lorem status</div>
          </div>

          <div class="user">
            <img src="assets/_con/images/user12.jpg" alt="Sandra Cole" class="circle photo">

            <div class="name">Sandra Cole</div>
            <div class="status">Lorem status</div>
          </div>

        </div>
      </div>
    </div>
    <!-- /Contacts -->

    <!-- Messages -->
    <div class="messages">

      <!-- Top Bar with back link -->
      <div class="topbar">
        <a href="#!" class="chat-toggle"><i class="mdi-navigation-close"></i></a>
        <a href="#!" class="chat-back"><i class="mdi-hardware-keyboard-arrow-left"></i> Back</a>
      </div>
      <!-- /Top Bar with back link -->

      <!-- All messages list -->
      <div class="list">
        <div class="nano scroll-bottom">
          <div class="nano-content">

            <div class="date">Monday, Feb 23, 8:23 pm</div>

            <div class="from-me">
              Hi, Felicia.
              <br>How are you?
            </div>

            <div class="clear"></div>

            <div class="from-them">
              <img src="assets/_con/images/user2.jpg" alt="John Doe" class="circle photo">Hi! I am good!
            </div>

            <div class="clear"></div>

            <div class="from-me">
              Glad to see you :)
              <br>This long text is intended to show how the chat will display it.
            </div>

            <div class="clear"></div>

            <div class="from-them">
              <img src="assets/_con/images/user2.jpg" alt="John Doe" class="circle photo">Also, we will send the longest word to show how it will fit in the chat window: <strong>Pneumonoultramicroscopicsilicovolcanoconiosis</strong>
            </div>

            <div class="date">Friday, Mar 10, 5:07 pm</div>

            <div class="from-me">
              Hi again!
            </div>

            <div class="clear"></div>

            <div class="from-them">
              <img src="assets/_con/images/user2.jpg" alt="John Doe" class="circle photo">Hi! Glad to see you.
            </div>

            <div class="clear"></div>

            <div class="from-me">
              I want to add you in my Facebook.
            </div>

            <div class="clear"></div>

            <div class="from-me">
              Can you give me your page?
            </div>

            <div class="clear"></div>

            <div class="from-them">
              <img src="assets/_con/images/user2.jpg" alt="John Doe" class="circle photo">I do not use Facebook. But you can follow me in Twitter.
            </div>

            <div class="clear"></div>

            <div class="from-me">
              It's good idea!
            </div>

            <div class="clear"></div>

            <div class="from-them">
              <img src="assets/_con/images/user2.jpg" alt="John Doe" class="circle photo">You can find me here - <a href="https://twitter.com/nkdevv">https://twitter.com/nkdevv</a>
            </div>

          </div>
        </div>
      </div>
      <!-- /All messages list -->

      <!-- Send message -->
      <div class="send">
        <form action="#!">
          <div class="input-field">
            <input id="chat-message" type="text" name="chat-message">
          </div>

          <button class="btn waves-effect z-depth-0"><i class="mdi-content-send"></i>
          </button>
        </form>
      </div>
      <!-- /Send message -->

    </div>
    <!-- /Messages -->
  </div>

</div>
<!-- /Chat -->

Footer

<footer>© 2015 <strong>nK</strong>. All rights reserved.</footer>

Page End

End of page contains JavaScript codes. This is blank example without plugins.

<!-- DEMO [REMOVE IT ON PRODUCTION] -->
<script type="text/javascript" src="assets/_con/js/_demo.js"></script>

<!-- jQuery -->
<script type="text/javascript" src="assets/jquery/jquery.min.js"></script>

<!-- jQuery RAF (improved animation performance) -->
<script type="text/javascript" src="assets/jqueryRAF/jquery.requestAnimationFrame.min.js"></script>

<!-- nanoScroller -->
<script type="text/javascript" src="assets/nanoScroller/jquery.nanoscroller.min.js"></script>

<!-- Materialize -->
<script type="text/javascript" src="assets/materialize/js/materialize.min.js"></script>

<!-- Sortable -->
<script type="text/javascript" src="assets/sortable/Sortable.min.js"></script>

<!-- Main -->
<script type="text/javascript" src="assets/_con/js/_con.min.js"></script>

Fonts

Con uses Roboto font from Google fonts. Loaded in header.

<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>

Theme & Layouts

Color Themes

Con comes with 18 color themes: base, amber, blue-grey, brown, cyan, deep-orange, deep-purple, green, indigo, light-blue, light-green, lime, orange, pink, purple, red, teal, yellow

To setup a selected theme. Include assets/_con/css/_con-[theme_name].css in page head.

<link rel="stylesheet" type="text/css" href="assets/_con/css/_con-red.min.css" />

Layouts

The best way to learn how to use Con's available layout options, please go to layouts.html page.

New Page

To create a new page, you can use page-blank.html which provides basic page layout which you can extend and modify further.

Source Files + SASS

Con uses SASS and gulp for development. You can find everything you need to build in src directory. Ready to use gulpfile.js, batch files, source scss, html and js files.
Getting started Gulp guide - see here.

Plugins Usage

Choose plugin:

FontAwesome

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.

Plugin Page: http://fortawesome.github.io/Font-Awesome/
Demo Page: css-icons.html

CSS Files:

<link rel="stylesheet" type="text/css" href="assets/font-awesome/css/font-awesome.min.css">

JavaScript Files:

No JavaScript

Usage Example:

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

Material Design Icons

Material Design Icons is set of 740 icons courtesy of Google.

Plugin Page: http://materializecss.com/icons.html
Demo Page: css-icons.html

CSS Files:

<link rel="stylesheet" type="text/css" href="assets/material-design-icons/css/material-design-icons.min.css">

JavaScript Files:

No JavaScript

Usage Example:

<i class="mdi-content-add"></i>

Ion Icons

Ion Icons is premium icon font for Ionic Framework.

Plugin Page: http://ionicons.com/
Demo Page: css-icons.html

CSS Files:

<link rel="stylesheet" type="text/css" href="assets/ionicons/css/ionicons.min.css">

JavaScript Files:

No JavaScript

Usage Example:

<i class="ion-fireball"></i>

Weather Icons

Weather Icons is a font of 189 weather themed icons, ready to be dropped right into Bootstrap or any other project.

Plugin Page: http://erikflowers.github.io/weather-icons/
Demo Page: css-icons.html

CSS Files:

<link rel="stylesheet" type="text/css" href="assets/weatherIcons/css/weather-icons.min.css">

JavaScript Files:

No JavaScript

Usage Example:

<i class="wi wi-wind-default"></i>

Pikaday

Pikaday - is refreshing JavaScript Datepicker.

Plugin Page: https://github.com/dbushell/Pikaday
Demo Page: forms-advanced.html

CSS Files:

<link rel="stylesheet" type="text/css" href="assets/pikaday/pikaday.css">

JavaScript Files:

<script type="text/javascript" src="assets/pikaday/pikaday.js"></script>
<script type="text/javascript" src="assets/pikaday/pikaday.jquery.js"></script>

Usage Example:

<input class="pikaday" type="date">

Clock Picker

Clockpicker - is clock-style timepicker for Bootstrap (or jQuery).

Plugin Page: http://weareoutman.github.io/clockpicker/
Demo Page: forms-advanced.html

CSS Files:

<link rel="stylesheet" type="text/css" href="assets/jquery-clockpicker/jquery-clockpicker.min.css">

JavaScript Files:

<script type="text/javascript" src="assets/jquery-clockpicker/jquery-clockpicker.min.js"></script>

Usage Example:

<input class="clockpicker" type="text" value="18:10" data-donetext="OK">

Spectrum

Spectrum - is No Hassle JavaScript Colorpicker.

Plugin Page: https://bgrins.github.io/spectrum/
Demo Page: forms-advanced.html

CSS Files:

<link rel="stylesheet" type="text/css" href="assets/spectrum/spectrum.css">

JavaScript Files:

<script type="text/javascript" src="assets/spectrum/spectrum.js">

Usage Example:

<input type='text' class="spectrum" value="#42A5F5" />

Select2

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Plugin Page: https://select2.github.io/
Demo Page: forms-advanced.html

CSS Files:

<link rel="stylesheet" type="text/css" href="assets/select2/css/select2.min.css" />

JavaScript Files:

<script type="text/javascript" src="assets/select2/js/select2.full.min.js"></script>

Usage Example:

<select class="select2">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  ...
</select>

Tags Input

Magically convert a simple text input into a cool tag list with this jQuery plugin.

Plugin Page: http://xoxco.com/projects/code/tagsinput/
Demo Page: forms-advanced.html

CSS Files:

<link rel="stylesheet" type="text/css" href="assets/jquery-tags-input/jquery.tagsinput.css" />

JavaScript Files:

<script type="text/javascript" src="assets/jquery-tags-input/jquery.tagsinput.js"></script>

Usage Example:

<input class="input-tag" type="text" name="tags" id="tags" value="PHP,JavaScript,CSS" />

Drop Zone

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.

Plugin Page: http://www.dropzonejs.com/
Demo Page: forms-advanced.html

CSS Files:

<link rel="stylesheet" type="text/css" href="assets/dropzone/dropzone.min.css" />

JavaScript Files:

<script type="text/javascript" src="assets/dropzone/dropzone.min.js"></script>

Usage Example:

<form action="/file-upload"
      class="dropzone"
      id="my-dropzone"></form>

Inputmask

jquery.inputmask is a jquery plugin which create an input mask.
An inputmask helps the user with the input by ensuring a predefined format. This can be usefull for dates, numerics, phone numbers, ...

Plugin Page: http://robinherbots.github.io/jquery.inputmask/
Demo Page: forms-advanced.html

CSS Files:

No CSS

JavaScript Files:

<script type="text/javascript" src="assets/jquery-input-mask/jquery.inputmask.bundle.min.js"></script>

Usage Example:

<!-- Date -->
<div class="input-field">
  <input id="masked-date" type="text" data-inputmask="'alias': 'date'">
  <label for="masked-date">Date</label>
</div>
<!-- /Date -->
 
<!-- Date Alt -->
<div class="input-field">
  <input id="masked-date-alt" type="text" data-inputmask="'mask': 'y/m/d'">
  <label for="masked-date-alt">Date Alt</label>
</div>
<!-- /Date Alt -->
 
<!-- Time -->
<div class="input-field">
  <input id="masked-time" type="text" data-inputmask="'mask': 'h:s'">
  <label for="masked-time">Time</label>
</div>
<!-- /Time -->
 
<!-- Phone -->
<div class="input-field">
  <input id="masked-phone" type="text" data-inputmask="'mask': '(999) 999-9999'">
  <label for="masked-phone">Phone</label>
</div>
<!-- /Phone -->
 
<!-- Currency -->
<div class="input-field">
  <input id="masked-currency" type="text" data-inputmask="'numericInput': true, 'mask': '$ 999,999.99', 'rightAlignNumerics':false">
  <label for="masked-currency">Currency</label>
</div>
<!-- /Currency -->

ParsleyJS

Parsley, the ultimate JavaScript form validation library
Validating forms frontend have never been so powerful and easy.

Plugin Page: http://parsleyjs.org/
Demo Page: forms-validation.html

CSS Files:

No CSS

JavaScript Files:

<script type="text/javascript" src="assets/parsley/parsley.min.js"></script>

Usage Example:

<form data-parsley-validate>
  <!-- Name -->
  <div class="input-field">
    <input id="input-name" type="text" required>
    <label for="input-name">Name</label>
  </div>
  <!-- /Name -->
 
  <!-- Email -->
  <div class="input-field">
    <input id="input-email" type="email" required>
    <label for="input-email">Email</label>
  </div>
  <!-- /Email -->
 
  <!-- Gender -->
  <p>
    <input name="radio-gender" type="radio" id="radio-gender-1" required />
    <label for="radio-gender-1">Male</label>
    <input name="radio-gender" type="radio" id="radio-gender-2" />
    <label for="radio-gender-2">Female</label>
  </p>
  <!-- /Gender -->
 
  <!-- Hobbies -->
  <label>Hobbies (2 minimum):</label>
  <p>
    <input name="check-hobbies" type="checkbox" id="check-skiing" value="skiing" data-parsley-mincheck="2" required />
    <label for="check-skiing">Skiing</label>
    <input name="check-hobbies" type="checkbox" id="check-running" value="running" />
    <label for="check-running">Running</label>
    <input name="check-hobbies" type="checkbox" id="check-eating" value="eating" />
    <label for="check-eating">Eating</label>
    <input name="check-hobbies" type="checkbox" id="check-sleeping" value="sleeping" />
    <label for="check-sleeping">Sleeping</label>
  </p>
  <!-- /Hobbies -->
 
  <!-- Heard -->
  <select name="heard" required>
    <option value="" disabled selected>Choose option</option>
    <option value="press">Press</option>
    <option value="internet">Internet</option>
    <option value="mouth">Word of mouth</option>
    <option value="other">Other...</option>
  </select>
  <!-- /Heard -->
 
  <!-- Message -->
  <div class="input-field">
    <textarea id="textarea-msg" class="materialize-textarea" name="message" data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-maxlength="100" data-parsley-validation-threshold="10" data-parsley-minlength-message="Come on! You need to enter at least a 20 caracters long comment.." required></textarea>
    <label  for="textarea-msg">Message (20 chars min, 100 max):</label>
  </div>
  <!-- /Message -->
 
  <!-- Validation Button -->
  <div class="row">
    <div class="col s12">
      <button class="btn">Validate</button>
    </div>
  </div>
  <!-- /Validation Button -->
<form>

CKEditor

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages. Enhance your website experience with our community maintained editor.

Plugin Page: http://ckeditor.com/
Demo Page: forms-editors.html

CSS Files:

No CSS

JavaScript Files:

<script type="text/javascript" src="assets/ckeditor/ckeditor.js"></script>

Usage Example:

<textarea id="ckeditor1"></textarea>
<div id="ckeditor2">Inline Text Editing</div>

<script>
  CKEDITOR.replace( 'ckeditor1' );
  CKEDITOR.inline( 'ckeditor2' );
</script>

MarkItUp

markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.

Plugin Page: http://markitup.jaysalvat.com/home/
Demo Page: forms-editors.html

CSS Files:

<link rel="stylesheet" type="text/css" href="assets/markitup/skins/_con/style.css" />
<link rel="stylesheet" type="text/css" href="assets/markitup/sets/default/style.css" />

JavaScript Files:

<script type="text/javascript" src="assets/markitup/sets/default/set.js"></script>
<script type="text/javascript" src="assets/markitup/jquery.markitup.js"></script>

Usage Example:

<textarea class="markItUp"></textarea>

Flot

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

Plugin Page: http://www.flotcharts.org/
Demo Page: charts-flot.html

CSS Files:

No CSS

JavaScript Files:

<script type="text/javascript" src="assets/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="assets/flot/jquery.flot.time.min.js"></script>
<script type="text/javascript" src="assets/flot/jquery.flot.pie.min.js"></script>
<script type="text/javascript" src="assets/flot/jquery.flot.tooltip.min.js"></script>
<script type="text/javascript" src="assets/flot/jquery.flot.categories.min.js"></script>

Usage Example:

<div id="flotLineChart" style="height: 250px"></div>

<script>
  (function() {
    var chart = $("#flotLineChart");
    var data1 = {
      data: [[1, 50], [2, 40], [3, 45], [4, 23],[5, 55],[6, 65],[7, 61],[8, 70],[9, 65],[10, 75],[11, 57],[12, 59]],
      label: "Mails"
    };
    var data2 = {
      data: [[1, 25], [2, 50], [3, 23], [4, 48],[5, 38],[6, 40],[7, 47],[8, 55],[9, 43],[10,50],[11,47],[12, 39]],
      label: "SMS"
    };
    var options = {
      series: {
        lines: {
          show: true,
          lineWidth: 1,
          fill: true, 
          fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.13 } ] }
        },
        points: {
          show: true, 
          lineWidth: 2,
          radius: 3
        },
        shadowSize: 0,
        stack: true
      },
      grid: {
        hoverable: true, 
        clickable: true, 
        tickColor: "#f9f9f9",
        borderWidth: 0
      },
      legend: {
        // show: false
        backgroundOpacity: 0,
        labelBoxBorderColor: "#fff"
      },  
      colors: ["#3f51b5", "#009688"],
      xaxis: {
        ticks: [[1, "Jan"], [2, "Feb"], [3, "Mar"], [4,"Apr"], [5,"May"], [6,"Jun"], 
                   [7,"Jul"], [8,"Aug"], [9,"Sep"], [10,"Oct"], [11,"Nov"], [12,"Dec"]],
        font: {
          family: "Roboto,sans-serif",
          color: "#ccc"
        }
      },
      yaxis: {
        ticks:7, 
        tickDecimals: 0,
        font: {color: "#ccc"}
      }
    };
    
    function initFlot() {
      $.plot(chart, [data1, data2], options);
      chart.find('.legend table').css('width', 'auto')
           .find('td').css('padding', 5);
    }
    initFlot();
    $(window).on('resize', initFlot);

    function showTooltip(x, y, contents) {
      $('<div id="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: y - 40,
        left: x - 55,
        color: "#fff",
        padding: '5px 10px',
        'border-radius': '3px',
        'background-color': 'rgba(0,0,0,0.6)'
      }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    chart.bind("plothover", function (event, pos, item) {
      if (item) {
        if (previousPoint != item.dataIndex) {
          previousPoint = item.dataIndex;

          $("#tooltip").remove();
          var x = item.datapoint[0].toFixed(0),
              y = item.datapoint[1].toFixed(0);

          var month = item.series.xaxis.ticks[item.dataIndex].label;

          showTooltip(item.pageX, item.pageY,
                      item.series.label + " of " + month + ": " + y);
        }
      }
      else {
        $("#tooltip").remove();
        previousPoint = null;
      }
    });
  }());
</script>

Rickshaw

Rickshaw is a JavaScript toolkit for creating interactive time series graphs.

Plugin Page: http://code.shutterstock.com/rickshaw/
Demo Page: charts-rickshaw.html

CSS Files:

<link rel="stylesheet" type="text/css" href="assets/rickshaw/rickshaw.min.css" />

JavaScript Files:

<script type="text/javascript" src="assets/d3/d3.min.js"></script>
<script type="text/javascript" src="assets/rickshaw/rickshaw.min.js"></script>

Usage Example:

<div id="rickshawLine" style="height: 250px"></div>

<script>
  var rickshawLine1 = [ { x: 0, y: 43 }, { x: 1, y: 42 }, { x: 2, y: 32 }, { x: 3, y: 12 }, { x: 4, y: 46 }, { x: 5, y: 67 }, { x: 6, y: 34 }, { x: 7, y: 25 }, { x: 8, y: 32 }, { x: 9, y: 14 }, { x: 10, y: 2 }, { x: 11, y: 25 }, { x: 12, y: 48 } ];
  var rickshawLine2 = [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 24 }, { x: 3, y: 32 }, { x: 4, y: 67 }, { x: 5, y: 53 }, { x: 6, y: 42 }, { x: 7, y: 32 }, { x: 8, y: 12 }, { x: 9, y: 35 }, { x: 10, y: 87 }, { x: 11, y: 56 }, { x: 12, y: 36 } ];
  var rickshawLine3 = [ { x: 0, y: 30 }, { x: 1, y: 29 }, { x: 2, y: 12 }, { x: 3, y: 5 }, { x: 4, y: 38 }, { x: 5, y: 57 }, { x: 6, y: 21 }, { x: 7, y: 16 }, { x: 8, y: 29 }, { x: 9, y: 10 }, { x: 10, y: 0 }, { x: 11, y: 20 }, { x: 12, y: 37 } ];

  // Line
  (function() {
    var element = $("#rickshawLine");
    var graph = new Rickshaw.Graph( {
      element: element[0],
      renderer: 'line',
      stroke: true,
      series: [ {
        data: rickshawLine1,
        color: '#673ab7',
        name: 'Visits'
      }, {    
        data: rickshawLine3,
        color: '#2196f3',
        name: 'Posts'
      }]
    } );
    graph.render();

    var hoverDetail = new Rickshaw.Graph.HoverDetail({
      graph: graph,
      xFormatter: function(x) { return x + " Jan 2015" },
      yFormatter: function(y) { return Math.floor(y) }
    });

    // responsive
    $(window).on('resize', function() {
      graph.configure({
        width: element.width()
      });
      graph.render();
    });
  }());
</script>

Sparkline

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

Plugin Page: http://omnipotent.net/jquery.sparkline/
Demo Page: charts-sparkline.html

CSS Files:

No CSS

JavaScript Files:

<script type="text/javascript" src="assets/sparkline/jquery.sparkline.min.js"></script>

Usage Example:

<div id="sparkline1"></div>
<div id="sparkline2"></div>

<script>
  $("#sparkline1").conSparkline([5,6,7,9,9,5,3,2,2,4,6,7], {
    type: 'line',
    width: '100%',
    height: '100',
    lineColor: '#64b5f6',
    spotColor: undefined,
    minSpotColor: undefined,
    maxSpotColor: undefined,
    highlightSpotColor: '#2196f3',
    highlightLineColor: '#2196f3',
    spotRadius: 2});
 
  $("#sparkline2").conSparkline([12,9,7,8,9,5,3,5,10,14,5,2,3,4,6,9,4 ], {
    type: 'line',
    width: '100%',
    height: '100 ',
    lineColor: '#4db6ac',
    fillColor: '#b2dfdb',
    highlightSpotColor: '#009688',
    spotColor: false,
    minSpotColor: false,
    maxSpotColor: false,
    highlightLineColor: false,
    highlightLineColor: false,
    spotRadius: 5});
</script>

NVD3

This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizeable, staying away from your standard cookie cutter solutions.

Plugin Page: http://nvd3.org/index.html
Demo Page: charts-nvd3.html

CSS Files:

<link rel="stylesheet" type="text/css" href="assets/nvd3/nv.d3.min.css" />

JavaScript Files:

<script type="text/javascript" src="assets/d3/d3.min.js"></script>
<script type="text/javascript" src="assets/nvd3/nv.d3.min.js"></script>

Usage Example:

<div id="chart1" style="height: 300px;"></div>

<script>
  (function() {
    nv.addGraph(function() {
      var chart = nv.models.lineChart()
                    .margin({right: 10})
                    .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
                    .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
                    .showYAxis(true)        //Show the y-axis
                    .showXAxis(true)        //Show the x-axis
      ;

      chart.xAxis     //Chart x-axis settings
          .axisLabel('Time (ms)')
          .tickFormat(d3.format(',r'));

      chart.yAxis     //Chart y-axis settings
          .axisLabel('Voltage (v)')
          .tickFormat(d3.format('.02f'));

      /* Done setting the chart up? Time to render it!*/
      var myData = sinAndCos();   //You need data...

      d3.select('#chart1').append('svg')       //Select the <svg> element you want to render the chart in.   
          .datum(myData)         //Populate the <svg> element with chart data...
          .call(chart);          //Finally, render the chart!

      //Update the chart when window resizes.
      nv.utils.windowResize(function() { chart.update() });
      return chart;
    });
    function sinAndCos() {
      var sin = [],sin2 = [],
          cos = [];

      //Data is represented as an array of {x,y} pairs.
      for (var i = 0; i < 100; i++) {
        sin.push({x: i, y: Math.sin(i/10)});
        sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5});
        cos.push({x: i, y: .5 * Math.cos(i/10)});
      }

      //Line chart data should be sent as an array of series objects.
      return [
        {
          values: sin,      //values - represents the array of {x,y} data points
          key: 'Sine Wave', //key  - the name of the series.
          color: '#ff7f0e'  //color - optional: choose your own line color.
        },
        {
          values: cos,
          key: 'Cosine Wave',
          color: '#2ca02c'
        },
        {
          values: sin2,
          key: 'Another sine wave',
          color: '#7777ff',
          area: true      //area - set to true if you want this line to turn into a filled area chart.
        }
      ];
    }
  }());
</script>

Gmaps

gmaps.js allows you to use the potential of Google Maps in a simple way.
No more extensive documentation or large amount of code.

Plugin Page: http://hpneo.github.io/gmaps/
Demo Page: maps-google.html

CSS Files:

No CSS

JavaScript Files:

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="assets/gmaps/gmaps.min.js"></script>

Usage Example:

<!-- Map -->
<div class="map" id="map1"></div>
<!-- /Map -->
 
<script>
  /*
   * MAP 1
   */
  jQuery(function() {
    "use strict";

    // init panorama
    var panorama = GMaps.createPanorama({
      el: '#map1',
      lat: -23.442896,
      lng: 151.906584,
      pov: {
        heading: 340,
        pitch: -3
      }
    });
  });
</script>

jVectorMap

Javascript vector maps.

Plugin Page: http://jvectormap.com/
Demo Page: maps-vector.html

CSS Files:

<link rel="stylesheet" type="text/css" href="assets/jquery-jvectormap/jquery-jvectormap.css" />

JavaScript Files:

<script type="text/javascript" src="assets/jquery-jvectormap/jquery-jvectormap.min.js"></script>
<script type="text/javascript" src="assets/jquery-jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script type="text/javascript" src="assets/jquery-jvectormap/gdp-data.js"></script>

Usage Example:

<!-- map -->
<div id="map1" class="map"></div>
<!-- /map -->

<script>
/*
 * MAP 1
 */
jQuery(function() {
  $('#map1').vectorMap({
    map: 'world_mill_en',
    series: {
      regions: [{
        values: gdpData,
        scale: ['#C8EEFF', '#0071A4'],
        normalizeFunction: 'polynomial'
      }]
    },
    onRegionTipShow: function(e, el, code){
      el.html(el.html()+' (GDP - '+gdpData[code]+')');
    }
  });
})
</script>

DataTables

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

Plugin Page: http://www.datatables.net/
Demo Page: ui-datatables.html

CSS Files:

No CSS

JavaScript Files:

<script type="text/javascript" src="assets/dataTables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="assets/dataTables/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="assets/dataTables/extensions/Scroller/js/dataTables.scroller.min.js"></script>

Usage Example:

<table id="table1" class="display table table-bordered table-striped table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    ...
  </tbody>
</table>
 
<script type="text/javascript" src="assets/dataTables/js/jquery.dataTables.min.js"></script>
<script>
  $('#table1').DataTable({
    "bLengthChange": false,
    "iDisplayLength": 5,
    "filter": false
  });
</script>

FullCalendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop event calendar like the one below. It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format. It is visually customizable with a rich API.

Plugin Page: http://fullcalendar.io/
Demo Page: page-calendar.html

CSS Files:

<link rel="stylesheet" type="text/css" href="assets/fullcalendar/fullcalendar.min.css" />

JavaScript Files:

<script type="text/javascript" src="assets/fullcalendar/moment.min.js"></script>
<script type="text/javascript" src="assets/fullcalendar/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="assets/fullcalendar/fullcalendar.min.js"></script>

Usage Example:

<!-- Calendar -->
<div class="card">
  <div id="calendar"></div>
</div>
<!-- /Calendar -->

<script>
  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2015-02-12',
    editable: true,
    events: [
      {
        title: 'All Day Event',
        start: '2015-02-01'
      },
      {
        title: 'Long Event',
        start: '2015-02-07',
        end: '2015-02-10'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2015-02-09T16:00:00'
      },
      {
        id: 999,
        title: 'Repeating Event',
        start: '2015-02-16T16:00:00'
      },
      {
        title: 'Conference',
        start: '2015-02-11',
        end: '2015-02-13'
      },
      {
        title: 'Meeting',
        start: '2015-02-12T10:30:00',
        end: '2015-02-12T12:30:00'
      },
      {
        title: 'Lunch',
        start: '2015-02-12T12:00:00'
      },
      {
        title: 'Meeting',
        start: '2015-02-12T14:30:00'
      },
      {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2015-02-28'
      }
    ]
  });
</script>

AngularJS

Change Page Options

You can add your setting for each page in js/app.js file. Full list of available options:

conAngular.factory('settings', ['$rootScope', function($rootScope) {
  var settings = {
    rtl: false, // rtl mode
    navbar: {
      dark:   false, // dark color scheme
      static: false, // static
      under:  false  // navbar under sidebar
    },
    sidebar: {
      hideToSmall:     true,    // hide to small sidebar
      static:          false,   // static
      gestures:        true,    // gestures support
      light:           false,   // light color scheme
      overlapContent:  false,   // Overlay content when opened
      effect:          'shrink' // show effect: [shrink, push, overlay]
    },
    chat: {
      light: false // light color scheme
    }
  }
  ...

New Page

To create new page in AngularJS version of template, you need to done some steps:

Create html file angularjs/tpl/new_page.html

Add the page to Sidebar angularjs/tpl/parts/sidebar.html:

<li>
  <a href="#/new_page.html" class="waves-effect waves-blue"><i class="fa fa-css3"></i> New Page</a>
</li>

Add new state for your page in angularjs/js/app.js [223 line]. Example with Sortable script included:

.state('/new_page', {
  url: "/new_page.html",
  templateUrl: "tpl/new_page.html",
  controller: "PageController",
  data: {
    pageTitle: 'New Page Title',
    crumbs: [{
        title: '<i class="fa fa-home"></i> Home',
        href: '#'
      }, {
        title: 'Dashboard',
        href: '#/dashboard.html'
      }, {
        title: 'New Page',
        href: '#/new_page.html'
      }]
  },
  resolve: {
    deps: ['$ocLazyLoad', function($ocLazyLoad) {
      return $ocLazyLoad.load([{
        name: 'conAngular',
        insertBefore: '#ngInsertBefore',
        files: conAssets('sortable')
      }]);
    }]
  }
})

Use Plugins

To use plugins you have 2 ways:

ocLazyLoad way. Example with Sortable and Markitup plugins:

resolve: {
  deps: ['$ocLazyLoad', function($ocLazyLoad) {
    return $ocLazyLoad.load([{
      name: 'conAngular',
      insertBefore: '#ngInsertBefore',
      files: [
        '../assets/sortable/Sortable.min.js',
        '../assets/markitup/skins/_con/style.css',
        '../assets/markitup/sets/default/style.css',
        '../assets/markitup/sets/default/set.js',
        '../assets/markitup/jquery.markitup.js'
      ]
    }]);
  }]
}

conAssets method way. Example with Sortable and Markitup plugins:

resolve: {
  deps: ['$ocLazyLoad', function($ocLazyLoad) {
    return $ocLazyLoad.load([{
      name: 'conAngular',
      insertBefore: '#ngInsertBefore',
      files: conAssets('sortable,markitup')
    }]);
  }]
}

All available plugin name for conAssets method

simpleWeather
sparkline
flot
nvd3
rickshaw
markitup
ckeditor
select2
tagsinput
dropzone
clockpicker
pikaday
spectrum
inputmask
parsley
gmaps
jvectormap
dataTables
fullcalendar
sortable

Credits

Materialize – http://materializecss.com/
jQuery – http://jquery.com/
nanoScroller – http://jamesflorentino.github.io/nanoScrollerJS/
SimpleWeather – http://simpleweatherjs.com/
DataTables – http://www.datatables.net/
FullCalendar – http://fullcalendar.io/
YAY bar – http://codecanyon.net/item/yay-advanced-sidebar-for-bootstrap/10702487
Google Code Prettify – https://code.google.com/p/google-code-prettify/
HTML5shiv – https://github.com/aFarkas/html5shiv
Icons:
- FontAwesome – http://fontawesome.io
- ionicons – http://ionicons.com/
- WeatherIcons – http://erikflowers.github.io/weather-icons/
- Flag Icons – http://www.famfamfam.com/lab/icons/flags/
Charts:
- NVD3 – http://nvd3.org
- Flot Charts – http://www.flotcharts.org/
- Rickshaw Charts – http://code.shutterstock.com/rickshaw/
- Sparkline – http://omnipotent.net/jquery.sparkline/
Editors:
- CKEditor – http://ckeditor.com/
- MarkItUp – http://markitup.jaysalvat.com/
Advanced Form Elements:
- Pikaday – https://github.com/dbushell/Pikaday
- Clockpicker – http://weareoutman.github.io/clockpicker/
- Spectrum – https://bgrins.github.io/spectrum/
- Select2 – https://select2.github.io/
- Tags Input – https://github.com/xoxco/jQuery-Tags-Input
- DropzoneJS – http://www.dropzonejs.com/
- jQuery.inputmask – http://robinherbots.github.io/jquery.inputmask
- Parsley – http://parsleyjs.org/
Maps:
- gmaps – http://hpneo.github.com/gmaps/
- jVectorMap – http://jvectormap.com/
Images from Pixabay – http://pixabay.com/

End of Documentation

Thanks for purchasing Con. We hope you will enjoy using it for your next project.

Thank You For Purchasing

Overview

Template Structure

Beginning of Page

RTL Support

Page Head

Top Navbar

Sidebar

Content

Search Bar

Chat

Footer

Page End

Fonts

Theme & Layouts

Color Themes

Layouts

New Page

Source Files + SASS

Plugins Usage

FontAwesome

Material Design Icons

Ion Icons

Weather Icons

Pikaday

Clock Picker

Spectrum

Select2

Tags Input

Drop Zone

Inputmask

ParsleyJS

CKEditor

MarkItUp

Flot

Rickshaw

Sparkline

NVD3

Gmaps

jVectorMap

DataTables

FullCalendar

AngularJS

Change Page Options

New Page

Use Plugins

Credits

End of Documentation