├── .gitignore ├── LICENSE ├── README.md ├── gulpfile.js ├── package.json └── src ├── images ├── bulma-logo.png └── user-image.jpg ├── javascript └── main.js ├── pages ├── blank.html ├── index.html ├── partials │ ├── footer.html │ ├── header.html │ ├── hero.html │ ├── page-top.html │ └── sidebar.html └── tables.html ├── sass ├── bulma.sass └── style.scss └── screenshots └── dashboard.png /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /build 3 | package-lock.json -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Samer Moustafa 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Bulma-Dashboard 2 | Free Dashboard Template using Bulma Framework 3 | 4 | ![alt text][logo] 5 | 6 | [logo]: https://github.com/SamZCoder/Bulma-Dashboard/raw/master/src/screenshots/dashboard.png "Bulma Dashboard" 7 | 8 | ## How to install 9 | First you have to make sure you have git installed on your machine then clone this repository locally by running this command 10 | ``` 11 | git clone https://github.com/SamZCoder/Bulma-Dashboard.git 12 | ``` 13 | Now you have all source code localy so it's time to build the project but you must have NodeJs install and then run this command to install required packages 14 | ``` 15 | npm install 16 | ``` 17 | Once finished installing required packages just run gulp to build your project into a directory called "build" 18 | ``` 19 | gulp 20 | ``` -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const sass = require('gulp-sass'); 3 | const rename = require('gulp-rename'); 4 | const htmlInclude = require('gulp-file-include'); 5 | const terser = require('gulp-terser'); 6 | 7 | gulp.task('build_js', function(){ 8 | return gulp.src('./src/javascript/*.js') 9 | .pipe(terser()) 10 | .pipe(rename({suffix : '.min'})) 11 | .pipe(gulp.dest('./build/javascript', {overwrite : true})); 12 | }); 13 | 14 | gulp.task('build_sass', function(){ 15 | return gulp.src('./src/sass/*.sass') 16 | .pipe(gulp.src('./src/sass/*.scss')) 17 | .pipe(sass({ includePaths : ['./node_modules'], outputStyle : 'compressed'})) 18 | .pipe(rename({ suffix : '.min'})) 19 | .pipe(gulp.dest('./build/css', {overwrite : true})); 20 | }); 21 | 22 | 23 | gulp.task('build_html', function(){ 24 | return gulp.src('./src/pages/*.html') 25 | .pipe(htmlInclude({ 26 | 'prefix' : '@@', 27 | basepath : './src/pages/partials/' 28 | })) 29 | .pipe(gulp.dest('./build', {overwrite:true})); 30 | }); 31 | 32 | gulp.task('images', function(){ 33 | return gulp.src('./src/images/*.*') 34 | .pipe(gulp.dest('./build/images', {overwrite:true})); 35 | }); 36 | 37 | 38 | //Watch Task 39 | gulp.task('watch', function(){ 40 | 41 | gulp.watch('./src/sass/*.sass', gulp.series('build_sass')); 42 | gulp.watch('./src/sass/*.scss', gulp.series('build_sass')); 43 | gulp.watch('./src/javascript/*.js', gulp.series('build_js')); 44 | gulp.watch('./src/pages/partials/*.html', gulp.series('build_html')); 45 | gulp.watch('./src/pages/*.html', gulp.series('build_html')); 46 | gulp.watch('./src/images/*.*', gulp.series('images')); 47 | }); 48 | 49 | //Single Run as Default 50 | gulp.task('default', gulp.series('build_html', 'build_sass', 'build_js', 'images')); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bulma-dashboard", 3 | "version": "1.0.0", 4 | "description": "Bulma Based Dashboard Template to Spread love of Bulma", 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/SamZCoder/Bulma-Dashboard.git" 12 | }, 13 | "keywords": [ 14 | "bulma", 15 | "html", 16 | "css", 17 | "sass", 18 | "template" 19 | ], 20 | "author": "SamZCoder", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/SamZCoder/Bulma-Dashboard/issues" 24 | }, 25 | "homepage": "https://github.com/SamZCoder/Bulma-Dashboard#readme", 26 | "devDependencies": { 27 | "gulp": "^4.0.2", 28 | "gulp-file-include": "^2.1.1", 29 | "gulp-rename": "^2.0.0", 30 | "gulp-sass": "^4.0.2", 31 | "gulp-terser": "^1.2.0" 32 | }, 33 | "dependencies": { 34 | "bulma": "^0.8.1" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/images/bulma-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersamer/Bulma-Dashboard/1e4145735833b9160775491ab7a42c7933a0ab5d/src/images/bulma-logo.png -------------------------------------------------------------------------------- /src/images/user-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersamer/Bulma-Dashboard/1e4145735833b9160775491ab7a42c7933a0ab5d/src/images/user-image.jpg -------------------------------------------------------------------------------- /src/javascript/main.js: -------------------------------------------------------------------------------- 1 | console.log('Bulma Dashboard'); 2 | //Sidebar Collapse 3 | Array.from(document.getElementById('sidebar').getElementsByClassName('has-dropdown')).forEach(element => { 4 | element.addEventListener('click', function(e) { 5 | if(!e.target.parentNode.className.includes("has-dropdown")){return;} 6 | const submenu = element.getElementsByTagName('ul')[0]; 7 | if(submenu != undefined) 8 | { submenu.style.display = submenu.style.display == "block" ? "none" : "block";} 9 | event.preventDefault(); 10 | }, element); 11 | }) -------------------------------------------------------------------------------- /src/pages/blank.html: -------------------------------------------------------------------------------- 1 | @@include('header.html') 2 | @@include('sidebar.html') 3 | @@include('page-top.html') 4 |

Blank Page

5 | @@include('footer.html') -------------------------------------------------------------------------------- /src/pages/index.html: -------------------------------------------------------------------------------- 1 | @@include('header.html') 2 | @@include('sidebar.html') 3 | @@include('page-top.html') 4 |

Statistics

5 |
6 |
7 |
8 |
9 |
10 |

11 |
12 |
13 |

36

14 |

Categories

15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |

24 |
25 |
26 |

112

27 |

Pages

28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |

37 |
38 |
39 |

1,022

40 |

Published Posts

41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |

50 |
51 |
52 |

456

53 |

Active Users

54 |
55 |
56 |
57 |
58 |
59 |

Panels

60 |
61 |
62 |
63 |

Create Quick Post

64 |
65 |
66 |
67 | 68 |
69 | 70 |
71 |
72 |
73 | 74 |
75 | 78 |
79 |
80 |
81 | 82 |
83 | 84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |

Server Status

93 |
94 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quam eos reprehenderit quos, ipsam magni. Dignissimos similique obcaecati quas repellat libero facere.

95 |
96 |
97 |
98 |

Adminstration

99 |
100 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut quam eos reprehenderit quos, ipsam magni.

101 |
102 |
103 |
104 |
105 |

Table without Panel

106 |
107 |
108 |
109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 130 | 131 | 132 | 133 | 134 | 135 | 144 | 145 | 146 | 147 | 148 | 149 | 158 | 159 | 160 | 161 | 162 | 163 | 172 | 173 | 174 | 175 | 176 |
IdNameEmailRole
1 122 |
123 | 124 |
125 |

Sam ZCoder

126 |

Administrator

127 |
128 |
129 | 		coder.sam@outlook.comAdministrator
2 136 |
137 | 138 |
139 |

Sarah Beachoup

140 |

Moderator

141 |
142 |
143 | 		sarah.beachoup@gmail.comModerator
3 150 |
151 | 152 |
153 |

John Doe

154 |

Author

155 |
156 |
157 | 		john.doe@outlook.comAuthor
4 164 |
165 | 166 |
167 |

John Doe

168 |

User

169 |
170 |
171 | 		coder.sam@outlook.comUser
177 |
178 |
179 |
180 | @@include('footer.html') -------------------------------------------------------------------------------- /src/pages/partials/footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /src/pages/partials/header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bulma Dashboard 7 | 8 | 9 | 10 | 11 |
-------------------------------------------------------------------------------- /src/pages/partials/hero.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/partials/page-top.html: -------------------------------------------------------------------------------- 1 | 31 | 32 |
33 |
34 | 35 | -------------------------------------------------------------------------------- /src/pages/partials/sidebar.html: -------------------------------------------------------------------------------- 1 | 62 |
-------------------------------------------------------------------------------- /src/pages/tables.html: -------------------------------------------------------------------------------- 1 | @@include('header.html') 2 | @@include('sidebar.html') 3 | @@include('page-top.html') 4 |

Tables

5 |
6 |
7 |
8 |
Regular Table
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 |
IdNameEmail
1Sam ZCodercoder.sam@outlook.com
2Sarah Beachoupsarah.beachoup@gmail.com
3John Doejohn.doe@outlook.com
36 |
37 |
38 |
39 |
40 |
41 |
Striped/Bordered Table
42 |
43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 |
IdNameEmail
1Sam ZCodercoder.sam@outlook.com
2Sarah Beachoupsarah.beachoup@gmail.com
3John Doejohn.doe@outlook.com
69 |
70 |
71 |
72 |
73 |

Table without Panel

74 |
75 |
76 |
77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 98 | 99 | 100 | 101 | 102 | 103 | 112 | 113 | 114 | 115 | 116 | 117 | 126 | 127 | 128 | 129 | 130 | 131 | 140 | 141 | 142 | 143 | 144 |
IdNameEmailRole
1 90 |
91 | 92 |
93 |

Sam ZCoder

94 |

Administrator

95 |
96 |
97 | 		coder.sam@outlook.comAdministrator
2 104 |
105 | 106 |
107 |

Sarah Beachoup

108 |

Moderator

109 |
110 |
111 | 		sarah.beachoup@gmail.comModerator
3 118 |
119 | 120 |
121 |

John Doe

122 |

Author

123 |
124 |
125 | 		john.doe@outlook.comAuthor
4 132 |
133 | 134 |
135 |

John Doe

136 |

User

137 |
138 |
139 | 		coder.sam@outlook.comUser
145 |
146 |
147 |
148 | @@include('footer.html') -------------------------------------------------------------------------------- /src/sass/bulma.sass: -------------------------------------------------------------------------------- 1 | @import "bulma/bulma" -------------------------------------------------------------------------------- /src/sass/style.scss: -------------------------------------------------------------------------------- 1 | html, body {padding:0; margin:0;} 2 | html, body, #sidebar, #page,#base_body { 3 | min-height: 100%; 4 | } 5 | #header-nav { 6 | border-bottom:1px solid #e6e6e6; 7 | } 8 | .panel { 9 | border:1px solid #e6e6e6; 10 | .panel-heading { 11 | font-size: 1rem;padding:1rem; 12 | background-color: transparent; 13 | border-bottom:1px solid #e6e6e6; 14 | } 15 | .panel-block {padding:1.5rem;} 16 | } 17 | 18 | #base_body {margin : 0;} 19 | #sidebar { 20 | border-right:1px solid #e6e6e6; 21 | padding:0; 22 | > .title { border-bottom : 1px solid #e6e6e6; padding:1.2rem; text-align: center;} 23 | .user { 24 | padding:1rem; 25 | border-bottom:1px solid #e6e6e6; 26 | .media-content {margin:5px 0;} 27 | } 28 | aside { 29 | padding: 1rem; 30 | a {font-size: 0.8rem;} 31 | .icon {color: #ccc;} 32 | a:hover .icon {color :#444;} 33 | a.is-active .icon {color : #fff;} 34 | .menu-list { 35 | li > ul {display: none;} 36 | } 37 | } 38 | } 39 | #content { 40 | padding :1.5rem 1.5rem; 41 | margin-bottom: 100px; 42 | .statistic { 43 | .media-left {margin-right:20px;} 44 | } 45 | } 46 | 47 | .user-media 48 | { 49 | img 50 | { 51 | display: block; 52 | position: relative; 53 | width:48px; height: 48px; 54 | border-radius: 50%; 55 | float:left; 56 | } 57 | .info { 58 | float:left; 59 | height: 48px; 60 | padding:0.3rem; 61 | margin-left:0.8rem; 62 | .title {font-size:1rem;} 63 | .subtitle {font-size:0.8rem;} 64 | 65 | } 66 | } 67 | .is-fullwidth {width:100%;} -------------------------------------------------------------------------------- /src/screenshots/dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codersamer/Bulma-Dashboard/1e4145735833b9160775491ab7a42c7933a0ab5d/src/screenshots/dashboard.png --------------------------------------------------------------------------------