Sing App is next-generation, carefully hand-coded and powerful front-end template. It can be used for designing either your next web application or admin entrance for it.
It's based on the Bootstrap front-end framework which uses 12-column responsive grid layout.
Sing App includes three versions: Ajax - which is built using asynchronous page loading, Angular version - which is built on top of Angular JS front-end framework and its extension UI Bootstrap and brand new Angular 2.0 version built on top of Angular 2.0 Final Release.
Since 2.0.0 update Angular version has been fully automated; you only need to run a bunch of commands to have application set up and running. Here is the list:
Make sure you have node installed;
Then open a terminal (console) and navigate to your project folder cd path/to/project;
Install required libraries: gulp (for automation)
and bower (for front end package management): npm install -g bower gulp;
Run npm install to install node dependencies defined in package.json;
Run bower install to install bower dependencies defined in bower.json;
Run gulp serve to run a tiny web server that will serve files from the project directory (sass, js and html files will be being watched
for changes by gulp so you don't need to trigger any command when you change your code - browser refresh will occur automatically);
Open http://localhost:3000/ in your browser to access the app.
That's it! Enjoy.
For a deeper dive, there are also other gulp tasks which automate common routines:
gulp build - 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;
gulp clean - cleans dist and .tmp folders. Run when it
becomes too messy;
gulp serve:dist - same as gulp serve, but serves files from dist folder. Useful when testing production code.
Same instructions are applied for angular-seed version.
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 2.0 Final seed readme.md.
Run npm install to install node dependencies defined in package.json;
Run bower install to install bower dependencies defined in bower.json;
Run gulp styles to create css file
There are two more versions of Sing App included into the package: angular seed version and angular 2 seed version. Both seed versions are intended to be used when you want to build a project from scratch and do not want to have all libraries enabled in Sing App demo to be included in your project be default. So, in short, it's a same Sing App 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.
Sing App package goes with the following folders:
Next folders are not essential and can be removed from package:
Since 2.0.0 update Angular version has been heavily rewritten using latest industry best-practices of building and organizing Angular web applications. All of the application logic is separated into isolated modules, which allows to easily maintain and scale the application
Sing App Angular version goes with the following folders:
module-name.js file with
module logic, module-name.module.js file with module dependencies/initialization and one or more module.html files
for module templating. The structure is based on angular-dashboard-seed;Since maintaining front-end libraries is getting more and more complicated we use Bower to manage Sing 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 vendor folder.
There is also a bower.json file where all libraries are put. Check it out for complete list of
libs used in Sing. Libs that go after 23 line ("awesome-bootstrap-checkbox": "~0.3.5")
are not required and may be removed. They are used only for demos.
This part does not apply for angular version. All of angular version automation is done using gulp. Please read running section.
Sing 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 gulp-sass 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.
custom-libs-overridescss - 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).
global-transitions.scss - link & button global transitions.
libs-override.scss - core libs (Font Awesome, Bootstrap select) overrides.
mixins.scss - Sing 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.
To compile scss files into css you need to execute the following command:
gulp stylesThis assumes that you have bower & gulp installed npm install -g bower gulp.
For development you can use gulp watch command; it will track changes in scss folder and automatically recompile application.css and application.min.css files.
Sing App 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;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.
Left sidebar is a main navigation panel of Sing App. There are two states of sidebar: collapsing - sidebar automatically collapses when mouse leaves it; and static - sidebar stays always stays open. The state may be changed by pressing collapse button on the top just next to sidebar.
Sidebar states make sense only for wide screens (991px+). For smaller screen sidebar only state is collapsing - sidebar has to be open manually. For even smaller screens (768px-) sidebar is always hidden and can be turned on only by pressing sidebar collapse button.
Sub level navigations are built with Bootstrap's collapse component
Top Navigation Bar is a styled Bootstrap's navbar. There is a notifications dropdown which is a good way to display recent events.
For mobile screens notifications dropdown goes to inside of sidebar, so it's visible for mobile devices too.
Right Sidebar Chat is a modern admin template extension which allows you to stay always online with your contacts. Just wire it up with your backend contacts management system. In case you don't need it this layout may be removed.
There is a angular module we use for routing in Sing App called Angular UI Router. It is more expendable then the default one provided with angular framework. The idea is that your app has states instead of usual urls.
All Sing App states are described in app.js.
You will find this directive in many places in Sing Angular App. It's called jQuery Passthrough and used to simply initiate any jQuery plugin on any element like that:
<textarea data-ui-jq="autosize" data-ui-options='{append: "\n"}'></textarea>Which is an equivalent of:
$('textarea').autosize({append: "\n"})Allows to execute a built-in Sing Angular action when clicked on element. For example to collapse navigation add this directive to any element:
<a data-sn-action='toggle-navigation-collapse-state'>Toggle Navigation</a>Essential Sing Angular directive which binds and initializes all required callbacks and functions to make navigation function appropriately
Enables chat logic for right sidebar. Currently it is just a wrapper for simple code written in jQuery style.
Animates angular's progressbar directive on initial load. Just add it to progressbar like that:
<div data-progressbar data-sn-progress-animate data-value="60" class="progress-sm bg-white"></div>Allows to load any html document into existing element on the page. For example in this case some.html will be loaded into #target div:
<a data-ajax-load="some.html" data-ajax-target="#target">Load</a>
<div id="target"></div>Built with jQuery Mapael. Statistics on th right side a made with Bootstrap's progress bar.
Market Stats widget contains a realtime chart built with Rickshaw.
Built with Bootstrap Calendar.
For upgrade instructions please check changelog.md.
npm install fix for unix systemsgulp build task (Angular version)npm install fix (node-sass)