CLARUS

Responsive Multipurpose Template

Welcome to Clarus Template Documentation

For any questions, please send message from profile contact form on this page https://theme.express/clarus/

This document covers installation and usage of this template and contains answers to common problems and issues - read this document thoroughly if you are meet any difficulties. If you have any questions that are beyond the scope of this document, feel free to post them in dedicated support section.

Template Features

• Clean & Simple Design
• Advance Bootstrap 4 Framework
• HTML5 & CSS3
• CSS3 Animations
• Fully Responsive Design
• Mutipurpose Concept
• All files are well commented
• Crossbrowser Compatible with IE9+, Firefox, Safari, Opera, Chrome
• Extensive Documentation

Go ahead to learn more.

After you unzip the download pack you'll find Template Folder with all necessary files.

You can view this Template in any browser, you can display or edit the Template without Internet connection.

Now open your FTP Client (like Filezilla) or directly through cpanel, upload the content of the Template on your server root.

Once upload of the files is completed go to www.yourdomainname.com/index.html

HTML Structure

This template has responsive layout and is based on Bootstrap Framework. For more information about this please visit Bootstrap.

The default Bootstrap grid system utilizes 12 columns making 1170px wide container without responsive features enabled. With responsive CSS file added the grid adapts to 724px and 1170px wide container depending on your viewport. Below 767px viewports the columns become fluid and stack vertically.

Basic Grid HTML

For a simple two column layout create a .container and add appropriate number of .col-md* columns.

In the example below there are .col-md-4 and .col-md-8, for 12 total columns and a complete row.

    
...
    
...

Nesting Columns

To nest your content with default grid add a new .container and set of .col-md* columns within existing .col-md* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

    

        Level 1 column
        

            
Level 2
            
Level 2
        
    

    

        Level 2 column
    

These are css files located in Head section.

Don't change anything in bootstrap.css file. It may affect the whole template.

These are JS files located at the very end of Body section.

Let's start updating the template. Open index.html file and follow the steps described below.

Header - Logo

1. Replace your company logo here.

Navmenu

This is the basic structure.

	

		

			

				Home
			
			

				About
			
			

				Services
			
			

				Pricing
			
			

				Blog
			
			

				Contact
			
		
	

1. Replace "About", "Services" etc. with names of your menu items and "#about", "#services" etc. correspondingly.

Swiper Slider

Click here for the Swiper Slider documentation.

Blog Content

    

        

            
				
				
					
				
				
			  
            
        
        
new ection reading
        

            
15/05/16
            
John Mitcher
            

                
5 
                
9 
            
        
        

            
Duis commodo risus et magna suscipit aliquam. Curabitur gravida efficitur purus. Pellentesque finibus neque sit amet justo volutpat porttitor
        
    

1. Replace img/news_item_1.jpg with link to the image of the post.
2. Replace # with link to detail page of the post.
3. Replace new ection reading with title of the post.
4. Replace 15/05/16 with date of the post.
5. Replace John Mitcher with name of author of the post.
6. Replace 5 with number of likes of the post.
7. Replace 9 with number of comments to the post.
8. Replace Duis commodo risus et magna suscipit aliquam. Curabitur gravida efficitur purus. Pellentesque finibus neque sit amet justo volutpat porttitor with short info from the post.

Content Block

    

    

        
Maecenas sit amet ex at est suscipit egestas. Curabitur et felis mattis, finibus nisi at, luctus tortor. Phasellus ac congue nis vestibulum sed convallis libero
           	
        
    

1. Replace "img/testi_item_1.jpg" with your image.
2. Replace Maecenas sit amet ex at est suscipit egestas. Curabitur et felis mattis, finibus nisi at, luctus tortor. Phasellus ac congue nis vestibulum sed convallis libero with testimonial.
3. Replace nataly dunkins with name of author of the testimonial.
4. Replace Seo maneger with position of author of the testimonial.

Footer

    
    

        
198 West 21th Street, Suite 721, New York NY
        
5109 Pacific Coast Highway, Los Angeles CA
    
    Email: youremail@yourdomain.com
    Phone: +88 (0) 101 0000 000

1. Replace 198 West 21th Street, Suite 721, New York NY with your address.
2. Replace youremail@yourdomain.com with your email.
3. Replace mailto: in Email with mailto:(your email).
4. Replace +88 (0) 101 0000 000 with your phone number.
5. Replace tel: in Phone with tel:(your phone number).

    © 2015 All rights reserved. Development with byElectricBlaze

1. Replace ElectricBlaze with name of development company.
2. Replace # with link to development company.

Fonts used in the template are free:

1. Raleway
2. Poppins

Images in live preview are not included to the template.