├── Readme.md ├── css ├── style.css └── style.css.map ├── images └── preview.jpg ├── index.html ├── js └── script.js └── scss └── style.scss /Readme.md: -------------------------------------------------------------------------------- 1 | # Sample Admin Template using Bulma CSS Framework 2 | 3 | ## 😃 Click here for the 👉 [💥LIVE DEMO](https://frontendfunn.github.io/bulma-css-sample-admin-template/) 4 | 5 | --- 6 | 7 | ![preview](images/preview.jpg) 8 | 9 | # 👉 Subscribe to My Channel [💙❤️Youtube❤️💙](https://www.youtube.com/channel/UCpOHt5d6GG-mvo-_pU06rhQ?sub_confirmation=1) 10 | 11 | Made with ❤️ - by [FrontEndFunn](https://www.youtube.com/channel/UCpOHt5d6GG-mvo-_pU06rhQ?sub_confirmation=1) 12 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | background-color: #efefef; 5 | } 6 | 7 | .px-1, 8 | .p-1 { 9 | padding-left: 0.75rem; 10 | padding-right: 0.75rem; 11 | } 12 | 13 | .py-1, 14 | .p-1 { 15 | padding-top: 0.75rem; 16 | padding-bottom: 0.75rem; 17 | } 18 | 19 | .box-shadow-y { 20 | -webkit-box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05); 21 | box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05); 22 | } 23 | 24 | .menu-container { 25 | position: fixed; 26 | bottom: 0; 27 | margin: auto; 28 | min-width: 300px; 29 | z-index: 10; 30 | background-color: transparent; 31 | -webkit-transform: translateX(-100%); 32 | transform: translateX(-100%); 33 | -webkit-transition: all ease 0.5s; 34 | transition: all ease 0.5s; 35 | } 36 | 37 | .menu-container.active { 38 | -webkit-transform: translateX(0%); 39 | transform: translateX(0%); 40 | } 41 | 42 | .icon { 43 | height: 30px; 44 | width: 30px; 45 | vertical-align: baseline; 46 | display: -webkit-inline-box; 47 | display: -ms-inline-flexbox; 48 | display: inline-flex; 49 | -webkit-box-pack: center; 50 | -ms-flex-pack: center; 51 | justify-content: center; 52 | -webkit-box-align: center; 53 | -ms-flex-align: center; 54 | align-items: center; 55 | } 56 | 57 | .toggler { 58 | margin-left: 0; 59 | cursor: pointer; 60 | } 61 | 62 | @media (min-width: 769px) { 63 | .menu-container { 64 | width: 25%; 65 | min-width: auto; 66 | -webkit-transform: translateX(0%); 67 | transform: translateX(0%); 68 | } 69 | } 70 | 71 | @media (min-width: 1024px) { 72 | .menu-container { 73 | width: 16.6667%; 74 | min-width: auto; 75 | -webkit-transform: translateX(0%); 76 | transform: translateX(0%); 77 | } 78 | } 79 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /css/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,AAAA,IAAI;AACJ,IAAI,CAAC;EACH,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,OAAO;CAC1B;;AACD,AAAA,KAAK;AACL,IAAI,CAAC;EACH,YAAY,EAAE,OAAO;EACrB,aAAa,EAAE,OAAO;CACvB;;AACD,AAAA,KAAK;AACL,IAAI,CAAC;EACH,WAAW,EAAE,OAAO;EACpB,cAAc,EAAE,OAAO;CACxB;;AAED,AAAA,aAAa,CAAC;EACZ,UAAU,EAAE,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,mBAAmB;CAC7C;;AAED,AAAA,eAAe,CAAC;EACd,QAAQ,EAAE,KAAK;EACf,MAAM,EAAE,CAAC;EACT,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,KAAK;EAChB,OAAO,EAAE,EAAE;EACX,gBAAgB,EAAE,WAAW;EAC7B,SAAS,EAAE,iBAAiB;EAC5B,UAAU,EAAE,aAAa;CAC1B;;AAED,AAAA,eAAe,AAAA,OAAO,CAAC;EACrB,SAAS,EAAE,cAAc;CAC1B;;AACD,AAAA,KAAK,CAAC;EACJ,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,cAAc,EAAE,QAAQ;EACxB,OAAO,EAAE,WAAW;EACpB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;CACpB;;AACD,AAAA,QAAQ,CAAC;EACP,WAAW,EAAE,CAAC;EACd,MAAM,EAAE,OAAO;CAChB;;AAED,MAAM,EAAE,SAAS,EAAE,KAAK;EACtB,AAAA,eAAe,CAAC;IACd,KAAK,EAAE,GAAG;IACV,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,cAAc;GAC1B;;;AAGH,MAAM,EAAE,SAAS,EAAE,MAAM;EACvB,AAAA,eAAe,CAAC;IACd,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,cAAc;GAC1B", 4 | "sources": [ 5 | "../scss/style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /images/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontendfunn/bulma-css-sample-admin-template/8c75f0c5ef291f1c939a88791d8bdb992a553472/images/preview.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | FrontendFunn - Bulma CSS Sample Admin Template 8 | 14 | 20 | 21 | 22 | 23 | 24 | 84 | 85 |
86 |
87 |
88 |
89 | 144 |
145 |
146 |
147 |
150 |
151 |
152 |
153 |

154 | Dashboard 155 |

156 |
157 |
158 | 159 |
160 |
161 |
162 |
163 |
164 | Top Seller Total 165 |
166 |
167 |
168 |

56,590

169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 | Revenue 177 |
178 |
179 |
180 |

55%

181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 | Feedback 189 |
190 |
191 |
192 |

78 %

193 |
194 |
195 |
196 |
197 |
198 |
199 |
Orders
200 |
201 |
202 |

425k

203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |

Info

212 | 213 |
214 |
215 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 216 | Pellentesque risus mi, tempus quis placerat 217 | ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet 218 | fringilla. Nullam gravida purus diam, et dictum 219 | felis venenatis efficitur. Aenean ac 220 | eleifend lacus, in mollis lectus. Donec sodales, arcu 221 | et sollicitudin porttitor, tortor urna tempor ligula, id 222 | porttitor mi magna a neque. Donec dui urna, vehicula et sem 223 | eget, facilisis sodales sem. 224 |
225 |
226 |
227 |
228 |
229 |
230 |

Info

231 | 232 |
233 |
234 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 235 | Pellentesque risus mi, tempus quis placerat 236 | ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet 237 | fringilla. Nullam gravida purus diam, et dictum 238 | felis venenatis efficitur. Aenean ac 239 | eleifend lacus, in mollis lectus. Donec sodales, arcu 240 | et sollicitudin porttitor, tortor urna tempor ligula, id 241 | porttitor mi magna a neque. Donec dui urna, vehicula et sem 242 | eget, facilisis sodales sem. 243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 | 255 | 256 | 257 | 258 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | $('.toggler').on('click', function() { 3 | $('.menu-container').toggleClass('active'); 4 | }); 5 | 6 | $('.nav-toggler').on('click', function() { 7 | $('.navbar-toggler').toggleClass('is-active'); 8 | $('.navbar-menu').toggleClass('is-active'); 9 | }); 10 | 11 | function setMenuHeight() { 12 | var navbarHeight = $('.navbar').outerHeight(); 13 | $('.menu-wrapper') 14 | .outerHeight(document.documentElement.clientHeight - navbarHeight) 15 | .niceScroll({ 16 | emulatetouch: true 17 | }); 18 | } 19 | setMenuHeight(); 20 | $(window).on('resize', function() { 21 | setMenuHeight(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | background-color: #efefef; 5 | } 6 | .px-1, 7 | .p-1 { 8 | padding-left: 0.75rem; 9 | padding-right: 0.75rem; 10 | } 11 | .py-1, 12 | .p-1 { 13 | padding-top: 0.75rem; 14 | padding-bottom: 0.75rem; 15 | } 16 | 17 | .box-shadow-y { 18 | box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05); 19 | } 20 | 21 | .menu-container { 22 | position: fixed; 23 | bottom: 0; 24 | margin: auto; 25 | min-width: 300px; 26 | z-index: 10; 27 | background-color: transparent; 28 | transform: translateX(-100%); 29 | transition: all ease 0.5s; 30 | } 31 | 32 | .menu-container.active { 33 | transform: translateX(0%); 34 | } 35 | .icon { 36 | height: 30px; 37 | width: 30px; 38 | vertical-align: baseline; 39 | display: inline-flex; 40 | justify-content: center; 41 | align-items: center; 42 | } 43 | .toggler { 44 | margin-left: 0; 45 | cursor: pointer; 46 | } 47 | 48 | @media (min-width: 769px) { 49 | .menu-container { 50 | width: 25%; 51 | min-width: auto; 52 | transform: translateX(0%); 53 | } 54 | } 55 | 56 | @media (min-width: 1024px) { 57 | .menu-container { 58 | width: 16.6667%; 59 | min-width: auto; 60 | transform: translateX(0%); 61 | } 62 | } 63 | --------------------------------------------------------------------------------