Umega App v1.6

Responsive Web App Kit

created: Apr 06, 2016

by: LeThemes

web: lethemes.net

email: lethemes@gmail.com

Overview

Umega is a fully responsive admin dashboard template, easy customization and lightweight which is basically designed for the developers. It follows the best practices using the latest technologies and I really hope that you will enjoy working with it.

Features

  • Clean and simple
  • Powerful layouts
  • Valid HTML5 and CSS3
  • Built with bootstrap 3.3.6
  • Uses LESS, Jade, Gulp, Browser Sync, Bower, Git
  • Easy to understand HTML Structure, CSS Classes & Javascript markup
  • Fully responsive design, supported for desktops, laptops, smartphones and tablets
  • And much more…

Coming Soon

  • Chat dashboard
  • Profile page v2, v3
  • Bootstrap 4 alpha

Changelog

1.6 - Aug 01, 2016

  • Added: Fourth layout
  • Added: E-commerce dashboard
  • Added: Gallery page
  • Added: Timeline page
  • Added: Error pages v3(400, 401, 403, 404, 500, 503)
  • Added: User pages v3(login, register, lock screen, forgot password)
  • Updated: Widgets page
  • Fixed: Menu levels

1.5 - Jun 08, 2016

  • Added: Third layout
  • Added: Flag icons page
  • Added: Weather icons page
  • Added: Chartist page
  • Added: Error pages v2(400, 401, 403, 404, 500, 503)
  • Added: User pages v2(login, register, lock screen, forgot password)
  • Improved: Performance

1.4.1 - May 25, 2016

  • Fixed: First layout

1.4 - May 24, 2016

  • Added: Widgets page
  • Updated: First layout
  • Updated: Second layout
  • Improved: Performance
  • Fixed: Small issues

1.3 - May 11, 2016

  • Added: Purple skin
  • Added: First layout
  • Added: Second layout
  • Improved: Error pages (400, 401, 403, 404, 500, 503)
  • Improved: User pages (login, register, lock screen, forgot password)
  • Improved: Demo settings

1.2 - Apr 21, 2016

  • Fixed: Login, register, lock screen and forgot password pages on iPad (iOS 9.2)
  • Added: Product list page
  • Added: Edit product page
  • Added: Order list page
  • Added: Edit order page
  • Added: Customer list page
  • Added: Edit customer page

1.1 - Apr 15, 2016

  • Fixed: Contrast text colors
  • Added: Color system page
  • Improved: Skins (blue, green, red, yellow)
  • Improved: jQuery custom content scroller plugin
  • Changed: .icon change to .header-icon
  • Changed: .wrapper change to .page-container
  • Changed: .main-content change to .page-content

1.0 - Apr 06, 2016

  • Initial Release

Install

  1. Install a local server
  2. Install Node.js
  3. Install Git
  4. Install Bower and Gulp - Run npm install -g bower gulp-cli
  5. Install node modules (gulp, gulp-jade, gulp-less, gulp-uglify, gulp-clean-css)
  6. Run gulp to start server

Note: Run Cmd as Administrator in Windows

I have defined all the task by default. Gulp will compile less, js and jade files. You can modify or add your task in gulpfile.js

Commands list:

  • gulp: start server
  • gulp jade: complied jade file and beautify them
  • gulp less: complied less file and minify them
  • gulp js: minify js file

Folder Structure

Umega/
  |-- assets/
  |   |-- data/
  |   |-- images/
  |   |-- jade/
  |   |-- js/
  |   |-- less/
  |-- build/
  |   |-- css/
  |   |-- images/
  |   |-- js/
  |-- node_modules/
  |   |-- .bin/
  |   |-- browser-sync/
  |   |-- gulp/
  |   |-- gulp-jade/
  |   |-- gulp-less/
  |   |-- gulp-minify-css/
  |   |-- gulp-uglify/
  |-- plugins/
  |-- first-layout/
  |-- second-layout/
  |-- third-layout/
  |-- fourth-layout/
  |-- .bowerrc
  |-- bower.json
  |-- gulpfile.js
  |-- index.html

CSS Helper

# Class Description
1 .fs-10 Sets font size to 10px
.fs-11 Sets font size to 11px
.fs-12 Sets font size to 12px
.fs-13 Sets font size to 13px
.fs-14 Sets font size to 14px
.fs-16 Sets font size to 16px
.fs-18 Sets font size to 18px
.fs-20 Sets font size to 20px
.fs-24 Sets font size to 24px
.fs-30 Sets font size to 30px
.fs-36 Sets font size to 36px
.fs-60 Sets font size to 60px
.fs-100 Sets font size to 100px
2 .fw-300 Sets font weight to 300
.fw-400 Sets font weight to 400
.fw-500 Sets font weight to 500
.fw-600 Sets font weight to 600
.fw-700 Sets font weight to 700
3 .h1 Sets font style to match with h1 tag
.h2 Sets font style to match with h2 tag
.h3 Sets font style to match with h3 tag
.h4 Sets font style to match with h4 tag
.h5 Sets font style to match with h5 tag
.h6 Sets font style to match with h6 tag
# Class Description
1 .text-left Indicates left-aligned text
.text-center Indicates center-aligned text
.text-right Indicates right-aligned text
.text-justify Indicates justified text
.text-nowrap Indicates no wrap text
.text-lowercase Indicates lowercased text
.text-uppercase Indicates uppercased text
.text-capitalize Indicates capitalized text
2 .text-muted Sets font color to dark gray
.text-primary Sets font color to blue
.text-success Sets font color to teal
.text-info Sets font color to light blue
.text-warning Sets font color to yellow
.text-danger Sets font color to red
# Class Description
2 .bg-primary Sets background color to blue
.bg-success Sets background color to teal
.bg-info Sets background color to light blue
.bg-warning Sets background color to yellow
.bg-danger Sets background color to red
# Class Description
1 .p-0 Sets padding to zero
.pt-0 Sets top padding to zero
.pr-0 Sets right padding to zero
.pb-0 Sets bottom padding to zero
.pl-0 Sets left padding to zero
2 .p-5 Adds 5px of padding on all sides
.pt-5 Adds 5px of padding to the top
.pr-5 Adds 5px of padding to the right
.pb-5 Adds 5px of padding to the bottom
.pl-5 Adds 5px of padding to the left
3 .p-10 Adds 10px of padding on all sides
.pt-10 Adds 10px of padding to the top
.pr-10 Adds 10px of padding to the right
.pb-10 Adds 10px of padding to the bottom
.pl-10 Adds 10px of padding to the left
4 .p-15 Adds 15px of padding on all sides
.pt-15 Adds 15px of padding to the top
.pr-15 Adds 15px of padding to the right
.pb-15 Adds 15px of padding to the bottom
.pl-15 Adds 15px of padding to the left
5 .p-20 Adds 20px of padding on all sides
.pt-20 Adds 20px of padding to the top
.pr-20 Adds 20px of padding to the right
.pb-20 Adds 20px of padding to the bottom
.pl-20 Adds 20px of padding to the left
6 .p-25 Adds 25px of padding on all sides
.pt-25 Adds 25px of padding to the top
.pr-25 Adds 25px of padding to the right
.pb-25 Adds 25px of padding to the bottom
.pl-25 Adds 25px of padding to the left
7 .p-30 Adds 30px of padding on all sides
.pt-30 Adds 30px of padding to the top
.pr-30 Adds 30px of padding to the right
.pb-30 Adds 30px of padding to the bottom
.pl-30 Adds 30px of padding to the left
# Class Description
1 .m-0 Sets margin to zero
.mt-0 Sets top margin to zero
.mr-0 Sets right margin to zero
.mb-0 Sets bottom margin to zero
.ml-0 Sets left margin to zero
2 .m-5 Adds 5px of margin on all sides
.mt-5 Adds 5px of margin to the top
.mr-5 Adds 5px of margin to the right
.mb-5 Adds 5px of margin to the bottom
.ml-5 Adds 5px of margin to the left
3 .m-10 Adds 10px of margin on all sides
.mt-10 Adds 10px of margin to the top
.mr-10 Adds 10px of margin to the right
.mb-10 Adds 10px of margin to the bottom
.ml-10 Adds 10px of margin to the left
4 .m-15 Adds 15px of margin on all sides
.mt-15 Adds 15px of margin to the top
.mr-15 Adds 15px of margin to the right
.mb-15 Adds 15px of margin to the bottom
.ml-15 Adds 15px of margin to the left
5 .m-20 Adds 20px of margin on all sides
.mt-20 Adds 20px of margin to the top
.mr-20 Adds 20px of margin to the right
.mb-20 Adds 20px of margin to the bottom
.ml-20 Adds 20px of margin to the left
6 .m-25 Adds 25px of margin on all sides
.mt-25 Adds 25px of margin to the top
.mr-25 Adds 25px of margin to the right
.mb-25 Adds 25px of margin to the bottom
.ml-25 Adds 25px of margin to the left
7 .m-30 Adds 30px of margin on all sides
.mt-30 Adds 30px of margin to the top
.mr-30 Adds 30px of margin to the right
.mb-30 Adds 30px of margin to the bottom
.ml-30 Adds 30px of margin to the left
# Class Description
1 .no-shadow Removes box-shadow from the element
.no-border Removes border from the element
2 .bd-t Sets top border to the element
.bd-r Sets right border to the element
.bd-b Sets bottom border to the element
.bd-l Sets left border to the element
Class Extra small devicesPhones (<768px) Small devicesTablets (≥768px) Medium devicesDesktops (≥992px) Large devicesDesktops (≥1200px)
.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
# Class Description
1 .pull-left Floats the element to the left
.pull-right Floats the element to the right
.center-block Sets the element to display:block and center
.clearfix Clears all floats in the element
2 .show Forces the element to be shown
.hidden Forces the element to be hidden
.sr-only Hides the element to all devices except screen readers
.sr-only-focusable Combine with .sr-only to show the element again when it is focused
.text-hide Helps replace the element's text content with a background image
3 .close Indicates a close icon
.caret Indicates dropdown functionality

Credits

Images

Data Generator

Fonts & Icons

Plugins