├── pages ├── 404.html ├── charts.html ├── todo.html ├── elements-input.html ├── elements-buttons.html └── dashboard.html ├── images ├── dog.png └── user.jpg ├── app ├── init.js ├── menu.js ├── route.js └── main.js ├── README.md ├── bower.json ├── styles.css └── index.html /pages/404.html: -------------------------------------------------------------------------------- 1 |
2 | 404
3 | Not Found 4 |
-------------------------------------------------------------------------------- /images/dog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vikasprogrammer/mdlAdmin-lite/HEAD/images/dog.png -------------------------------------------------------------------------------- /images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vikasprogrammer/mdlAdmin-lite/HEAD/images/user.jpg -------------------------------------------------------------------------------- /app/init.js: -------------------------------------------------------------------------------- 1 | //Heart of the app. 2 | 3 | $(document).ready(function() { 4 | 5 | 6 | //init the side menu 7 | initSideMenu(); 8 | 9 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # mdlAdmin-lite 2 | Free Starter Admin Template built on Google Material Design Lite 3 | 4 | This theme was built on top of [http://www.getmdl.io/templates/dashboard/index.html](http://www.getmdl.io/templates/dashboard/index.html) 5 | 6 | ### Features 7 | - Built using latest Google's MDL library - [https://getmdl.io](https://getmdl.io). 8 | - Dynamic content loading 9 | - Dynamic urls (using Grapnel) 10 | - Multi Level Menus 11 | - Google Material Charts 12 | - jQuery Ready 13 | 14 | 15 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mdladmin-lite", 3 | "version": "1.0", 4 | "authors": [ 5 | "Vikas Singhal " 6 | ], 7 | "description": "Starter Admin Template build on Google Material Design Lite", 8 | "license": "MIT", 9 | "ignore": [ 10 | "**/.*", 11 | "node_modules", 12 | "bower_components", 13 | "test", 14 | "tests" 15 | ], 16 | "dependencies": { 17 | "material-design-lite": "~1.0.0", 18 | "jquery": "~2.1.4", 19 | "grapnel": "~0.5.8" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /app/menu.js: -------------------------------------------------------------------------------- 1 | /* Functions related to side menu */ 2 | 3 | function initSideMenu () { 4 | 5 | // $('nav-item > sub-nav').parent().children('a').addClass('float-left') 6 | // $('nav-item > sub-nav').parent().children('a').after('keyboard_arrow_right'); 7 | 8 | $('nav-item > a').click(function(e) { 9 | //reset 10 | $('nav-item').removeClass('active'); 11 | $('sub-nav').removeClass('show'); 12 | $('sub-nav-item').removeClass('active'); 13 | 14 | // console.log($(e.target).attr('href')); 15 | if($(e.target).attr('href') != undefined) 16 | $(e.target).parent().addClass('active'); 17 | 18 | //handle submenu 19 | var siblings = $(e.target).siblings('sub-nav'); 20 | 21 | if(siblings.length) { 22 | var subnav = siblings[0]; 23 | $('sub-nav').not(subnav).removeClass('show'); 24 | $(subnav).toggleClass('show'); 25 | } 26 | }) 27 | 28 | 29 | $('sub-nav-item').click(function(e){ 30 | //reset 31 | $('sub-nav-item').removeClass('active'); 32 | 33 | 34 | $(e.target).addClass('active'); 35 | }) 36 | } -------------------------------------------------------------------------------- /pages/charts.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Google Material Design Charts, Sample #1

5 |
6 |
7 |
8 |
9 |
10 | 11 | See More 12 | 13 |
14 | 15 |
16 |
17 |
18 |

Google Material Design Charts, Sample #2

19 |
20 |
21 |
22 |
23 |
24 | 25 | See More 26 | 27 |
28 | 29 |
30 | 31 | 32 |
-------------------------------------------------------------------------------- /app/route.js: -------------------------------------------------------------------------------- 1 | //setting up routes using Grapnel Library. 2 | 3 | var routes = { 4 | '/' : function(req, e){ 5 | mdlAdmin.initActive('#/'); 6 | mdlAdmin.loadContent('pages/dashboard.html'); 7 | mdlAdmin.setTitle('Dashboard'); 8 | }, 9 | '/todo' : function(req, e){ 10 | mdlAdmin.initActive('#/todo'); 11 | mdlAdmin.loadContent('pages/todo.html'); 12 | mdlAdmin.setTitle('Todo'); 13 | }, 14 | '/charts' : function(req, e){ 15 | mdlAdmin.initActive('#/charts'); 16 | 17 | mdlAdmin.loadContent('pages/charts.html', function() { 18 | // alert(1); 19 | mdlAdmin.loadCharts(); 20 | }); 21 | mdlAdmin.setTitle('Charts'); 22 | }, 23 | '/elements/:type' : function(req, e){ 24 | 25 | var element_type = req.params.type; 26 | mdlAdmin.initActive('#/elements/' + req.params.type); 27 | mdlAdmin.loadContent('pages/elements-' + element_type + '.html'); 28 | mdlAdmin.setTitle('Elements', element_type); 29 | 30 | }, 31 | '/*' : function(req, e){ 32 | if(!e.parent()){ 33 | // Handle 404 34 | mdlAdmin.setTitle('Not Found'); 35 | mdlAdmin.loadContent('pages/404.html'); 36 | } 37 | } 38 | } 39 | 40 | 41 | 42 | 43 | var router = Grapnel.listen({ pushState : false }, routes); -------------------------------------------------------------------------------- /pages/todo.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Todo App

5 |
6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
TaskDue Date
Buy Milk12 July 2015
Reboot Server20 July 2015
Learn MDL31 August 2015
30 |
31 |
32 |
33 |
34 | 35 | 36 |
37 |
38 | 39 | 40 |
41 | 42 | Add 43 | 44 | 45 |
46 |
47 | 50 |
51 |
52 |
-------------------------------------------------------------------------------- /pages/elements-input.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 | Simple 6 | Floating 7 | Multiline 8 |
9 | 10 |
11 | 12 |
13 |
14 | 15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 | 23 | Input is not a number! 24 |
25 |
26 | 27 |
28 |
29 | 30 | 31 | 32 |
33 |
34 | 35 | 36 |
37 |
38 | 39 |
40 |
41 | 42 | 43 | Input is not a number! 44 |
45 |
46 | 47 | 48 |
49 |
50 | 51 |
52 |
53 | 54 | 55 |
56 |
57 | 58 |
59 |
60 | 63 |
64 | 65 | 66 |
67 |
68 |
69 |
70 |
71 |
-------------------------------------------------------------------------------- /pages/elements-buttons.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 | Fab 6 | Buttons 7 | More 8 |
9 | 10 |
11 | 12 | 15 | 16 | 19 |

20 | 21 | 24 | 25 | 28 | 29 |
30 |
31 | 32 | 33 | 36 | 37 | 40 | 41 | 44 |

45 | 46 | 47 | 50 | 51 | 54 | 55 | 58 |
59 |
60 | 61 | 64 | 65 | 68 | 69 | 72 |

73 | 74 | 77 | 78 | 81 |
82 |
83 |
-------------------------------------------------------------------------------- /app/main.js: -------------------------------------------------------------------------------- 1 | //functions related to the theme itself. 2 | 3 | var mdlAdmin = { 4 | //set Page title and Breadcrumbs. 5 | setTitle : function(title, subtitle) { 6 | //todo ; page title. 7 | 8 | $('#title').html(title); 9 | $('#title-sep').hide(); 10 | $('#subtitle').hide(); 11 | if(subtitle) { 12 | $('#title-sep').show(); 13 | $('#subtitle').show(); 14 | $('#subtitle').html(subtitle); 15 | } 16 | 17 | }, 18 | //load dynamic content over XHR 19 | loadContent : function(filename, cb) { 20 | $('#content').html('
'); 21 | componentHandler.upgradeDom(); 22 | 23 | setTimeout( 24 | function() 25 | { 26 | $('#content').load(filename, function() { 27 | //Quick fix for dynamic DOM issue (raised by me): https://github.com/google/material-design-lite/issues/957 28 | componentHandler.upgradeDom(); 29 | if(cb) 30 | cb(); 31 | }); 32 | }, 500); 33 | 34 | 35 | 36 | 37 | }, 38 | 39 | initActive : function(route_href) { 40 | 41 | //if top level 42 | var nav= $('nav > nav-item').find("[href='" + route_href + "']"); 43 | if(nav.length) { 44 | //select the first child 45 | var navitem = nav[0]; 46 | //and make it active. 47 | $(navitem).parent().addClass('active'); 48 | //if subnav then open up the main nav. 49 | if($(navitem).parent().prop('nodeName') == 'SUB-NAV-ITEM') { 50 | $(navitem).parent().parent().addClass('show'); 51 | } 52 | 53 | } 54 | 55 | }, 56 | 57 | todoAdd : function() { 58 | //TODO: Not able to identify a technique to add a selectable row dynamically. 59 | var newTask = $('#todo-newtask').val(); 60 | var newDate = $('#todo-newdate').val(); 61 | 62 | 63 | $('#todo-table > tbody:last-child').append('' 64 | + newTask + '' + newDate + '/tr>'); 65 | componentHandler.upgradeDom(); 66 | }, 67 | 68 | loadCharts : function() { 69 | if(google) { 70 | google.load('visualization', '1.1', { 71 | packages: ['line', 'bar'], 72 | callback: function() { 73 | drawChart(); 74 | } 75 | } ) 76 | } 77 | // google.load('visualization', '1.1', {packages: ['line']}); 78 | // google.setOnLoadCallback(drawChart); 79 | 80 | function drawChart() { 81 | 82 | var data = new google.visualization.DataTable(); 83 | data.addColumn('number', 'Day'); 84 | data.addColumn('number', 'Guardians of the Galaxy'); 85 | data.addColumn('number', 'The Avengers'); 86 | data.addColumn('number', 'Transformers: Age of Extinction'); 87 | 88 | data.addRows([ 89 | [1, 37.8, 80.8, 41.8], 90 | [2, 30.9, 69.5, 32.4], 91 | [3, 25.4, 57, 25.7], 92 | [4, 11.7, 18.8, 10.5], 93 | [5, 11.9, 17.6, 10.4], 94 | [6, 8.8, 13.6, 7.7], 95 | [7, 7.6, 12.3, 9.6], 96 | [8, 12.3, 29.2, 10.6], 97 | [9, 16.9, 42.9, 14.8], 98 | [10, 12.8, 30.9, 11.6], 99 | [11, 5.3, 7.9, 4.7], 100 | [12, 6.6, 8.4, 5.2], 101 | [13, 4.8, 6.3, 3.6], 102 | [14, 4.2, 6.2, 3.4] 103 | ]); 104 | 105 | var options = { 106 | chart: { 107 | title: 'Google Charts - Line', 108 | subtitle: 'in Material Design' 109 | }, 110 | width: 900, 111 | height: 500 112 | }; 113 | 114 | var chart = new google.charts.Line(document.getElementById('linechart_material')); 115 | 116 | chart.draw(data, options); 117 | 118 | var data = google.visualization.arrayToDataTable([ 119 | ['Year', 'Sales', 'Expenses', 'Profit'], 120 | ['2014', 1000, 400, 200], 121 | ['2015', 1170, 460, 250], 122 | ['2016', 660, 1120, 300], 123 | ['2017', 1030, 540, 350] 124 | ]); 125 | 126 | var options = { 127 | chart: { 128 | title: 'Google Charts - Bar', 129 | subtitle: 'in Material Design' 130 | }, 131 | bars: 'horizontal', // Required for Material Bar Charts. 132 | width: 900, 133 | height: 500 134 | }; 135 | 136 | var chart = new google.charts.Bar(document.getElementById('barchart_material')); 137 | 138 | chart.draw(data, options); 139 | } 140 | } 141 | } -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2015 Google Inc. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | html, body { 18 | font-family: 'Roboto', 'Helvetica', sans-serif; 19 | } 20 | .demo-avatar { 21 | width: 48px; 22 | height: 48px; 23 | border-radius: 24px; 24 | } 25 | .demo-layout .demo-header .mdl-textfield { 26 | padding-top: 27px; 27 | } 28 | .demo-layout .mdl-layout__header .mdl-layout__drawer-button { 29 | color: rgba(0, 0, 0, 0.54); 30 | } 31 | .mdl-layout__drawer .avatar { 32 | margin-bottom: 16px; 33 | } 34 | .demo-drawer { 35 | border: none; 36 | 37 | } 38 | .demo-drawer::-webkit-scrollbar { 39 | display: none; 40 | } 41 | 42 | .demo-drawer .mdl-menu .mdl-menu__item{ 43 | display: flex; 44 | align-items: center; 45 | } 46 | .demo-drawer-header { 47 | box-sizing: border-box; 48 | display: flex; 49 | flex-direction: column; 50 | justify-content: flex-end; 51 | padding: 16px; 52 | height: 151px; 53 | } 54 | .demo-avatar-dropdown { 55 | display: flex; 56 | position: relative; 57 | flex-direction: row; 58 | align-items: center; 59 | width: 100%; 60 | } 61 | 62 | .demo-navigation { 63 | flex-grow: 1; 64 | } 65 | .demo-layout .demo-navigation .mdl-navigation__link { 66 | display: flex !important; 67 | flex-direction: row; 68 | align-items: center; 69 | color: rgba(255, 255, 255, 0.56); 70 | font-weight: 500; 71 | } 72 | .demo-layout .demo-navigation .active .mdl-navigation__link { 73 | color: #37474F; 74 | } 75 | .demo-layout .demo-navigation .mdl-navigation__link:hover { 76 | background-color: #00BCD4; 77 | color: #37474F; 78 | } 79 | .demo-navigation .mdl-navigation__link .material-icons { 80 | font-size: 24px; 81 | color: rgba(255, 255, 255, 0.56); 82 | margin-right: 32px; 83 | } 84 | 85 | .demo-content { 86 | max-width: 1080px; 87 | } 88 | 89 | .demo-charts { 90 | align-items: center; 91 | } 92 | .demo-chart:nth-child(1) { 93 | color: #ACEC00; 94 | } 95 | .demo-chart:nth-child(2) { 96 | color: #00BBD6; 97 | } 98 | .demo-chart:nth-child(3) { 99 | color: #BA65C9; 100 | } 101 | .demo-chart:nth-child(4) { 102 | color: #EF3C79; 103 | } 104 | .demo-graphs { 105 | padding: 16px 32px; 106 | display: flex; 107 | flex-direction: column; 108 | align-items: stretch; 109 | } 110 | /* TODO: Find a proper solution to have the graphs 111 | * not float around outside their container in IE10/11. 112 | * Using a browserhacks.com solution for now. 113 | */ 114 | _:-ms-input-placeholder, :root .demo-graphs { 115 | min-height: 664px; 116 | } 117 | _:-ms-input-placeholder, :root .demo-graph { 118 | max-height: 300px; 119 | } 120 | /* TODO end */ 121 | .demo-graph:nth-child(1) { 122 | color: #00b9d8; 123 | } 124 | .demo-graph:nth-child(2) { 125 | color: #d9006e; 126 | } 127 | 128 | .demo-cards { 129 | align-items: flex-start; 130 | align-content: flex-start; 131 | } 132 | .demo-cards .demo-separator { 133 | height: 32px; 134 | } 135 | .demo-cards .mdl-card__title.mdl-card__title { 136 | color: white; 137 | font-size: 24px; 138 | font-weight: 400; 139 | } 140 | .demo-cards ul { 141 | padding: 0; 142 | } 143 | .demo-cards h3 { 144 | font-size: 1em; 145 | } 146 | .demo-updates .mdl-card__title { 147 | min-height: 200px; 148 | background-image: url('images/dog.png'); 149 | background-position: 90% 100%; 150 | background-repeat: no-repeat; 151 | } 152 | .demo-cards .mdl-card__actions a { 153 | color: #00BCD4; 154 | text-decoration: none; 155 | } 156 | 157 | .demo-card-wide { 158 | width: 100%; 159 | margin-bottom: 10px 160 | } 161 | 162 | .demo-options h3 { 163 | margin: 0; 164 | } 165 | .demo-options .mdl-checkbox__box-outline { 166 | border-color: rgba(255, 255, 255, 0.89); 167 | } 168 | .demo-options ul { 169 | margin: 0; 170 | list-style-type: none; 171 | } 172 | .demo-options li { 173 | margin: 4px 0; 174 | } 175 | .demo-options .material-icons { 176 | color: rgba(255, 255, 255, 0.89); 177 | } 178 | .demo-options .mdl-card__actions { 179 | height: 64px; 180 | display: flex; 181 | box-sizing: border-box; 182 | align-items: center; 183 | } 184 | 185 | sub-nav { 186 | /*padding: 4px;*/ 187 | transition: visibility 1s linear; 188 | /*opacity: 0;*/ 189 | display: none; 190 | } 191 | 192 | sub-nav.show { 193 | /*opacity: 1;*/ 194 | display: block; 195 | } 196 | 197 | 198 | sub-nav-item { 199 | display: flex !important; 200 | flex-direction: row; 201 | align-items: center; 202 | color: rgba(255, 255, 255, 0.56); 203 | font-weight: 500; 204 | cursor: pointer; 205 | /*padding: 3px;*/ 206 | } 207 | 208 | sub-nav-item a.mdl-navigation__link { 209 | display: block !important; 210 | padding: 10px 40px !important; 211 | } 212 | 213 | sub-nav-item:hover { 214 | background-color: #00BCD4; 215 | color: #37474F; 216 | } 217 | 218 | sub-nav-item.active, nav-item.active { 219 | background-color: #00BCD4; 220 | color: #37474F; 221 | 222 | } 223 | 224 | nav-item a { 225 | cursor: pointer; 226 | } 227 | 228 | #title-sep { 229 | display: none; 230 | } 231 | 232 | a.mdl-navigation__link .active { 233 | 234 | } 235 | 236 | 237 | sub-nav-item a.mdl-navigation__link { 238 | padding:100px; 239 | } 240 | 241 | .demo-todo.mdl-card { 242 | width: 60%; 243 | margin: auto; 244 | } 245 | .demo-todo > .mdl-card__title { 246 | /*color: #fff;*/ 247 | /*height: 176px;*/ 248 | } 249 | .demo-todo > .mdl-card__menu { 250 | /*color: #fff;*/ 251 | } 252 | 253 | .demo-todo .full-width { 254 | width: 100%; 255 | } 256 | 257 | /* Fix for selectable table bug, TODO : Remove this; */ 258 | .demo-todo .mdl-data-table th { 259 | text-align: left; 260 | } 261 | 262 | .demo-todo .textfield-demo { 263 | width: 150px; 264 | } 265 | 266 | 267 | .demo-element-button .mdl-tabs__panel { 268 | text-align: center; 269 | padding: 10px; 270 | } 271 | 272 | .loading { 273 | text-align: center; 274 | margin-top: 100px; 275 | } 276 | 277 | 278 | sub-nav-item a { 279 | width: 100%; 280 | } 281 | 282 | .right-arrow-menu { 283 | float: right; 284 | text-align: right; 285 | position: absolute; 286 | right: 10px; 287 | margin-top: 2px; 288 | } 289 | 290 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | Material Design Lite 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
54 |
55 |
56 | 57 |  >  58 | 59 |
60 |
61 | 64 |
65 | 66 | 67 |
68 |
69 | 72 |
    73 |
  • About
    • 74 |
  • Contact
    • 75 |
  • Legal information
    • 76 |
77 |
78 |
79 |
80 |
81 | 82 |
83 | hello@email.com 84 |
85 | 88 |
    89 |
  • hello@email.com
    • 90 |
  • info@domain.net
    • 91 |
  • addAdd another account...
    • 92 |
93 |
94 |
95 | 127 |
128 |
129 | 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 | -------------------------------------------------------------------------------- /pages/dashboard.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 | 82% 6 | 7 | 8 | 9 | 82% 10 | 11 | 12 | 13 | 82% 14 | 15 | 16 | 17 | 82% 18 | 19 |
20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |
30 |
31 |
32 |

Updates

33 |
34 |
35 | Non dolore elit adipisicing ea reprehenderit consectetur culpa. 36 |
37 |
38 | Read More 39 |
40 |
41 |
42 |
43 |
44 |

View options

45 |
    46 |
  • 47 | 51 |
    • 52 |
  • 53 | 57 |
    • 58 |
  • 59 | 63 |
    • 64 |
  • 65 | 69 |
    • 70 |
71 |
72 |
73 | Change location 74 |
75 | location_on 76 |
77 |
78 |
79 |
80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 500 110 | 400 111 | 300 112 | 200 113 | 100 114 | 1 115 | 2 116 | 3 117 | 4 118 | 5 119 | 6 120 | 7 121 | 122 | 123 | 125 | 126 | 127 | 129 | 130 | 131 | 132 | --------------------------------------------------------------------------------