4. Files
We list the necessary styles and scripts that you can use in a page in this section.
4.1 Styles
You should include stylesheet files below within <head> tag.
Bootstrap and site stylesheets
<link rel="stylesheet" href="../../global/css/bootstrap.min.css">
<link rel="stylesheet" href="../../global/css/bootstrap-extend.min.css">
<link rel="stylesheet" href="../assets/css/site.min.css">
Necessary plugin stylesheets
<link rel="stylesheet" href="../../global/vendor/animsition/animsition.css">
<link rel="stylesheet" href="../../global/vendor/asscrollable/asScrollable.css">
<link rel="stylesheet" href="../../global/vendor/switchery/switchery.css">
<link rel="stylesheet" href="../../global/vendor/slidepanel/slidePanel.css">
<link rel="stylesheet" href="../../global/vendor/flag-icon-css/flag-icon.css">
Icon stylesheets
<link rel="stylesheet" href="../../global/fonts/web-icons/web-icons.min.css">
<link rel="stylesheet" href="../../global/fonts/brand-icons/brand-icons.min.css">
Font stylesheets
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,300italic'>
Note: You can use another fonts by edit src/scss/_vars.scss file.
4.2 Javascript
Ie polyfill/shiv
You should add scripts below within <head> tag if you want support ie 9/10.
<!--[if lt IE 9]>
<script src="../../global/vendor/html5shiv/html5shiv.min.js"></script>
<![endif]-->
<!--[if lt IE 10]>
<script src="../../global/vendor/media-match/media.match.min.js"></script>
<script src="../../global/vendor/respond/respond.min.js"></script>
<![endif]-->
Scripts in head
Breakpoints will setup media query breakpoints with js.
<script src="../../global/vendor/breakpoints/breakpoints.js"></script>
<script>
Breakpoints();
</script>
Scipts at bottom
Core and plugin dependencies
<script src="../../global/vendor/babel-external-helpers/babel-external-helpers.js"></script>
<script src="../../global/vendor/jquery/jquery.js"></script>
<script src="../../global/vendor/popper-js/umd/popper.min.js"></script>
<script src="../../global/vendor/bootstrap/bootstrap.js"></script>
<script src="../../global/vendor/animsition/animsition.js"></script>
<script src="../../global/vendor/mousewheel/jquery.mousewheel.js"></script>
<script src="../../global/vendor/asscrollbar/jquery-asScrollbar.js"></script>
<script src="../../global/vendor/asscrollable/jquery-asScrollable.js"></script>
<script src="../../global/vendor/ashoverscroll/jquery-asHoverScroll.js"></script>
Template relating scripts
<script src="../../global/js/Component.js"></script>
<script src="../../global/js/Plugin.js"></script>
<script src="../../global/js/Base.js"></script>
<script src="../../global/js/Config.js"></script>
<script src="../assets/js/Section/Menubar.js"></script>
<script src="../assets/js/Section/GridMenu.js"></script>
<script src="../assets/js/Section/Sidebar.js"></script>
<script src="../assets/js/Section/PageAside.js"></script>
<script src="../assets/js/Plugin/menu.js"></script>
Template config scripts
<script src="../../global/js/config/colors.js"></script>
<script>
Config.set('assets', '../assets');
</script>
Template initialise script
By adding the script below, it will initialise the template functions. We explain this more in the following sections.
<script src="../assets/js/Site.js"></script>
<script>
(function(document, window, $) {
'use strict';
var Site = window.Site;
$(document).ready(function() {
Site.run();
});
})(document, window, jQuery);
</script>
4.3 Skins
The skins css is under (layout)/assets/skins/ folder. If you want change the skin of the template to another color, you can include the color's css file after assets/css/site.css file before <head>.
The code below will use red skin.
<link href="../assets/skins/red.css" rel="stylesheet" type="text/css">
If you want customize the colors or create a new skin, you can customize the skin's scss file on (layout)/src/skins/ folder. After done, using gulp skins.