Sylvester is a Bootstrap 4.4.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 Sylvester's UI components library, you can actually get more time on building stuff, rather than editing pixel distances. Sylvester - 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-cli and npm install grunt --save-devAfter 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 Sylvester 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-nav class with hk-wrapper.
For Horizontal navigation you have to first add hk-horizontal-nav class with hk-wrapper.
For vertical alt navigation you have to first add hk-alt-nav class with hk-wrapper.
For this menu style you have to add hk-navbar-alt class with navbar
For light & dark menu you can add hk-nav-light or hk-nav-dark with hk-nav class.
For Scrollable Navigation please add scrollable-nav class with hk-wrapper.
We implemented live Twitter Feed on Sylvester, for that we used twitterFetcher third 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="../vendors4/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="../vendors4/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": ''},
"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 Sylvester 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="../vendors4/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet" type="text/css" />
<!-- Fullcalendar JavaScript --> <script src="../vendors4/moment/min/moment.min.js"></script> <script src="../vendors4/jquery-ui.min.js"></script> <script src="../vendors4/fullcalendar/dist/fullcalendar.min.js"></script> <script src="dist/js/fullcalendar-data.js"></script>
$('#calendar').fullCalendar({
----
});
Sylvester Email app is a web-based email client designed and developed exclusively for Sylvester 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="../vendors4/tinymce/tinymce.min.js"></script> <!-- Tinymce Wysuhtml5 Init JavaScript --> <script src="dist/js/tinymce-data.js"></script>