Griffin 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 Griffin's UI components library, you can actually get more time on building stuff, rather than editing pixel distances. Griffin - 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.
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 └──
Use of these tools are completely optional.
npm install -g grunt-cliand npm 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:
If everything was installed correctly, you should see the jQuery version of Griffin running in http://localhost:9000/
Above all procedures are optional you can directly use the compiled file which we provided you.
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.
We implemented live Twitter Feed on Griffin, for that we used twitterFetcherthird party plugin.
<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>
<!-- Lightgallery CSS --> <link href="vendors/lightgallery/dist/css/lightgallery.min.css" rel="stylesheet" type="text/css">
<!-- 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>
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 spp is exclusive design for Griffin users , it provide you rich user experience.There are no external plugin dependencies.
<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 app is based on Fullcallendar js https://fullcalendar.io/. We have customized it a bit to give more interactive experience.
<div class="calendar-wrap"> <div id="calendar"></div> </div>
<!-- Calendar CSS --> <link href="vendors/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet" type="text/css" />
<!-- 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>
$('#calendar').fullCalendar({ ---- });
Griffin Email app is a web-based email client designed and developed exclusively for Griffin framework. It has a responsive design to work flawlessly across many devices.
<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>
<!-- Tinymce JavaScript --> <script src="vendors/tinymce/tinymce.min.js"></script> <!-- Tinymce Wysuhtml5 Init JavaScript --> <script src="dist/js/tinymce-data.js"></script>