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)



More Templates