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.

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.

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:

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:

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:

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>

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.

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

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.

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

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