Documentation
Introduction
Brunette is a Bootstrap 4.1.X & Sass based solid core framework that works well for all screen sizes and modern browsers. HTML5 validated clean code is focused - keeping it simple and orderly. With Brunette's UI components library, you can actually get more time on building stuff, rather than editing pixel distances. Brunette - HTML template and Admin UI kit can be used for any type of web application: CRM, Project Management, Statistics, Analytics or any custom admin dashboard. This documentation will guide you through installing the template and exploring the various components that are bundled with the template.
File Structure
HTML ├── │ └── dist │ └── css │ └── fonts │ └── img │ └── js │ └── src │ └──scss │ └── colors.scss │ └── mixins.scss │ └── navbar.scss │ └── style.scss │ └── vendors │ └── All Required plugins files │ └── All Html Pages │ └── .jshintrc │ └── Gruntfile.js │ └── package.json │ └── package-lock.json └──
Installation (Install Node.js,Grunt)
Use of these tools are completely optional.
- Node.js and NPM. You can download Node.js from here https://nodejs.org.Npm comes bundled with Node.js
- Next you need to install bower.
- At last install grunt using
npm install -g grunt-cliandnpm install grunt --save-dev
After installing all the required frameworks, components and dependencies, go to the root folder of and run the following commands from the command line:
- npm install
- grunt dist
- grunt
If everything was installed correctly, you should see the jQuery version of Brunette running in http://localhost:9000/
Above all procedures are optional you can directly use the compiled file which we provided you.
Menu Style
For vertical navigation you have to first add hk-vertical-navclass with hk-wrapper.
For Horizontal navigation you have to first add hk-horizontal-navclass with hk-wrapper.
For vertical alt navigation you have to first add hk-alt-navclass with hk-wrapper.
For this menu style you have to add hk-navbar-altclass with navbar
For light & dark menu you can add hk-nav-lightor hk-nav-darkwith hk-navclass.
For Scrollable Navigation please add scrollable-navclass with hk-wrapper.
Twitter Feed
We implemented live Twitter Feed on Brunette, for that we used twitterFetcherthird party plugin.
How to Setup
HTML Structure
<div class="card bg-primary text-center"> <div class="twitter-slider-wrap card-body"> <div class="twitter-icon text-center mb-15"> <i class="fa fa-twitter"></i> </div> <div id="tweets_fetch" class="owl-carousel owl-theme"></div> </div> </div>
CSS
<!-- Lightgallery CSS --> <link href="vendors/lightgallery/dist/css/lightgallery.min.css" rel="stylesheet" type="text/css">
JS
<!-- twitter JavaScript --> <script src="dist/js/twitterFetcher.js"></script> <script src="dist/js/widgets-data.js"></script> <!-- Owl JavaScript --> <script src="vendors/owl.carousel/dist/owl.carousel.min.js"></script> <!-- Owl Init JavaScript --> <script src="dist/js/owl-data.js"></script>
Initialize Twitter Feed
if( $('#tweets_fetch').length >0 ){ var configList = { "profile": {"screenName": 'envato'}, "domId": 'tweets_fetch', "maxTweets": 2, "enableLinks": true, "showUser": false, "showTime": true, "showImages": false, "showInteraction":false, "lang": 'en' }; twitterFetcher.fetch(configList); } }); $(window).on('load', function () { setTimeout(function(){ $('#tweets_fetch').owlCarousel({ loop:true, margin:0, autoplay:true, responsiveClass:true, autoHeight:true, autoplayTimeout:4000, responsive:{ 0:{ items:1 } } }); },2000); });
Chat
Chat spp is exclusive design for Brunette users , it provide you rich user experience.There are no external plugin dependencies.
How to Setup
HTML Structure
<div class="chatapp-wrap"> <div class="chatapp-left"> <header> <!--Chat app left header content--> </header> <form role="search" class="chat-search"> <!--Chat app search form--> </form> <div class="chatapp-users-list"> <!--Chat app user list--> </div> </div> <div class="chatapp-right"> <header> <!--Chat app right header content--> </header> <div class="chat-body"> <!--Chat body--> </div> <footer> <!--Chat Input field--> </footer> </div> </div>
Calendar
Calendar app is based on Fullcallendar js https://fullcalendar.io/. We have customized it a bit to give more interactive experience.
How to Setup
HTML Structure
<div class="calendar-wrap"> <div id="calendar"></div> </div>
CSS
<!-- Calendar CSS --> <link href="vendors/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet" type="text/css" />
JS
<!-- Fullcalendar JavaScript --> <script src="vendors/moment/min/moment.min.js"></script> <script src="vendors/jquery-ui.min.js"></script> <script src="vendors/fullcalendar/dist/fullcalendar.min.js"></script> <script src="dist/js/fullcalendar-data.js"></script>
Initialize
$('#calendar').fullCalendar({ ---- });
Brunette Email app is a web-based email client designed and developed exclusively for Brunette framework. It has a responsive design to work flawlessly across many devices.
How to Setup
HTML Structure
<div class="emailapp-wrap"> <div class="emailapp-sidebar"> <div class="nicescroll-bar"> <div class="emailapp-nav-wrap"> <!--Email app sidebar content--> </div> </div> </div> <div class="email-box"> <div class="emailapp-left"> <header> <!--Email app left content--> </header> <form role="search" class="email-search"> <!--Email app left content--> </form> <div class="emailapp-emails-list"> </div> </div> <div class="emailapp-right"> <header> <!--Email app right content--> </header> <div class="email-body"> <!--Email app body content--> </div> </div> </div> <!-- Compose email --> <div class="modal fade" id="exampleModalEmail" tabindex="-1" role="dialog" aria-labelledby="exampleModalEmail" aria-hidden="true"> <!--Email app compose email content--> </div> <!-- /Compose email --> </div>
JS
<!-- Tinymce JavaScript --> <script src="vendors/tinymce/tinymce.min.js"></script> <!-- Tinymce Wysuhtml5 Init JavaScript --> <script src="dist/js/tinymce-data.js"></script>
Credits
- Bootstrap framework
- http://getbootstrap.com/
- Jquery
- https://jquery.com/
- Material Design Iconic Font
- http://zavoloklom.github.io/material-design-iconic-font/icons.html
- Font-Awesome
- http://fortawesome.github.io/Font-Awesome/
- Themify
- https://themify.me/themify-icons
- linea-icon
- http://linea.io/
- Simple line icons
- simplelineicons.com
- Pe-7 icons
- http://themes-pixeden.com/font-demos/7-stroke/
- Sweet-Alert
- http://tristanedwards.me/sweetalert
- Nestable
- http://dbushell.com/
- Slimscroll
- http://rocha.la/jQuery-slimScroll
- Full Calendar
- http://arshaw.com/fullcalendar/
- Bootstrap-timepicker
- http://jdewit.github.com/bootstrap-timepicker
- Bootstrap Colorpicker
- http://www.eyecon.ro/bootstrap-colorpicker
- Multi-select
- http://loudev.com/
- Select2
- https://select2.github.io/
- Wysihtml5
- https://github.com/xing/wysihtml5
- Datatables
- https://www.datatables.net/
- Jsgrid
- http://js-grid.com/
- Morris
- http://morrisjs.github.io/morris.js/
- Chartjs
- http://chartjs.org/
- Sparkline
- http://omnipotent.net/jquery.sparkline/
- Google maps
- https://hpneo.github.io/gmaps/
- Vector Maps
- http://jqvmap.com/
- Pexels (images)
- https://pexels.com/
- Flot-charts
- http://www.flotcharts.org/
- Owl carousel
- http://owlgraphic.com/owlcarousel/
- Switchery
- https://github.com/abpetkov/switchery
- Bootstrap select
- https://github.com/silviomoreto/bootstrap-select
- Wysiwig Editor
- http://www.tinymce.com/
- Chartist chart
- https://gionkunz.github.io/chartist-js/