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
- Install a local server
- Install Node.js
- Install Git
- Install Bower and Gulp - Run
npm install -g bower gulp-cli
- Install node modules (gulp, gulp-jade, gulp-less, gulp-uglify, gulp-clean-css)
- 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
- Animo.js
- BlockUI
- Bootstrap Color Picker Sliders
- Bootstrap Date Range Picker
- Bootstrap Dual Listbox
- Bootstrap File Input
- Bootstrap FileStyle
- Bootstrap Markdown
- Bootstrap Maxlength
- Bootstrap Context Menu
- Bootstrap Progressbar
- Bootstrap Select
- Bootstrap SweetAlert
- Bootstrap Tags Input
- Bootstrap TouchSpin
- Bootstrap Wysiwyg
- CKEditor
- Chart.js
- Clockface
- ClockPicker
- Code Mirror
- Counter-Up
- Cropper
- DataTables
- DropzoneJS
- Bootstrap Datetime Picker
- Flot
- FullCalendar
- Geocomplete
- JQuery Advanced News Ticker
- jQuery Easy Pie Chart
- jQuery MultiLanguage Keyboard
- jQuery Steps
- jQuery MiniColors
- jQuery Mousewheel
- jQuery Sparklines
- jQuery UI
- jQuery Validation
- jQuery Cookie
- Ladda UI
- Malihu Custom Scrollbar
- Mocha
- Morris.js
- Owl Carousel
- Responsive Pagination
- Spinkit
- Summernote
- Toastr
- PACE
- Waypoints
- Code Prettify
- Pricing Tables