ChadCollins.com - A Responsive HTML5 Admin UI Framework

Current Version
1.5 Theme Core
3.32 Bootstrap
3.21 Font-Awesome

Tutorial Menu
LESS Tutorial
Email Templates
Performance Optimizations

Further Documentation
Go To General Docs
Go To Plugin Docs

What is Less?

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes.

Why use Less?

ChadCollins.com uses Less to perform many theme optimizations and performance improvements. By using Less you unlock the themes true framework power. You can modify header and sidebar options, create new color schemes, or disable plugins and resources in the blink of an eye.

Where can I learn More?

Class	Description
Website:	http://lesscss.org/#
Documentation:	http://lesscss.org/features/
Git Branch:	https://github.com/less/less.js

Picking a Compiler

As previously mentioned Less is a css pre-processor, which means that the data needs to be compiled prior to use. There are many advanced ways to do this. However, for the purpose of this tutorial we are going to use the Windows based GUI compiler WinLESS. This will allow even those who have never used Less to get up and started quickly.

GUI Compiler	Website	Operating System
WinLess:	https://github.com/marklagendijk/WinLess	Windows
LESS.app:	http://incident57.com/less	OSx
Plessc:	https://github.com/Mte90/Plessc	Linux
More Info:	http://lesscss.org/usage/#guis-for-less	Mixed

Step 1 - Download Your Compiler

This tutorial uses the Windows based GUI compiler WinLESS. There are many alternate and more advanced ways to compile your Less project. If you choose to use another method or compiler than this tutorial will simply help explain the ChadCollins.com Less file structure

Step 2 - Install The Compiler

Step 3 - Configure Compiler Settings

Step 4 - Add Child Theme Less Folder

Step 5 - Select only Master Less File

theme.less is the master less file and is the only file which needs to be compiled. It pulls in all of the options and resources required for the entire theme and outputs them to a single css file(theme.css).

That's it - Make changes and await success message!

All changes made to .less files are automatically detected and recompiled into theme.css. If you do not see a confirmation message please check that the setting in "Step 3" has been turned on.

Child Themes and Inheritance Important

ChadCollins.com uses a Child-Theme based file methodology to organize and structure its files. Many individuals with experience in Wordpress or Drupal may already be familiar with this system. This type of organization focuses on creating a "Parent" or "Base" theme which is responsible for creating nearly every element found in the framework. A "Child" theme is then created which inheritants these Parent base styles.

By using this system the user can make theme edits and changes without ever modifying the themes core, a task solely reserved for the themes author. This ensures theme stability and most importantly seperates the authors work from yours.

Author Updates - Theme Core/"Parent Theme"
User Updates - Child Theme(default-skin) or any other you create

Child Theme - Default Skin

The "default_skin" is a premade Child-Theme we have provided to get you started. It applies all of its own settings, colors, and options to the elements it pulls from the Parent Theme. Creating a new unique theme without ever directly modifying the themes core.

theme/assets/skins/default_skin/less/

- theme.less
- theme-base.less
- theme-settings.less
- theme-variables.less

Directory File	File Overview
theme.less	Themes Master Less file. Pulls in all options and resources required for the entire theme and outputs a single theme.css file. This is the only file which needs to be compiled.
theme-base.less	Responsible for taking set variables and using them to create all of the themes UI elements. Including the grid, buttons, tabs, etc. It handles nearly everything except colors, plugins, and general theme settings.
theme-settings.less	File is responsible for determining what skins are activiated, what plugins are used, and what external resources are pulled. Its primary role is to help quickly reduce the bloat added from unwanted features or skins.
theme-variables.less	This file sets variables which determine the appearance of nearly all theme elements. While theme-base.less creates the elements, it's this file which determines what color, size, and shape they should be.

Optimizing your Child Theme

Many websites will not need every feature, skin, or option that our framework includes. To help minimize bloat, reduce file size, and increase site performance we have included many built-in Less variables and settings. Nearly all of these performance options are found in your child themes theme-settings.less file. Below you will find a listing of Less variables that will help you create a unique theme optimized specifically for your needs

Configure Animations (theme-settings.less)

ChadCollins.com contains a css animation library called Animate.css. ChadCollins.com has broken the library into several smaller peices as its file size is very large when all animations are included. You can help reduce the overall file size of theme.css by setting animation styles you do not need to "false".