Introduction

Urban is a premium bootstrap 3 web application angularJS/HTML admin UI kit. With a myriad of different layouts, pre-built sidebar and header skins, angularJS and HTML versions, Grunt and Bower build processes and a host of other options, Urban gives you what you need to get started with bulding your next web application, CRM, CMS, admin or dashboard based project.

If you have any questions that are beyond the scope of this help file, please feel free to get in touch.

Support requests can go through the form on my ThemeForest profile page or via email hello@nyasha.me

Support for my items includes:

  • Responding to questions or problems regarding the item and its features
  • Fixing bugs and reported issues
  • Providing updates to ensure compatibility with new software versions

Item support does not include:

  • Customization and installation services
  • Support for third party software and plug-ins
What's included

The download package includes javaScript, font assets, img assets, json data files as well as source Less files.

Folder structure
admin/
    │   ├── angular/
    └── └── html/

Files under the bower_components and vendor folders have not been modified which should make updating components and plugins relatively easy.

A list of all third party resources can be found at the bottom of this help file. These are not covered in this documentation but instead you can heard on over to each respective plugin's homepage to discover how you can use each resource with Urban admin UI Kit. The docs are comprehensive and they include everything to help you get started.

CLI

Urban is scaffold from yeoman generator-angular for the angular version and generator-webapp for the HTML version and thus relies on Grunt and Bower tools. See more

What is grunt?

Grunt is the build system used to build, preview and test your project.

What is bower?

Bower is a package manager is used for dependency management, so that you no longer have to manually download and manage your scripts.

Installing requirements

In order to get started with Urban you need to install the following on your development computer..

  • Node.js and NPM. You can download Node.js from here https://nodejs.org/download/. Npm comes bundled with Node.js
  • Also install bower and grunt-cli using this command npm install --global bower grunt-cli
  • You'll also need to run npm install and bower install from the root of your project to install all the necessary dependencies.

Once you have all tools and dependencies installed you can use these commands for your project:

  • grunt serve - launches a localhost preview of your app (with Livereload)
  • grunt or grunt build - build an optimized, production-ready version of your app.
Layout Options

Add the following css classes to <div class="app"> to get different layouts

  • .layout-small-menu - collapses sidebar panel.
  • .layout-chat-open - opens chat panel.
  • .layout-fixed-header - main panel header is fixed on top.
  • .layout-boxed - activates boxed layout.
  • .layout-static-sidebar - static sidebar panel that scrolls with the rest of the page.
  • .layout-right-sidebar - sidebar panel on the right.
  • .layout-fixed-footer - main panel footer fixed at the bottom.
Toggle API (HTML version only)
Small sidebar panel toggle

Use data-toggle="layout-small-menu" to toggle small sidebar state on click e.g:

          <a href="javascript:;" data-toggle="layout-small-menu"></a>
Chat panel toggle

Use data-toggle="layout-chat-open" to toggle chat panel.

          <a href="javascript:;" data-toggle="layout-chat-open"></a>
Offscreen menu (Small viewport only)

Use data-toggle="offscreen" to toggle the offscreen navigation. If you want to reveal the right sidebar navigation then use with data-move="rtl".

Note: Offscreen layout should be wrapped in either .offscreen-left for left positioned sidebar or .offscreen-right for right positioned.

Animation API (HTML version only)

Animate elements as they appear in the viewport by using these attributes:

          <div class="status bg-primary text-white" data-animation="rubberBand" data-delay="20"></div>

Animate numbers counting up as well. Use the .count class along with these attributes

          <div class="count" data-from="0" data-to="897" data-speed="1000" data-refresh-interval="25"></div>
  • data-from the number to start counting from
  • data-to the number to stop counting at
  • data-speed the number of milliseconds it should take to finish counting
  • data-refresh-interval the number of milliseconds to wait between refreshing the counter

Use the data-percent attribute to animate bootstrap's progress bars

          <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" data-percent="20">
    </div>
    </div>
Colors
Contextual backgrounds

Default contextual backgrounds have been restyled and complemented with light and dark shades

.bg-default-dark
.bg-default
.bg-default-light
.bg-primary-dark
.bg-primary
.bg-primary-light
.bg-warning-dark
.bg-warning
.bg-warning-light
.bg-success-dark
.bg-success
.bg-success-light
.bg-info-dark
.bg-info
.bg-info-light
.bg-danger-dark
.bg-danger
.bg-danger-light
.bg-dark-dark
.bg-dark
.bg-dark-light

The following extra contextual colors based on the material palette have also been added

.bg-red
.bg-pink
.bg-purple
.bg-deeppurple
.bg-indigo
.bg-blue
.bg-lightblue
.bg-cyan
.bg-teal
.bg-green
.bg-lightgreen
.bg-lime
.bg-yellow
.bg-amber
.bg-orange
.bg-deeporange
.bg-brown
.bg-grey
.bg-bluegrey

You can also generate your own background colors in less by using the following mixin:

.bg-brown {
    .bg-variant(#795548);
    }
    .bg-brown-dark {
    .bg-variant(darken(#795548, 2%));
    }
    .bg-brown-light {
    .bg-variant(lighten(#795548, 2%));
    }
Slider colors

Use these classes with Urban's jquery ui slider

.slider-info .slider-primary .slider-success .slider-warning .slider-danger
Fullcalendar event colors

Use these classes with fullcalendar plugin

.event-default .event-info .event-primary .event-success .event-warning .event-danger
Border colors
.border-default .border-info .border-primary .border-success .border-warning .border-danger .border-white
Skinning

sidebar skin mixin

.sidebar-variant(@background;@color;@hover-active-color;@brand-background;@brand-color;)

Header skin mixin

.header-variant(@background;@hover-active-background;@color;@hover-active-color)
Helper classes

These are the available helper classes

Borders
  • .no-border remove all borders
  • .bordered border on all 4 sides
  • .bl left border
  • .br right border
  • .bt top border
  • .bb bottom border
  • .bt0 border-top: 0
  • .br0 border-right: 0
  • .bt0 border-top: 0
  • .bb0 border-bottom: 0
Border radius based on @border-radius-base
  • .no-radius remove border radius
  • .round 4 corner border-radius
  • .brtl top left border radius
  • .brtr top right border radius
  • .blbl bottom left border radius
  • .brbr bottom right border radius
Overflow
  • .overflow-hidden overflow hidden
  • .overflow-visible overflow visible
  • .overflow-auto overflow auto
Fixed widths
  • .w100 width 100px
  • .w150 width 150px
  • .w200 width 200px
  • .w250 width 250px
  • .w300 width 300px
  • .w350 width 350px
  • .w400 width 400px
  • .w450 width 450px
  • .w500 width 500px
Positioning
  • .relative position: relative
  • .absolute position: absolute
  • .lt left: 0
  • .rt right: 0
  • .bt bottom: 0
  • .tp top: 0
Other
  • .no-padding remove padding
  • .no-margin remove margin
  • .no-bg transparent background
  • .no-shadow remove box shadows
  • .shadow add a subtle box shadow
  • .text-shadow add a subtle text shadow
  • .block display block
Margins and paddings
Use this guide to determine what each class means

p = padding
m = margin
t = top
b = bottom
r = right
l = left
Sizing
0,2,5,10,15,20,25,30

.pt25 would be padding-top: 25px;

.m5 would be margin: 5px;

Margins
Class Description
.mn -15px margin left and right
.mrn -15px margin right
.mln -15px margin left
.m30 30px margin
.mr30 30px right margin
.mb30 30px bottom margin
.ml30 30px left margin
.mt30 30px top margin
.m25 25px margin
.mr25 25px right margin
.mb25 25px bottom margin
.ml25 25px left margin
.mt25 25px top margin
.m20 20px margin
.mr20 20px right margin
.mb20 20px bottom margin
.ml20 20px left margin
.mt20 20px top margin
.m15 15px margin
.mr15 15px right margin
.mb15 15px bottom margin
.ml15 15px left margin
.mt15 15px top margin
.m10 10px margin
.mr10 10px right margin
.mb10 10px bottom margin
.ml10 10px left margin
.mt10 10px top margin
.m5 5px margin
.mr5 5px right margin
.mb5 5px bottom margin
.ml5 5px left margin
.mt5 5px top margin
.m2 2px margin
.mr2 2px right margin
.mb2 2px bottom margin
.ml2 2px left margin
.mt2 2px top margin
.m0 0px margin
.mr0 0px right margin
.mb0 0px bottom margin
.ml0 0px left margin
.mt0 0px top margin
Paddings
Class Description
.p30 30px padding
.pr30 30px right padding
.pb30 30px bottom padding
.pl30 30px left padding
.pt30 30px top padding
.p25 25px padding
.pr25 25px right padding
.pb25 25px bottom padding
.pl25 25px left padding
.pt25 25px top padding
.p20 20px padding
.pr20 20px right padding
.pb20 20px bottom padding
.pl20 20px left padding
.pt20 20px top padding
.p15 15px padding
.pr15 15px right padding
.pb15 15px bottom padding
.pl15 15px left padding
.pt15 15px top padding
.p10 10px padding
.pr10 10px right padding
.pb10 10px bottom padding
.pl10 10px left padding
.pt10 10px top padding
.p5 5px padding
.pr5 5px right padding
.pb5 5px bottom padding
.pl5 5px left padding
.pt5 5px top padding
.p2 2px padding
.pr2 2px right padding
.pb2 2px bottom padding
.pl2 2px left padding
.pt2 2px top padding
.p0 0px padding
.pr0 0px right padding
.pb0 0px bottom padding
.pl0 0px left padding
.pt0 0px top padding
Directives
third party directives
angles Chart.js angularjs directive
file upload Angularjs drag and drop file upload
angular-flot An Angular directive to wrap Flotcharts.
angular-nvd3 An AngularJS directive for NVD3.js reusable charting library (based on D3.js)
angular-summernote AngularJS directive to Summernote
ngSweetAlert AngularJS wrapper for SweetAlert
angular-ui-calendar A complete AngularJS directive for the Arshaw FullCalendar.
angular-ui-map A complete AngularJS directive for the google maps.
angular-xeditable Edit in place for AngularJS
Custom directives
directives/anchor-scroll.js scroll to id directive
directives/c3.js C3 charts directive
directives/chosen.js chosen select directive alternative to ui-jq
directives/navigation.js Main sidebar navigation directive
directives/offscreen.js Off canvas sidebar directive
directives/panel-control-collapse.js panel toolbar collapse directive
directives/panel-control-refresh.js panel toolbar refresh directive
directives/panel-control-remove.js panel toolbar remove directive
directives/preloader.js loading indicator directive
directives/quick-launch.js quick launch panel directive
directives/rickshaw.js rickshaw charts directive
directives/scrollup.js Scroll to top of page directive
directives/vector.js jvectormap directive
Credits // Link to third party resources and docs

The following is a list of resources, plugins and other assets used in creating this template. Follow the links for more information on how you can use them.

Core
Angular
Fonts
Tables
Charts
Forms
Pickers
Editors
Maps
Lists
Other

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes/templates on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section

Changelog

Initial release