Kumo - Fashion E-commerce HTML Template Documentation

1. Introduction

Kumo is responsive e-commerce HTML template designed for fashion store, Clothing market, shopping, grocery, food, furniture and wholesale market and similar websites.


We put a lot of love and effort to make Kumo a useful template for everyone and now It comes with 8+ unique home page & colors. We are keen to release continuous long term updates and lots of new features will be coming soon in the future releases. Once you purchased Kumo Template, you will be entitled to free download of all future updates for the same license.


Author: Themezhub
Contact: Themezhub@gmail.com
website: https://Themezhub.com

NOTE: A single license can be used only for one domain or client. Each use of the template requires a separate license. We hope you will follow the rules as it will help us to continue supporting our template and providing a free future updates.

1.2 Installation Guide

This is the simple static HTML template so no need any headech to install it.

Follow it very simple steps:

Main(demo folder) + assets (folder) = Enjoy your demo.

3. Beginning of Page

Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions.


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="www.frebsite.nl" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		
		<title>Kumo - Fashion E-commerce HTML Template</title>
		 
		<!-- Custom CSS -->
		<link href="assets/css/styles.css" rel="stylesheet">
		
	</head>

Page Title


<!-- ============================ Page Title Start================================== -->
<section class="page-title">
	<div class="container">
		<div class="row">
			<div class="col-lg-12 col-md-12">
				
				<div class="breadcrumbs-wrap">
					<h1 class="breadcrumb-title">Who We are?</h1>
					<nav aria-label="breadcrumb">
						<ol class="breadcrumb">
							<li class="breadcrumb-item"><a href="#">Home</a></li>
							<li class="breadcrumb-item active" aria-current="page">About Us</li>
						</ol>
					</nav>
				</div>
				
			</div>
		</div>
	</div>
</section>
<!-- ============================ Page Title End ================================== -->	

Product Style 1

	
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
	<div class="product_grid card b-0">
	<div class="badge bg-info text-white position-absolute ft-regular ab-left text-upper">New</div>
	<button class="btn btn_love position-absolute ab-right snackbar-wishlist"><i class="far fa-heart"></i></button> 
	<div class="card-body p-0">
		<div class="shop_thumb position-relative">
			<a class="card-img-top d-block overflow-hidden" href="shop-single-v1.html"><img class="card-img-top" src="assets/img/product/2.jpg" alt="..."></a>
			<div class="product-hover-overlay bg-dark d-flex align-items-center justify-content-center">
				<div class="edlio"><a href="#" data-toggle="modal" data-target="#quickview" class="text-white fs-sm ft-medium"><i class="fas fa-eye mr-1"></i>Quick View</a></div>
			</div>
		</div>
	</div>
	<div class="card-footers b-0 pt-3 px-2 bg-white d-flex align-items-start justify-content-center">
		<div class="text-left">
			<div class="text-center">
				<h5 class="fw-bolder fs-md mb-0 lh-1 mb-1"><a href="shop-single-v1.html">Formal Men Lowers</a></h5>
				<div class="elis_rty"><span class="text-muted ft-medium line-through mr-2">$129.00</span><span class="ft-bold theme-cl fs-md">$79.00</span></div>
			</div>
		</div>
	</div>
</div>
</div>	
	
	

Product Style 2

	
<div class="product_grid card b-0">
	<div class="badge bg-info text-white position-absolute ft-regular ab-left text-upper">Sale</div>
	<div class="badge bg-danger text-white position-absolute ft-regular ab-right text-upper">-40%</div>
	<div class="card-body p-0">
		<div class="shop_thumb position-relative">
			<a class="card-img-top d-block overflow-hidden" href="shop-single-v1.html"><img class="card-img-top" src="assets/img/product/2.jpg" alt="..."></a>
			<div class="product-hover-overlay d-flex align-items-center justify-content-between">
				<div class="edlio"><a href="javascript:void(0);" class="text-underline fs-sm ft-bold snackbar-addcart">Add To Cart</a></div>
				<div class="edlio d-flex align-items-center">
					<button class="btn auto btn_love mr-2 snackbar-wishlist"><i class="far fa-heart"></i></button>
					<a href="#" class="text-underline" data-toggle="modal" data-target="#quickview"><i class="fas fa-expand-arrows-alt"></i></a>
				</div>
			</div>
		</div>
	</div>
	<div class="card-footer b-0 p-0 pt-2 bg-white d-flex align-items-start justify-content-between">
		<div class="text-left">
			<div class="text-left">
				<div class="star-rating align-items-center d-flex justify-content-left mb-1 p-0">
					<i class="fas fa-star"></i>
					<i class="fas fa-star"></i>
					<i class="fas fa-star"></i>
					<i class="fas fa-star"></i>
					<i class="fas fa-star"></i>
					<span class="small">(0 Reviews)</span>
				</div>
				<h5 class="fs-md mb-0 lh-1 mb-1"><a href="shop-single-v1.html">Boys Solid Sweatshirt</a></h5>
				<div class="elis_rty"><span class="ft-bold text-dark fs-sm">$129</span></div>
			</div>
		</div>
	</div>
</div>
	
	

Product Style 3

	
<div class="product_grid card b-0">
	<div class="badge bg-info text-white position-absolute ft-regular ab-left text-upper">Sale</div>
	<div class="badge bg-danger text-white position-absolute ft-regular ab-right text-upper">-40%</div>
	<div class="card-body p-0">
		<div class="shop_thumb position-relative">
			<a class="card-img-top d-block overflow-hidden" href="shop-single-v1.html"><img class="card-img-top" src="assets/img/product/16.png" alt="..."></a>
			<div class="product-left-hover-overlay">
				<ul class="left-over-buttons">
					<li><a href="javascript:void(0);" class="d-inline-flex circle align-items-center justify-content-center"><i class="fas fa-expand-arrows-alt position-absolute"></i></a></li>
					<li><a href="javascript:void(0);" class="d-inline-flex circle align-items-center justify-content-center snackbar-wishlist"><i class="far fa-heart position-absolute"></i></a></li>
					<li><a href="javascript:void(0);" class="d-inline-flex circle align-items-center justify-content-center snackbar-addcart"><i class="fas fa-shopping-basket position-absolute"></i></a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="card-footer b-0 p-0 pt-2 bg-white d-flex align-items-start justify-content-between">
		<div class="text-left">
			<div class="text-left">
				<div class="star-rating align-items-center d-flex justify-content-left mb-1 p-0">
					<i class="fas fa-star"></i>
					<i class="fas fa-star"></i>
					<i class="fas fa-star"></i>
					<i class="fas fa-star"></i>
					<i class="fas fa-star"></i>
					<span class="small">(0 Reviews)</span>
				</div>
				<h5 class="fs-md mb-0 lh-1 mb-1"><a href="shop-single-v1.html">Boys Solid Sweatshirt</a></h5>
				<div class="elis_rty"><span class="ft-bold text-dark fs-sm">$129</span></div>
			</div>
		</div>
	</div>
</div>
	
	

Product Style 4

	
<div class="product_grid card b-0">
	<div class="badge bg-danger text-white position-absolute ft-regular ab-left text-upper">Hot</div>
	<div class="card-body p-0">
		<div class="shop_thumb position-relative">
			<a class="card-img-top d-block overflow-hidden" href="shop-single-v1.html"><img class="card-img-top" src="assets/img/product/6.jpg" alt="..."></a>
			<div class="product-hover-overlay bg-dark d-flex align-items-center justify-content-center">
				<div class="edlio"><a href="#" data-toggle="modal" data-target="#quickview" class="text-white fs-sm ft-medium"><i class="fas fa-eye mr-1"></i>Quick View</a></div>
			</div>
		</div>
	</div>
	<div class="card-footer b-0 p-0 pt-2 bg-white">
		<div class="d-flex align-items-start justify-content-between">
			<div class="text-left">
				<div class="form-check form-option form-check-inline mb-1">
					<input class="form-check-input" type="radio" name="color6" id="white6">
					<label class="form-option-label small rounded-circle" for="white"><span class="form-option-color rounded-circle blc1"></span></label>
				</div>
				<div class="form-check form-option form-check-inline mb-1">
					<input class="form-check-input" type="radio" name="color6" id="blue6">
					<label class="form-option-label small rounded-circle" for="blue6"><span class="form-option-color rounded-circle blc7"></span></label>
				</div>
				<div class="form-check form-option form-check-inline mb-1">
					<input class="form-check-input" type="radio" name="color6" id="yellow6">
					<label class="form-option-label small rounded-circle" for="yellow6"><span class="form-option-color rounded-circle blc3"></span></label>
				</div>
				<div class="form-check form-option form-check-inline mb-1">
					<input class="form-check-input" type="radio" name="color6" id="pink6">
					<label class="form-option-label small rounded-circle" for="pink6"><span class="form-option-color rounded-circle blc6"></span></label>
				</div>
			</div>
			<div class="text-right">
				<button class="btn auto btn_love snackbar-wishlist"><i class="far fa-heart"></i></button> 
			</div>
		</div>
		<div class="text-left">
			<h5 class="fw-bolder fs-md mb-0 lh-1 mb-1"><a href="shop-single-v1.html">Fancy Salwar Suits</a></h5>
			<div class="elis_rty"><span class="ft-bold text-dark fs-sm">$99 - $129</span></div>
		</div>
	</div>
</div>
	
	

Category Style 1

	
<div class="single_cats">
	<a href="#" class="cards card-overflow card-scale lg_height">
		<div class="bg-image" style="background:url(assets/img/b-8.png)no-repeat;"></div>
		<div class="ct_body">
			<div class="ct_body_caption left">	
				<h2 class="m-0 ft-bold lh-1 fs-md text-upper">Women Clothes</h2>
				<span>3272 Items</span>
			</div>
			<div class="ct_footer left">
				<span class="stretched-link fs-md">Browse Items <i class="ti-arrow-circle-right"></i></span>
			</div>
		</div>
	</a>
</div>
	
	

Custom Js Settings

Below js code is used for theme setting , Change hover to click Menu(assets/js/custom.js)


var o = {
	responsive: !0,
	mobileBreakpoint:992,
	showDuration: 300,
	hideDuration: 300,
	showDelayDuration: 0,
	hideDelayDuration: 0,
	submenuTrigger: "hover",
	effect: "fade",
	submenuIndicator: !0,
	hideSubWhenGoOut: !0,
	visibleSubmenusOnMobile: !1,
	fixed: !1,
	overlay: !0,
	overlayColor: "rgba(0, 0, 0, 0.5)",
	hidden: !1,
	offCanvasSide: "left",
	onInit: function() {},
	onShowOffCanvas: function() {},
	onHideOffCanvas: function() {}
},

Please open and edit map.js inside assets/js/map.js for map integration.

var locations = [
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.72956781, -73.99726866, 0, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.76221766, -73.96511769, 1, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.88496706, -73.88191222, 2, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.72228267, -73.99246214, 3, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.94982541, -73.84357452, 4, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.90261483, -74.15737152, 5, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.79145927, -74.08252716, 6, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.58423508, -73.96099091, 7, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.58110616, -73.97678375, 8, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.73112881, -74.07897948, 9, markerIcon],
	[locationData('https://via.placeholder.com/128x128', '#', 'Save', 'job-detail.html', 'Junior Web Developer In Google Crunchapps New York, NY', 'Google', "2 "), 40.67386831, -74.10438536, 10, markerIcon],
];

Font Family

We have used google fonts for the template you can change whatever font you wish


@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Muli:300,400,600,700');

font-family: 'Muli', sans-serif;
font-family: 'Jost', sans-serif;

Helper Classes

Float Classes

Class Description
.fl-left Element to the left (float:left).
.fl-right Element to the right(float:right).
.fl-none To Clear floats.(clreafix)
Class Description
.d-intable Element to the display inline table (display:inline-table).
.d-table Element to the display inline (display:inline).
.d-block Element to the display block (display:block).

Text Color Classes

Class Description
.cl-info Nullam id dolor id nibh ultricies vehicula ut id elit.
.cl-primary Nullam id dolor id nibh ultricies vehicula ut id elit.
.cl-danger Nullam id dolor id nibh ultricies vehicula ut id elit.
.cl-warning Nullam id dolor id nibh ultricies vehicula ut id elit.
.cl-success Nullam id dolor id nibh ultricies vehicula ut id elit.
.cl-purple Nullam id dolor id nibh ultricies vehicula ut id elit.
.cl-default Nullam id dolor id nibh ultricies vehicula ut id elit.

Padding Classes

Class Description
.p-51 Padding will be 0px from all side.
.p-2 Padding will be 5px from all side.
.p-3 Padding will be 10px from all side.
.p-4 Padding will be 15px from all side.
..... ......
.p-5 Padding will be 50px from all side.

Padding Left Classes

Class Description
.p-l-0 Padding left will be 0px.
.p-l-1 Padding left will be 5px.
.p-l-2 Padding left will be 10px.
.p-l-3 Padding left will be 15px.
..... ......
.p-l-5 Padding left will be 50px.

Padding Right Classes

Class Description
.p-r-0 Padding right will be 0px.
.p-r-1 Padding right will be 0px.
.p-r-2 Padding right will be 10px.
.p-r-3 Padding right will be 15px.
..... ......
.p-r-5 Padding right will be 50px.

Padding Top Classes

Class Description
.p-t-0 Padding top will be 0px.
.p-t-1 Padding top will be 5px.
.p-t-2 Padding top will be 10px.
.p-t-3 Padding top will be 15px.
..... ......
.p-t-5 Padding top will be 50px.

Padding Bottom Classes

Class Description
.p-b-0 Padding bottom will be 0px.
.p-b-1 Padding bottom will be 5px.
.p-b-2 Padding bottom will be 10px.
.p-b-3 Padding bottom will be 15px.
..... ......
.p-b-5 Padding bottom will be 50px.

Margin Classes

Class Description
.m-0 Margin will be 0px from all side.
.m-1 Margin will be 5px from all side.
.m-2 Margin will be 10px from all side.
.m-3 Margin will be 15px from all side.
..... ......
.m-5 Margin will be 50px from all side.

Margin Left Classes

Class Description
.m-l-0 Padding left will be 0px.
.m-l-1 Padding left will be 5px.
.m-l-2 Padding left will be 10px.
.m-l-3 Padding left will be 15px.
..... ......
.m-l-5 Padding left will be 50px.

Margin Right Classes

Class Description
.m-r-0 Margin Right will be 0px.
.m-r-1 Margin Right will be 5px.
.m-r-2 Margin Right will be 10px.
.m-r-3 Margin Right will be 15px.
..... ......
.m-r-5 Margin Right will be 50px.

Margin Top Classes

Class Description
.m-t-0 Margin top will be 0px.
.m-t-1 Margin top will be 5px.
.m-t-2 Margin top will be 10px.
.m-t-3 Margin top will be 15px.
..... ......
.m-t-5 Margin top will be 50px.

Border Classes

Class Description
.br Border 1px all side
.bl-1 Border left 1px
.bl-2 Border left 2px
.bl-3 Border left 3px
.bl-4 Border left 4px

Border Top Classes

Class Description
.bt-1 Border top 1px
.bt-2 Border top 2px
.bt-3 Border top 3px
.bt-4 Border top 4px

Border Bottom Classes

Class Description
.bb-1 Border bottom 1px
.bb-2 Border bottom 2px
.bb-3 Border bottom 3px
.bb-4 Border bottom 4px

Height Classes

Class Description
.height-10 Height 10px
.height-20 Height 20px
.height-30 Height 30px
..... ....
.height-450 Height 450px

Light Height Classes

Class Light Height
.line-height-10 line height 10px
.line-height-12 line height 12px
.line-height-14 line height 14px
... ....
.line-height-450 line height 450px

Width Classes

Class Description
.width-full Width Full
.width-30 Width 30px
.width-40 Width 40px
.width-50 Width 50px
...... .....
.width-300 Width 300px

Font Size & Weight Classes

Class Description
.font-10 Font Size 10px
.font-12 Font Size 12px
.font-14 Font Size 14px
..... ....
.font-100 Font Size 100px
.font-light Font Weight light
.font-midium Font Weight medium
.font-normal Font Weight normal
.font-italic Font style italic

Background Classes

Class Light Height
.bg-info background Info
.bg-primary background Primary
.bg-danger background Danger
bg-warning background Warning
.bg-success background Success
.bg-default background Default
.bg-secondary background Secondary
.bg-light background Inverse

Light Background Classes

Class Description
.bg-info-light background light info
.bg-primary-light background light primary
.bg-danger-light background light danger
.bg-warning-light background light warning
bg-success-light background light success
.bg-purple-light background light purple

Folder Structure

we follow simple structure for the template


HTML
  ├── 
  │   └── full-kumo-template/
  │     └── _documentation
  |
  |		└── _html
  |			└── All HTML Files
  |
  │	    	└── assets/
  │       		└── Css
  │            		└── Style.css
  │       		└── Js
  │            		└── custom.js
  |		  		└── img
  │            		└── All Images
  └── 

Content

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table. check the official website grid page
Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.


Example: Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a default grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Example: Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Example: Mobile, tablet, desktops

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.
.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offsetting columns

Move columns to the right using .offset-md--* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

Icons

Below is the table of icon fonts used in this template.

Icon Name Example
Font-awesome <i class="fa fa-icon-name"></i>
Simple Line Icons <i class="icon-name_of_icon"></i>
Themify Icons <i class="ti-icon-name"></i>

Table


<table class="table table-bordered">
	<thead>
		<tr>
			<th>Row</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Email</th>
			<th>Contact</th>
			<th>Registerd</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>John</td>
			<td>Carter</td>
			<td>johncarter@mail.com</td>
			<td>+91 235 658 7458</td>
			<td>Aug 10 2017</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Peter</td>
			<td>Parker</td>
			<td>peterparker@mail.com</td>
			<td>+91 235 658 7458</td>
			<td>Aug 10 2017</td>
		</tr>
		<tr>
			<td>3</td>
			<td>John</td>
			<td>Rambo</td>
			<td>johnrambo@mail.com</td>
			<td>+91 235 658 7458</td>
			<td>Aug 10 2017</td>
		</tr>
		<tr>
			<td>3</td>
			<td>John</td>
			<td>Rambo</td>
			<td>johnrambo@mail.com</td>
			<td>+91 235 658 7458</td>
			<td>Aug 10 2017</td>
		</tr>
		<tr>
			<td>3</td>
			<td>John</td>
			<td>Rambo</td>
			<td>johnrambo@mail.com</td>
			<td>+91 235 658 7458</td>
			<td>Aug 10 2017</td>
		</tr>
		<tr>
			<td>3</td>
			<td>John</td>
			<td>Rambo</td>
			<td>johnrambo@mail.com</td>
			<td>+91 235 658 7458</td>
			<td>Aug 10 2017</td>
		</tr>
		<tr>
			<td>3</td>
			<td>John</td>
			<td>Rambo</td>
			<td>johnrambo@mail.com</td>
			<td>+91 235 658 7458</td>
			<td>Aug 10 2017</td>
		</tr>
	</tbody>
</table>

27. Free support

If you have any type of query or support needed, feel free to contact us by mail or message to themezhub@gmail.com

Thank you