Neon - Laborator Documentation - 20Script

# 1. Getting Started

### 1.1. Theme Overview

Neon – is flat admin template for multi-purpose usage built with the latest version of Bootstrap – 3.

It contains more than 60 HTML files which offer you great variety of layout options and resources, and it will be extended in the future updates with newer plugins and pages.

### 1.2. First Steps

To get you started with Neon theme, you should be familiar with Twitter Bootstrap which is widely used and most-preferred HTML framework from developers worldwide.

Firstly, open extra-blank-page.html file to know more about the main theme structure. It basically includes the markup that all other pages will include it too.

# 2. Template Structure

Neon requires that body to have the "page-body" class, so this is mandatory.

Inside the body you should apply this main markup structure:

Or in the case if you use Horizontal menu layout:

And if you use both menu types then it should start like this:

The markup above is mandatory, so you have to put your markup inside this structure.

# 3. Layout Configuration

To see all options that Neon Layout offers, refer to this link: http://themes.laborator.co/neon/layouts/layout-api/

### 3.1. Sidebar Left

To use this type of layout your markup should start with:

Then inside "sidebar-menu" you put the logo and menu markup.

Here is sample HTML code you can put here:

### Collapsed Sidebar

To set collapsed sidebar by default add class "sidebar-collapsed" to element "div.page-container".

### Fixed Sidebar

Add "fixed" class to "div.sidebar-menu" element. See an example on this file: html/layout-sidebar-static.html

### Static Sidebar

If you want to prevent users to collapse/expand sidebar just remove this part of code from the above pastebin:

### 3.2. Horizontal Menu

To apply this form of menu, firstly add "horizontal-menu" class to "page-container" div. Then as a children add this markup:

    <header class="navbar navbar-fixed-top">

Note: "navbar-fixed-top" class is optional, just in case you need it to stick to the top always when user scrolls down.

See the example markup of this menu:

### 3.3. Both Menus

You can also include both of these menus in one page, simply by using the above examples, but you should add these classes "horizontal-menu with-sidebar" then proceed with the menus, here is an example:

Note that you must include this markup inside "page-container" div.

In this case, if you have two menus included, you can make the logo width the same as sidebar, simply by adding "fit-logo-with-sidebar" class to "page-container". Here is an example:

Before:

After added the fit-logo-with-sidebar container:

# 4. Setting Up The Menu

### 4.1. Left Menu

The markup for sidebar menu is quite simple:

    <ul id="main-menu" class="">
    	<!-- add class "multiple-expanded" to allow multiple submenus to open -->
    	<!-- class "auto-inherit-active-class" will automatically add "active" class for parent elements who are marked already with class "active" -->
    	<!-- Search Bar -->

    	<li>...</li>
    	...
    </ul>

Note that "multiple-expanded" means that several submenu items can be opened, so by not adding this class will make the menu container to have only one submenu open, and others will be collapsed.

An item could be set with this markup:

    <li>
    	<a href="charts-charts.html">
    		<i class="entypo-chart-bar"></i>
    		<span>Charts</span>
    	</a>
    </li>

If you want to apply badge to the link:

    <a href="mailbox.html">
    	<i class="entypo-mail"></i>
    	<span>Mailbox</span>
    	<span class="badge badge-secondary">8</span>
    </a>

Repeat this process with other submenus, simply only the parent element (menu container) should have `#main_menu` id.

In case when you have submenu and you want to make it always open add this class to li parent element: opened

Active class is name as usually "active", so it should applied to li element.

#### Search form

It has custom structure and cannot be any different, so always apply this markup if you want to add the search to sidebar menu:

    <li id="search">
    	<form method="get" action="">
    		<input type="text" name="q" class="search-input" placeholder="Search something..."/>
    		<button type="submit">
    			<i class="entypo-search"></i>
    		</button>
    	</form>
    </li>

### 4.2. Top Menu

Just like the left menu, it has the same structure, you just need to add ".navbar-nav" class and not #main_menu id.

Please refer to the Left menu topic if you want to know how to insert items on this menu.

### 4.3. Mixed Menus

If you already can manage to set Left and Top menu then all you need is to set them in their own HTML structure. Read more at this topic about how to set the both menus: Layout Configuration > Both Menus

These files demonstrate this:

html/layout-mixed-menus.html

html/layout-mixed-menus-collapsed.html

html/layout-mixed-menus-logo-fit.html

# 5. Extending the Theme

This is the most important part of the theme documentation, because you will learn how to dig deeper in the theme and get it better. Apart from other sections, they all have files to see the live demonstration, but here you will learn how you can extend this theme.

### 5.1. Styling

Neon its built on Twitter Bootstrap 3 framework, so the chances are higher for you know how to handle the development of this kind of framework.

We have developed Neon theme using LESS dynamic styling language, and all files are separated to make you more easy to find and customize any part of theme, add or remove parts of CSS that are not needed on your theme.

The only file needed to compile is assets/css/neon.less, it contains all the CSS, and you don't need to add anything else outside this file, except when you use custom resource which has its own CSS style.

The LESS structure of the items organized on this principle:

- assets/css/bs-less/
- assets/css/neon-less/
- assets/css/other-less/

It clearly describes what is included, what should be in, and other stylesheets. They have been grouped on single file neon.less, here is how it looks:

So in case you need to remove any feature on CSS simply comment the line, for example

//@import "neon-less/datatables.less";

And if you want to add custom styling just create less file and include it:

@import "my-less/modals-v2.less";

Then compile the CSS using any related LESS compiler, my preferred one and used to build Neon is: LESS.app, download it here.

### Not familiar with LESS? No Problem

LESS styling has been used only to keep control what you want to include on the theme and what not. If you want not to touch the development files, then open assets/css/custom.css and put your own CSS.

This file its called on all HTML pages that come with Neon.

### 5.2. Scripting

Main scripts instances of the theme are executed on assets/js/neon-custom.js so if you want to learn more how they coded read the code. Its all commented to help you understand what does what.

Browser Intent - Responsive

For responsiveness, we have created neon.resize event that is applied on $(window) and tells you when the window has been resized. This is special event because it fires only when the window has finished the resizing, not every pixel it has been resized. They you can use helper functions to detect the device type and they are:

- is(device_type);
  - Example: is('largescreen'); or is('tabletscreen'); or is('devicescreen'); or is('sdevicescreen');
- ismdxl(); // true when screen size is large screen or tablet screen
- isxs(); // true when screen is smaller than tablet

You can change the breakpoints or add custom on this file: assets/js/resizeable.js

# 6. Other

### 6.1. Chat

Neon Chat is also an important part of the theme. If you are going to use it, include it inside the .page-container

    <div class="page-container">

    	...

    	<div class="main-content">...</div>

    	<!-- Chat Main Container -->
    	<div id="chat">
    		...
    	</div>

    </div>

The chat structure should be like this:

To learn about all the facilities of the chat and how to implement it properly, read here about Chat API.

The required scripts to include are assets/js/neon-chat.js and jquery-ui

# 7. Credits

Neon wouldn't be this great if the staff of Laborator, Arlind Nushi and Art Ramadani wouldn't be part of this project, neither without the presence of these great plugins, graphics and other resources:

- Twitter Bootstrap
- jVectormap
- Morris.js
- jQuery Sparklines
- Rickshaw
- FullCalendar
- Google Webfonts
- SlimScroll
- Nice Scroll
- Toastr
- Knob

Visit our official webiste for more Themes, Templates and Plugins - www.laborator.co