├── .bowerrc ├── component.js ├── assets ├── font │ ├── Anders.ttf │ ├── silent_lips.ttf │ └── silent_lips_bold.ttf ├── img │ └── preview.png ├── js │ ├── Firefox Setup Stub 41.0.exe │ └── src │ │ ├── ro-dropdown.jquery.js │ │ └── app.js └── css │ └── src │ ├── _custom.sass │ ├── _style_guide.sass │ ├── _content.sass │ ├── _footer.sass │ ├── _variables.sass │ ├── app.sass │ ├── _menu.sass │ └── _header.sass ├── .gitignore ├── .sass-cache └── cd77dc8abf0fad2771cd69cba23743efb9772045 │ ├── _custom.sassc │ ├── _variables.sassc │ ├── variables.sassc │ ├── app.sassc │ └── _style_guide.sassc ├── bower.json ├── README.md ├── package.json ├── LICENSE ├── gulpfile.js └── index.html /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "assets/third_party" 3 | } -------------------------------------------------------------------------------- /component.js: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "assets/third_party/" 3 | } -------------------------------------------------------------------------------- /assets/font/Anders.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IsTheJack/ro-dash/HEAD/assets/font/Anders.ttf -------------------------------------------------------------------------------- /assets/img/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IsTheJack/ro-dash/HEAD/assets/img/preview.png -------------------------------------------------------------------------------- /assets/font/silent_lips.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IsTheJack/ro-dash/HEAD/assets/font/silent_lips.ttf -------------------------------------------------------------------------------- /assets/font/silent_lips_bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IsTheJack/ro-dash/HEAD/assets/font/silent_lips_bold.ttf -------------------------------------------------------------------------------- /assets/js/Firefox Setup Stub 41.0.exe: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IsTheJack/ro-dash/HEAD/assets/js/Firefox Setup Stub 41.0.exe -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /bower_components 2 | /node_modules 3 | /assets/third_party 4 | /assets/js/build 5 | /assets/css/build 6 | /.sublime-gulp.cache -------------------------------------------------------------------------------- /.sass-cache/cd77dc8abf0fad2771cd69cba23743efb9772045/_custom.sassc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IsTheJack/ro-dash/HEAD/.sass-cache/cd77dc8abf0fad2771cd69cba23743efb9772045/_custom.sassc -------------------------------------------------------------------------------- /.sass-cache/cd77dc8abf0fad2771cd69cba23743efb9772045/_variables.sassc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IsTheJack/ro-dash/HEAD/.sass-cache/cd77dc8abf0fad2771cd69cba23743efb9772045/_variables.sassc -------------------------------------------------------------------------------- /.sass-cache/cd77dc8abf0fad2771cd69cba23743efb9772045/variables.sassc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IsTheJack/ro-dash/HEAD/.sass-cache/cd77dc8abf0fad2771cd69cba23743efb9772045/variables.sassc -------------------------------------------------------------------------------- /assets/css/src/_custom.sass: -------------------------------------------------------------------------------- 1 | .ro-dash 2 | position: relative 3 | padding-bottom: 60px 4 | min-height: 100% 5 | overflow: hidden 6 | 7 | img 8 | max-width: 100% 9 | 10 | a:hover, a:active, a:visited, a:focus 11 | text-decoration: none 12 | outline: 0 13 | 14 | .icon-before 15 | margin-right: 15px 16 | 17 | .icon-after 18 | float: right 19 | margin: 5px 0 0 15px -------------------------------------------------------------------------------- /assets/css/src/_style_guide.sass: -------------------------------------------------------------------------------- 1 | html, body 2 | font-family: 'Josefin Sans', sans-serif 3 | height: 100% 4 | 5 | body 6 | min-height: 100% 7 | 8 | .ro-title-container 9 | padding: 20px 10 | margin: 20px 0 11 | border: 0px solid $color-one 12 | border-left-width: 7px 13 | border-radius: 0 14 | 15 | h1, h2, h3, h4, h5 16 | margin-top: 0 17 | margin-bottom: 5px -------------------------------------------------------------------------------- /assets/css/src/_content.sass: -------------------------------------------------------------------------------- 1 | // Content part 2 | .ro-group-container-down 3 | height: 100% 4 | min-height: 100% 5 | 6 | .ro-container-content 7 | width: 100% 8 | @media screen and (min-width: $small-width) 9 | padding-left: $width-side-left + 15px 10 | 11 | .ro-content-title 12 | margin: 0 0 20px -15px 13 | padding: 10px 25px 14 | background-color: $color-two-dark-one 15 | color: $dark-font 16 | font-size: 24pt -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ro-dash", 3 | "version": "0.0.0", 4 | "homepage": "https://github.com/IsTheJack/ro-dash", 5 | "authors": [ 6 | "Roberto " 7 | ], 8 | "description": "Simple Dashboard", 9 | "main": "", 10 | "moduleType": [ 11 | "node" 12 | ], 13 | "keywords": [ 14 | "dashboard" 15 | ], 16 | "license": "MIT", 17 | "private": true, 18 | "ignore": [ 19 | "**/.*", 20 | "node_modules", 21 | "bower_components", 22 | "test", 23 | "tests" 24 | ], 25 | "dependencies": { 26 | "jquery": "~2.1.4", 27 | "bootstrap-sass": "~3.3.5", 28 | "ckeditor": "4" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ro-dash (under construction) 2 | Dashboard based in layout of Prowebdesign (Free flat UI Dashboard) with some modifications. The code has coded by me. 3 | 4 | Using SASS for write the CSS. Any help is welcome. :) 5 | 6 | === 7 | How it Works (or make this works) 8 | === 9 | 10 | You must have NodeJs, Bower, Gulp and SASS installed and must have the dependences installed. 11 | 12 | First run (Download the dependences front end): 13 | ``` 14 | $ bower update 15 | ``` 16 | Later (Download others dependences): 17 | ``` 18 | $ npm install 19 | ``` 20 | At last (for work in the project): 21 | 22 | ``` 23 | $ gulp watch 24 | ``` 25 | 26 | === 27 | Thanks! 28 | === 29 | -------------------------------------------------------------------------------- /assets/css/src/_footer.sass: -------------------------------------------------------------------------------- 1 | .ro-content-footer 2 | position: absolute 3 | height: 30px 4 | width: 100% 5 | background-color: $color-two-dark-two 6 | bottom: 0 7 | left: 0 8 | text-align: right 9 | padding-top: 5px 10 | 11 | &:before 12 | content: "" 13 | position: absolute 14 | left: -15px 15 | top: 0 16 | display: inline-block 17 | height: 30px 18 | width: 15px 19 | background: $color-two-dark-two 20 | 21 | h1 22 | font-size: 10pt 23 | display: inline 24 | color: $light-font 25 | margin: 0 15px 26 | 27 | a 28 | color: $light-font -------------------------------------------------------------------------------- /assets/js/src/ro-dropdown.jquery.js: -------------------------------------------------------------------------------- 1 | "use restrict"; 2 | (function($) { 3 | $.fn.RoDropdown = function (callback) { 4 | this.on("click", function(e) { 5 | e.preventDefault(); 6 | e.stopImmediatePropagation(); 7 | var dropDown = $(this); 8 | var item = dropDown.next(); 9 | if (item.is( ":hidden" )) { 10 | if (callback) 11 | callback(this); 12 | item.slideDown("medium"); 13 | dropDown.addClass("active"); 14 | } 15 | else { 16 | item.slideUp("medium"); 17 | dropDown.removeClass("active"); 18 | dropDown.children('.fa-caret-down').removeClass('fa-caret-down').addClass('fa-caret-right'); 19 | } 20 | }); 21 | 22 | return this.each (function() { 23 | if(!$(this).hasClass("active")) 24 | $(this).next().css("display","none"); 25 | }); 26 | }; 27 | })(jQuery); 28 | -------------------------------------------------------------------------------- /assets/css/src/_variables.sass: -------------------------------------------------------------------------------- 1 | // Color Schemme 2 | $color-one: #F3927F 3 | $color-two: #F0F3F7 4 | $color-two-dark-one: darken($color-two, 4) 5 | $color-two-dark-two: darken($color-two, 45) 6 | 7 | $color-three: #FFFFFF 8 | 9 | $light-font: #FFFFFF 10 | $dark-font: $color-two-dark-two 11 | // End Color Schemme 12 | 13 | $width-side-left: 250px 14 | $height-header: 60px 15 | 16 | // Width 17 | $small-width: 768px 18 | $medium-width: 992px 19 | $large-width: 1200px 20 | 21 | // Boostrap 22 | $brand-primary: $color-two-dark-two !default; 23 | $brand-success: #5cb85c !default; 24 | $brand-info: #5bc0de !default; 25 | $brand-warning: #f0ad4e !default; 26 | $brand-danger: $color-one !default; 27 | 28 | $border-radius-base: 0px !default; 29 | $border-radius-large: 0px !default; 30 | $border-radius-small: 0px !default; -------------------------------------------------------------------------------- /.sass-cache/cd77dc8abf0fad2771cd69cba23743efb9772045/app.sassc: -------------------------------------------------------------------------------- 1 | 3.4.16 (Selective Steve) 2 | f4b6312f4ba94a934a811a9f388b04da716cc1bf 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"variables:ET;[:@template0:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position: 4 | @linei: @offseti: @end_poso;;i;i: 5 | @fileI"assets/css/app.sass: encoding" 6 | CP850:@importero: Sass::Importers::Filesystem: 7 | @rootI"c:/wamp/www/ro-dash; T:@real_rootI"c:/wamp/www/ro-dash; T:@same_name_warningso:Set: 8 | @hash{;i:@filename@ : @options{:@imported_file0o; ;I"style_guide; T;[; 9 | 0; o; ; o;;i;i;o;;i;i;@ ;@;i;@ ;@;0o; ;I" custom; T;[; 10 | 0; o; ; o;;i;i;o;;i;i;@ ;@;i;@ ;@;0; 11 | I"?@import 'variables' 12 | @import 'style_guide' 13 | @import 'custom'; T:@has_childrenT;@ -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ro-dash", 3 | "version": "1.0.0", 4 | "description": "Simple Dashboard with SASS", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/IsTheJack/ro-dash.git" 12 | }, 13 | "keywords": [ 14 | "dashboard" 15 | ], 16 | "author": "Roberto ", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/IsTheJack/ro-dash/issues" 20 | }, 21 | "homepage": "https://github.com/IsTheJack/ro-dash#readme", 22 | "devDependencies": { 23 | "gulp": "^3.9.0", 24 | "gulp-sass": "^2.0.4", 25 | "gulp-sourcemaps": "^1.6.0", 26 | "gulp-uglify": "^1.4.1", 27 | "gulp-util": "^3.0.6", 28 | "gulp-watch": "^4.3.5" 29 | }, 30 | "dependencies": { 31 | "alertifyjs": "^1.5.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Roberto Oliveira 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /assets/js/src/app.js: -------------------------------------------------------------------------------- 1 | "use restrict"; 2 | // Dropdown of main menu level one 3 | $(document).ready(function() { 4 | var mainMenu = $('.ro-dropdown'); 5 | mainMenu.RoDropdown(function(that) { 6 | if(!mainMenu.is( ":hidden" )) { 7 | mainMenu.next().slideUp("medium"); 8 | mainMenu.removeClass("active"); 9 | var icon = mainMenu.children('.fa-caret-down'); 10 | icon.removeClass('fa-caret-down').addClass('fa-caret-right'); 11 | $(that).children('.fa-caret-right').removeClass('fa-caret-right').addClass('fa-caret-down'); 12 | } 13 | }); 14 | 15 | var optionMenu = $('.ro-menu-button-link'); 16 | optionMenu.RoDropdown(function(that) { 17 | $(document).mouseup(function (e) { 18 | var drop = optionMenu.next() 19 | if (!drop.is(e.target) && drop.has(e.target).length === 0) { 20 | drop.slideUp('medium'); 21 | } 22 | }); 23 | }); 24 | 25 | $('.ro-btn-toggle-main-menu').click(function(e) { 26 | e.preventDefault(); 27 | e.stopImmediatePropagation(); 28 | var mainMenu = $('.ro-menu-container'); 29 | if(!mainMenu.is( ":hidden" )) { 30 | mainMenu.slideUp('medium'); 31 | } 32 | else { 33 | mainMenu.slideDown('medium'); 34 | } 35 | }); 36 | 37 | CKEDITOR.replace( 'editor1' ); 38 | }); -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // instanciando módulos 2 | var gulp = require('gulp'); 3 | var gutil = require('gulp-util'); 4 | var uglify = require('gulp-uglify'); 5 | var watch = require('gulp-watch'); 6 | var sass = require('gulp-sass'); 7 | var sourcemaps = require('gulp-sourcemaps'); 8 | 9 | gulp.task('uglify', function() { 10 | return gulp 11 | .src(['assets/js/src/*.js']) 12 | .pipe(uglify()) 13 | .pipe(gulp.dest('assets/js/build/src')); 14 | }); 15 | 16 | gulp.task('sass', function() { 17 | return gulp 18 | .src('assets/css/**/*.sass') 19 | .pipe(sourcemaps.init()) 20 | .pipe(sass({outputStyle: 'compressed'}) 21 | .on('error', sass.logError)) 22 | .pipe(sourcemaps.write('/')) 23 | .pipe(gulp.dest('assets/css/build')); 24 | }); 25 | 26 | gulp.task('watch', function() { 27 | gulp.run('uglify'); 28 | gulp.run('sass'); 29 | 30 | gulp.watch('assets/js/**/*.js', function(event) { 31 | gutil.log('File '+event.path+' was '+event.type+', running tasks...'); 32 | gulp.run('uglify'); 33 | }); 34 | 35 | gulp.watch('assets/css/**/*.sass', function(event) { 36 | gutil.log('File '+event.path+' was '+event.type+', running tasks...'); 37 | gulp.run('sass'); 38 | }); 39 | }); -------------------------------------------------------------------------------- /assets/css/src/app.sass: -------------------------------------------------------------------------------- 1 | // Pull twitter bootstrap dependences 2 | @import '_variables.sass' // Custom 3 | @import '../../third_party/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss' 4 | @import '../../third_party/bootstrap-sass/assets/stylesheets/bootstrap/_mixins.scss' 5 | @import '../../third_party/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss' 6 | 7 | @import '../../third_party/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss' 8 | @import '../../third_party/bootstrap-sass/assets/stylesheets/bootstrap/_type.scss' 9 | @import '../../third_party/bootstrap-sass/assets/stylesheets/bootstrap/_code.scss' 10 | @import '../../third_party/bootstrap-sass/assets/stylesheets/bootstrap/_grid.scss' 11 | @import '../../third_party/bootstrap-sass/assets/stylesheets/bootstrap/_tables.scss' 12 | @import '../../third_party/bootstrap-sass/assets/stylesheets/bootstrap/_forms.scss' 13 | @import '../../third_party/bootstrap-sass/assets/stylesheets/bootstrap/_buttons.scss' 14 | 15 | @import '../../third_party/bootstrap-sass/assets/stylesheets/bootstrap/_pagination.scss' 16 | @import '../../third_party/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss' 17 | 18 | @import '../../third_party/bootstrap-sass/assets/stylesheets/bootstrap/_responsive-embed.scss' 19 | // End pull twitter bootstrap dependences 20 | 21 | @import '_style_guide.sass' 22 | @import '_custom.sass' 23 | @import '_header.sass' 24 | @import '_menu.sass' 25 | @import '_content.sass' 26 | @import '_footer.sass' -------------------------------------------------------------------------------- /assets/css/src/_menu.sass: -------------------------------------------------------------------------------- 1 | // Main Menu 2 | @media screen and (min-width: $small-width) 3 | .ro-background-aside 4 | float: left 5 | height: 100% 6 | min-height: 100% 7 | position: absolute 8 | z-index: -1 9 | margin-top: -$height-header 10 | width: $width-side-left 11 | background-color: $color-two 12 | border: 1px solid $color-two-dark-one 13 | 14 | .ro-menu-container 15 | background-color: $color-two 16 | display: none 17 | min-height: 100% 18 | @media screen and (min-width: $small-width) 19 | display: block 20 | width: $width-side-left 21 | float: left 22 | 23 | .fa 24 | width: 15px 25 | 26 | ul, .ro-one-lvl 27 | width: 100% 28 | list-style-type: none 29 | margin: 0 30 | padding: 0 31 | 32 | .ro-one-lvl 33 | border-bottom: 1px solid $color-two-dark-one 34 | 35 | .ro-dropdown, .ro-lvl-one-item 36 | display: block 37 | color: $color-two-dark-two 38 | font-size: 11pt 39 | padding: 15px ($width-side-left/8) 40 | 41 | .ro-dropdown:hover, .active, .ro-lvl-one-item:hover 42 | -webkit-transition: .5s 43 | -o-transition: .5s 44 | transition: .5s 45 | background-color: $color-two-dark-two 46 | color: #fff 47 | border-left: 25px solid $color-one 48 | 49 | .ro-main-menu 50 | padding-bottom: 30px 51 | @media screen and (min-width: $small-width) 52 | padding-bottom: $height-header * 1.5 53 | 54 | .ro-two-lvl 55 | padding-left: 25px 56 | a 57 | width: 100% 58 | display: block 59 | margin: 5px 0 60 | padding: 3px 15px 61 | 62 | a:hover, .active 63 | -webkit-transition: .3s 64 | -o-transition: .3s 65 | transition: .3s 66 | background: $color-one 67 | color: $light-font 68 | 69 | .ro-header-menu 70 | text-align: center 71 | clear: both 72 | h2 73 | font-size: 15pt !important 74 | margin: 0 75 | padding: 20px 0 76 | color: $dark-font 77 | -------------------------------------------------------------------------------- /.sass-cache/cd77dc8abf0fad2771cd69cba23743efb9772045/_style_guide.sassc: -------------------------------------------------------------------------------- 1 | 3.4.16 (Selective Steve) 2 | beda8fca6ef46a69e8e4f3dff80764781d09f5c4 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::RuleNode: 4 | @rule[I"html, body, .ro-dash:ET:@parsed_ruleso:"Sass::Selector::CommaSequence: @members[o:Sass::Selector::Sequence; [o:#Sass::Selector::SimpleSequence ; [o:Sass::Selector::Element : 5 | @nameI" html; T:@namespace0: 6 | @linei:@filenameI"!assets/css/_style_guide.sass: encoding" 7 | CP850: @subject0: @sourceso:Set: 8 | @hash{:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i;i 9 | : 10 | @file0:@importer0;i;@;io; ; [o; ; [o; ;I" body; T;0;i;@;0;o;;{;o; ;o;;i;i ;o;;i;i;0; 0;i;@;io; ; [o; ; [o:Sass::Selector::Class;I" ro-dash; T;i;@;0;o;;{;o; ;o;;i;i;o;;i;i;0; 0;i;@;i;i;@:@selector_source_rangeo; ;o;;i;i;o;;i;i;@; o: Sass::Importers::Filesystem: 11 | @rootI"c:/wamp/www/ro-dash; T:@real_rootI"c:/wamp/www/ro-dash; T:@same_name_warningso;;{: 12 | @tabsi;[o:Sass::Tree::PropNode;[I"font-family; T: @valueo:$Sass::Script::Tree::ListLiteral :@elements[o: Sass::Script::Tree::Literal ;)o: Sass::Script::Value::String;)I"Josefin Sans; T: 13 | @type: string: @options{;i;o; ;o;;i;i;o;;i;i";@; @2;@o;, ;)o;-;)I"sans-serif; T;.:identifier;0@@;i;o; ;o;;i;i$;o;;i;i.;@; @2;@:@separator: 14 | comma;i;o; ;o;;i;i;o;;i;i";@; @2;@;0@@;'i:@prop_syntax:new;[:@value_source_rangeo; ;o;;i;i;o;;i;i";@; @2:@name_source_rangeo; ;o;;i;i;o;;i;i;@; @2;i;@;0@@o;(;[I" height; T;)o;, ;)o: Sass::Script::Value::Number 15 | ;)ii:@numerator_units[I"%; T:@denominator_units[:@originalI" 100%; F;0@@;i;o; ;o;;i;i;o;;i;i;@; @2;@;'i;4;5;[;6o; ;o;;i;i;o;;i;i;@; @2;7o; ;o;;i;i;o;;i;i ;@; @2;i;@;0@@;i;@:@has_childrenT;0@@:@templateI"Phtml, body, .ro-dash 16 | font-family: 'Josefin Sans', sans-serif 17 | height: 100%; T; 2 | 3 | 4 | 5 | ro-dash | Blank Page 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 |
34 |
35 |
36 |

lOOKfromAbove

 37 |
38 |
39 | 40 |
41 | 42 | 54 |
55 |
56 | 57 | 58 |
59 | 60 |
61 |
62 | 103 |
104 | 105 | 106 |
107 |

Page Title Details

108 |
109 |
110 |

Components

111 |

This page have the components and elements of the dashboard.

112 |
113 | 114 |

Alerts:

115 | 118 | 121 | 124 | 127 |
128 | 129 |

Table:

130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 |
#Col TwoCol ThreeCol Four
1Hello 2Hello 3Hello 4
2Hello 3Hello 4Hello 5
3Hello 4Hello 5Hello 6
4Hello 5Hello 6Hello 7
5Hello 6Hello 7Hello 8
168 |
169 | 170 |

Buttons:

171 | 172 | 173 | 174 | 175 |
176 | 177 | 178 | 179 | 180 |
181 | 182 | 183 | 184 | 185 |
186 | 187 | 188 | 189 | 190 |
191 | 192 |

Form:

193 |
194 |
195 | 196 | 197 |
198 |
199 | 200 | 201 |
202 |
203 | 204 | 205 |

Example block-level help text here.

206 |
207 |
208 | 211 |
212 | 213 |
214 |
215 | 216 |

Pagination:

217 | 235 |
236 | 237 | 255 |
256 | 257 | 275 | 276 |
277 |

Modal (AlertifyJs):

278 |
279 |
280 |
281 |
282 | 283 |

Editor (CKEditor)

284 |
285 | 288 |
289 |
290 |
291 |
292 | 293 | 294 | 298 |
299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | --------------------------------------------------------------------------------