Vah HTML5 Multipurpose Responsive Template
HTML5 Multipurpose Responsive Template. Handcrafet tempalte that suits for Business, Digital Agency, Personal templates, etc...
Techmates 28 Jul, 2020 1445
Vah is an HTML5 multipurpose responsive template. The template can be used as a business template, digital agency template, personal, portfolio template, and general-purpose template.
The template is free for personal as well as commercial use.
Features
- Neat and clean design
- Easy customization
- Responsive
- Cross-browser compatible
- Multiple color schemes
- CSS & Stylus files
- Lightweight
-: Customization Options:-
Here is a simple guide on editing HTML elements suitable to your need.
Layouts
It is very easy to change between the different header and body layouts. You just need to add a classes to <nav> and <body> tags:
Layout Container Customization:
- Full-Width Layout
- Boxed Layout
The template has 4 color schemes.
1- Default
2- Dark
3- Skin 1
4- Skin 2
You can choose your favorite one. Also, you can customize the color themes according to your project.
Layout Skin Customization(Template Color Customization):
Default Layout
The theme will load style.css file by default.
<link rel="stylesheet" type="text/css" href="assets/css/style.css">Change the theme to Dark layout
In the header section, you have to replace the default CSS(style.css) file with the style-dark.css file.
<link rel="stylesheet" type="text/css" href="assets/css/style-dark.css">Manual Customization
Using the stylus, you can generate your own desired template skin. To do so, you need to modify the stylus(variable.styl) file.
- The first step makes sure the Stylus bundle is properly running on your machine.
- Change the values of variables named $primary-clr, $hover-clr, $gradient-color1, $gradient-color2 according to your requirements.
- On your project root, build the css file from stylus from your command line utility:
$~: stylus ../assets/stylus/style-default.styl -o ./assets/css/style-skin-name.css- Above command will generate the css file named style-skin-name.css inside css folder.
- In the header section, you can replace the default CSS(style.css) file with the style-skin-name.css file. You can use the following code to change the skin in the header area:
<link rel="stylesheet" type="text/css" href="assets/css/style-skin-name.css">The sequence must be followed to customize your required output.
Default Stylus Files
- font.styl (Include fonts)
- variables.styl (For variables)
- theme.styl (For color theme)
- common.styl (Common CSS)
- media.styl (Media Query)
Also, check the documentation here for more details.
Credits / Resources
- jQuery (https://www.jquery.com)
- Mulish Google Font (https://fonts.google.com)
- Unsplash Photos (https://www.unsplash.com)
- Pexels Photos (https://www.pexels.com)
- Stylus (https://www.stylus-lang.com)
- Animate CSS (https://www.daneden.github.io/animate.css)
