Light Blue Admin Template is next-generation, well-designed and powerful front-end template. It's very useful for designing either your next web application or admin entrance for it.
It's based on super powerful Bootstrap front-end framework which uses 12-column responsive grid layout.
Tl;dr - go to ../html-transparent/dist folder (../html-white/dist folder if you prefer Transparent Dark version or ../html-white/dist folder if you prefer White version) to check the most default html/css-only version of Light Blue. The stuff below is for compiling different variations of Light Blue from sass/handlebars sources.
For React JS Full version please refer to React JS Section of this documentation.
For Angular 5.0 Full version please refer to Angular 5.0 Section of this documentation.
Since version 3.0.0 Light Blue template depends on Grunt Task runner to build an application version. So Light Blue root folder contains only setting & build files. Here is the structure:
Every version (as of 3.3.0 there are html-transparent-light, html-transparent-dark and html-white) goes with the following folders (except angular 5.0 version):
Since maintaining front-end libraries is getting more and more complicated we use Bower to manage Light Blue dependencies. Bower is a front-end package management system which allows you to easely install required packages. Installing Bootstrap (for instance) becomes really simple:
bower install bootstrapAbove command installs bootstrap framework from https://github.com/twbs/bootstrap directly into the bower_components folder.
There is also a bower.json file where all libraries are put. Check it out for complete list of libs used in Light Blue.
Light Blue uses scss to generate css. This choice has been made because of significant boost scss gives when developing front-end apps like this one. We used compass to compile scss to css, but what to use is absolutely up to your choice. Anyway editing css is a good old way, right? :)
The main scss file is application.scss. It includes all libraries and partial files.
base.scss - core application styles. Layout, sidebar, right chat, basic widget layout styles are here.
bootstrap-override.scss - there are situations when just changing bootstrap sass variable is not enough - we need to override something manually. This is the place for such overrides.
override-custom-libs.scss - same but for custom not essential libs (datepickers, calendar). This file can be removed.
font.scss - downloaded version of Open Sans font.
general.scss - all application styles. Only tag-selector styles
(body, a, h2, etc).
override-libs.scss - core libs (Font Awesome, Bootstrap select) overrides.
mixins.scss - Light Blue sass mixins. Use when needed.
print.scss - yep, print styles. Disables parts of layout when printing.
utils.scss - utilities classes. Mostly so-called property classes (margins, borders, etc).
variables.scss - all template variables like colors, button sizes, etc.
widgets.scss - custom widgets classes (email widget, charts, etc). This file can be removed.
In order to build a package you need to be familiar with Grunt Task runner and have it installed. Before building a package we need to make sure that all required npm libraries (and npm itself) are installed:
$> npm install -g grunt-cli
$> npm install
$> bower installAfter that all you need to do is to run:
$> grunt --env=development --target=html-transparentThis will compile handlebars templates and sass files into html and css accordingly and put them into a html-transparent/dist folder. Options that may be passed to grunt are:
There are also other Grunt tasks available. Check Gruntfile.js for a list of them. The most important one would be
grunt dist-watch, that you may want to use during developement. It will watch for changes in a src folder and recompile
dist if necessary.
Since version 3.0.0 Light Blue template uses Handlebars to compile html from handlebars sources.
Most handlebars views are files placed into a src folder. All views extend layout.hbs that exists in a folder named partials.
Compiling handlebars layouts into an html is done by a special lib called grunt-handlebars-layouts.
Light Blue uses jquery-pjax library that uses ajax and pushState which makes page loading super fast.
In case you want to turn off ajax page loading you need to just set window.PJAX_ENABLED
variable to false (js/app.js file):
window.PJAX_ENABLED = false;Install Yarn package + Node.js v6.5 or newer
Run yarn install to install node dependencies defined in package.json.
Run yarn start to run the project
Now you can open your web app in a browser http://localhost:3001/, on mobile devices and start hacking. Whenever you modify any of the source files inside the `/src` folder, the module bundler ([Webpack](http://webpack.github.io/)) will recompile the app on the fly and refresh all the connected browsers.
There are also other yarn tasks:
yarn run build - builds a production version of the application. All html/css/js code is
minified and put to build folder. The contents of this folder you will want to put
to your production server when publising the application;
yarn run lint - checks your code files for javascript & scss errors.
For more instruction please refer to React JS Seed readme.md.
Windows 10 users need to install Visual C++ Build Tools,
choose Custom Install, and select both Windows 8.1 and Windows 10 SDKs.
Python 2.7 is also required. For an extensive description on how to solve node-gyp problems please read though this
thread on github.
Run npm install to install node dependencies defined in package.json and to install typings defined in typings.json
Run npm start to run the project
There are also other npm tasks:
npm run build:prod - builds a production version of the application. All html/css/js code is
minified and put to dist folder. The contents of this folder you will want to put
to your production server when publising the application;
npm run lint - checks your code in .ts files for typescript errors
For more instruction please refer to angular 5.0 readme.md.
There are two more versions of Light Blue included into the package angular 5 seed version and react js seed version. They are intended to be used when you want to build a project from scratch and do not want to have all libraries enabled in Light Blue demo to be included in your project be default. So, in short, it's a same Light Blue angular version but containing only essential functionality. You don't need to throw anything out of it; it is ready to be a "seed" for your project - just start to add your code.
Angular applications are made up of components. A component is the combination of an HTML template and a component class that controls a portion of the screen. Here is an example of a component that displays a current date:
Create directory current-date in ./src/app path
Create current-date.component.ts, current-date.template.html, current-date.style.scss, current-date.service.ts and current-date.module.ts files
import { Component } from '@angular/core';
import { CurrentDateService } from './current-date.service.ts';
@Component({
selector: 'current-date', <-- template selector (as tag name)
templateUrl: './current-date.template.html', <-- link to your custom widget template
styleUrls: ['./current-date.style.scss'] <-- links to your custom styles
})
export class CurrentDateComponent {
name = 'Get Date Widget on Light Blue';
currentDate: string;
constructor(public currentDateService: currentDateService) {}
getDate() {
currentDateService.getDate();
}
}<h1 class="header">This is a {{name}}</h1>
<button class="date-btn" (click)="getDate()">Get Date</button>.header {
color: #rgba(232, 122, 10, .5)
}
.date-btn {
background: #44dd55;
}import { Injectable } from '@angular/core';
@Injectable()
export class CurrentDateService {
public getDate(): void {
let date = new Date();
console.log(date);
}
}import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { CurrentDateComponent } from './current-date.component';
import { CurrentDateService } from './current-date.service';
export const routes = [
{ path: '', component: CurrentDateComponent, pathMatch: 'full' }
];
@NgModule({
imports: [ CommonModule, RouterModule.forChild(routes) ],
declarations: [ WidgetComponent ],
providers: [ CurrentDateService ]
})
export class CurrentDateModule {
static routes = routes;
}
./src/app/layout/layout.routes.ts; Add to the routes object next code: { path: 'current-date', loadChildren: '../current-date/current-date.module#CurrentDateModule' }If you have any questions or problems when installing template feel free to contact us via email - contact@flatlogic.com. We will provide as much help as possible.
See statistics section.
Left sidebar is based on Bootstrap's collapse component. Settings.js holds additional javascript code which is used to change sidebar state and sidebar position depending on chosen option (icons, auto) and (left, right).
Is simple Bootstrap's Navbar. User profile and settings popovers are implemented via Bootstrap's popover
Each widget may have widget controls. See Widgets.
Charts are built with D3.js-based nvd3 library. Read more in charts section