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 Less files that should be compiled are:

  • assets/less/neon-core.less
  • assets/less/neon-forms.less
  • assets/less/neon-theme.less

The reason why these files are separated is because in some IE browsers the maximum number of CSS rules is limited and the full-feature bundled version is not supported. So they are each the same priority and all of are required to include.

The LESS structure of the items organized on this principle:

  •  assets/less/bs-less/
  • assets/less/neon-less/
  • assets/less/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:

neon.less

 

 

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: CodeKit, 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.

Was this article helpful?