Introduction
Welcome to the documentation of Material style template. In this guide you will find everything needed to install and configure all aspects of the template.
Support and Suggestions
We are preparing a support center for all users of Material Style template. Meanwhile you can send all your questions to the following email: adrigm@razonartificial.com
It is recommended to always look in the manual to see if your question is resolved in the documentation.
Package Content
Package content is:
- HTML - Contains all final theme files ready to use, unless you want to configure anything to use the files in this folder.
- material-style-gulp - Contains the development version. Based on SCSS, Gulp, Bower and NPM. Ideal for developers and custom configurations.
- documentation - This document.
- uncompressed - All files css and js uncompressed.
HTML version
The assets folder contains all the necessary files separated into different folders: css, fonts, img and js. The other folders contains the same html elements in each of them, but processed for the twelve types of headers that offers Material Style.
Install template
- Upload the asset folder to your server.
- Choose a header type and upload the contents of the chosen folder to your server.
- Ready!
You should get something like this:
- www/
- assets/
- index.html
- blog-sidebar.html
- ...
Change color
You have two ways to do this:
Method 1 - Change head of html files
- Open an html file
- Find the following line:
<link rel="stylesheet" href="assets/css/style.light-blue-500.min.css" />
- Change light-blue by any color in the color list.
- You can change the brightness of the color with the values: 300, 400, 500, 600, 700 and 800
Color list
'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'grey', 'blue-grey'
Example:
<link rel="stylesheet" href="assets/css/style.red-700.min.css
Method 2 - Change stylesheet
If you do not want to change all html files, you can only change the stylesheet
- Go to
assets/css
folder. - Choose your stylesheet
- Rename to
style.light-blue-500.min.css
Gulp version (recommended)
The gulp version allows to generate a version of the custom template in a simple way.
Software
You need to install:
- Git - https://git-scm.com/
- Node - https://nodejs.org/
Once installed open the terminal and execute the following command.
npm install -g gulp-cli
Now follow the steps below to get a custom version.
- At the terminal, go to the material-style-gulp directory
- Run the following command:
npm install
- Use the
gulp dist
command to generate the project
Customize template
You can pass options to the gulp dist
command. The generated version is located inside the dist folder
Change color
gulp dist --color=red
You can pass any color from the list of colors.
'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'grey', 'blue-grey'
You can also change the brightness with:
gulp dist --color=red --shine=700
You can use the values: 300, 400, 500, 600, 700 and 800.
Change header
gulp dist --header=ms-header-white
You can use the values:
'ms-header-primary', 'ms-header-dark', 'ms-header-white'
Change navbar
gulp dist --navbar=ms-navbar-white
You can use the values:
'ms-navbar-primary', 'ms-navbar-dark', 'ms-navbar-white'
Navbar Mode
gulp dist --navbarMode=true
Combined options
You can combine all the options, for example:
gulp dist --color=indigo --shine=600 --header=ms-header-dark --navbar=ms-navbar-white
FAQ
How to get the fixed navbar?
- Search this line:
<div class="ms-site-container">
- Change for:
<div class="ms-site-container ms-nav-fixed">
-
Find the
navbar-static-top
class and change it tonavbar-fixed-top
.
Plugins
List of plugins used in the template:
- Bootstrap - http://getbootstrap.com/
- Font Awesome - http://fontawesome.io/
- Material Design Iconic Font - http://zavoloklom.github.io/material-design-iconic-font/
- Ionicons - http://ionicons.com/
- MixitUp - https://www.kunkalabs.com/mixitup/
- ChartJS - http://www.chartjs.org/
- Circles.js - https://github.com/lugolabs/circles
- Prism - http://prismjs.com/
- Animate.css - https://daneden.github.io/animate.css/
- WOW.js - http://mynameismatthieu.com/WOW/
- Masonry - http://masonry.desandro.com/
- Plyr - https://plyr.io/
- Countdown - http://hilios.github.io/jQuery.countdown/
- Owl Carousel - https://owlcarousel2.github.io/OwlCarousel2/
- Snackbar - http://www.polonel.com/snackbar/
- Slider Revolution - https://revolution.themepunch.com/
- Bootstrap Datepicker - https://bootstrap-datepicker.readthedocs.io
- Bootstrap Slider - http://seiyria.com/bootstrap-slider/
- Lightbox 2 - http://lokeshdhakar.com/projects/lightbox2/
Extra Content
You can download more videos and audios included in Slider Revolution at the following link: