Clab Documentation

Introduction

Clab is a component and block based responsive multipurpose HTML5 template which is powered by the bootstrap 4 frameworks. The name Clab comes from Component Lab. Clab is basically a large laboratory of components collection. It was focused on modern design, ultra clean look and functional interface that delivers a bold visual experience. Clean code and easy development process is the key strength of clab. 180+ beautiful pre-made component and block will boost your workflow and help to build your product landing pages, detailed web-apps, stylish company websites and many more.

You don't need to write too much code to create your project with club. We already prepared all block and components for you. Just choose the perfect and best fit component and copy the code to your project. And your template is ready. Just super easy.

20+ stunning and unique demos are included with the template like products landing page, agency, insurance, portfolio, business, corporate, creative, charity, gym and fitness, job listing, startup, travel and many more.

Clab is a super fast loading template ever. The speed score is an average of 95% based on Google PageSpeed Insights. Make your website or your web application faster loading to satisfy your visitors.

Clab team loves to provide high standard support and prompt bug fixes as well as general troubleshooting. The team is standing by for any kind of customization support.

Core Features

• - Bootstrap 4.3.x
• - jQuery v3.3.1
• - SASS integration
• - Gulp task supported
• - Retina Ready
• - 180+ Unique components & Block
• - 20+ Stunning Demos
• - 110+ Page Templates
• - 6 Different Footers
• - Font Awesome Icon
• - Clab Custom Icon
• - Google Web Font
• - Twitter feed integration
• - Custom Mega Menu
• - Isotope Filtering
• - Various portfolio style (Grid, Masonry, Title, Gutter, Gutter less)
• - Creative Blog and Articles
• - E-commerce layouts with checkout and cart
• - Owl Carousel v2.3.4
• - Magnific Popup
• - W3C Validation
• - Parralax Background
• - Clean Code
• - Highly Customizable
• - SEO Friendly
• - Modern & Trendy Design
• - Details Documentation
• - Quick Support

Folder Structure

Following is the Clab folder/file structure. When you unzip the downloadable file you'll get the following files.

.
├── assets
│   ├── css/
│   │   ├── main.css
|   │   ├── main.min.css
│   ├── dev/
│   │   ├── js/
│   │   ├── sass/
│   ├── img/
│   ├── js/
│   │   ├── scripts.js
│   │   ├── scripts.min.js
│   ├── vendor/
│   │   ├── all third party plugins
├── gulpfile.js
├── package.json
├── index.html
└── others .html files

assets Folder

This folder contains css, dev, img, js and vendor files.

css Folder

This folder contains both minified and expanded versions of CSS. This file was compiled by dev/sass folder.

dev Folder

This folder contains js and sass files for development mode. This file will be working when you are using gulp task. After running gulp command on terminal, you can write your all js initialization into dev/js file and write sass code into dev/sass file. This js and sass code will be automatically compiled and set assets/js folder and assets/css folder accordingly with minified version. Which you have to include in your html file.

img Folder

This folder contains all demo images

vendor Folder

This folder contains all third party plugins such as Bootstrap, jQuery, owl carousel and so on.

Gulp Task

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

Installing gulp

In order to utilize Node.js on your computer. Also ensure that you have NPM (node packaged modules) installed.

Run the following commands

• Install gulp globally by running the command npm install -g gulp
• Navigate to the root directory of your project, then run npm install.

Once you have successfully setup now you can use npm install gulp-cli -g commands to automate your task.

Command

gulp

For development we set a gulp command that will compile the assets/dev folder to assets/css and assets/js folder then start a local Browsersync instance on port 3000 to serve and auto-refresh your pages as you edit.

SASS

Sass is a CSS pre-processor, the most mature, stable, and powerful professional grade CSS extension language in the world; adding features that allow variables, mixins, functions. Clab supports Sass.

Sass Files are found under assets/dev/sass

.
├── assets
│   ├── dev/
│   │   ├── sass/
│   │   │   ├── components
│   │   │       ├── _accordion.scss
│   │   │       ├── _block-img.scss
│   │   │       ├── _blog.scss
│   │   │       ├── _blurb.scss
│   │   │       ├── _buttons.scss
│   │   │       ├── _card.scss
│   │   │       ├── _carousel.scss
│   │   │       ├── _countdown.scss
│   │   │       ├── _floating-kit.scss
│   │   │       ├── _form.scss
│   │   │       ├── _hero-banner.scss
│   │   │       ├── _list-group.scss
│   │   │       ├── _portfolio.scss
│   │   │       ├── _progress-bar.scss
│   │   │       ├── _shop.scss
│   │   │       ├── _steps.scss
│   │   │       ├── _table.scss
│   │   │       ├── _tabs.scss
│   │   │       ├── _team.scss
│   │   │       ├── _twitter.scss
│   │   │       ├── _typed.scss
│   │   │   ├── _bs-reset.scss
│   │   │   ├── _footer.scss
│   │   │   ├── _header.scss
│   │   │   ├── _overlay-nav.scss
│   │   │   ├── _type.scss
│   │   │   ├── _utilities.scss
│   │   │   ├── _variables.scss
│   │   │   ├── _main.scss

Utility Classes

Background Color

bg-gray

bg-white

bg-dark

bg-dark-alt

bg-green-light

gradient-primary

Class Name	Size
.bg-gray	#f0f1f4
.bg-white	#ffffff
.bg-dark	#242424
.bg-dark-alt	#303030
.bg-green-light	#d7f5e3
.gradient-primary	#287dfe #7431ff

Floating Tags Position

EOM

ft-inside-tl

EOM

ft-inside-tr

EOM

ft-inside-bl

EOM

ft-inside-br

EOM

ft-overflow-tl

EOM

ft-overflow-tc

EOM

ft-overflow-tr

EOM

ft-overflow-bl

EOM

ft-overflow-bc

EOM

ft-overflow-br

Example Code

.ft-tag class will be set floating tag by default. Make sure parent div must be position: relative;. Now for the position of floating tag helper class will be set beside of ft-tag like the following code.

<div class="position-relative">
    <div class="ft-tag ft-inside-br" data-toggle="tooltip" data-placement="top" title="Employee of the month">EOM</div>
    <img class="card-img-top" src="assets/img/avatar1.jpg" alt="">
</div>

Opacity

.opacity-30

.opacity-40

.opacity-50

.opacity-60

.opacity-70

.opacity-80

.opacity-90

.opacity-100

Class Name	Opacity level
opacity-30	.3
opacity-40	.4
opacity-50	.5
opacity-60	.6
opacity-70	.7
opacity-80	.8
opacity-90	.9
opacity-100	1

Avatar Thumb Size

Class Name	Size
.avatar-sm	35px X 35px
.avatar-md	70px X 70px
.avatar-lg	140px X 140px

Icon Size

Class Name	Size
.icon-sm	28px
.icon-md	42px
.icon-lg	56px

Letter Spacing

Class Name	Size
.ls-2	1rem
.ls-3	2rem

Line Height

Class Name	Size
.lh-35	35px
.lh-45	45px

Font Size

Class Name	Size
.font-size-12	12px
.font-size-14	14px
.font-size-16	16px
.font-size-20	20px
.font-size-60	60px
.font-size-72	72px

Font Weight

Class Name	Size
.font-weight-300	300
.font-weight-400	400
.font-weight-600	600
.font-weight-700	700
.font-weight-800	800

Plugins

Updates

Our current version is v1.0 We will continuously updating the template and once you purchased this template you will get all updates full free for forever ...

Supports

If you encountered any problem during work please contact our support via email or Themeforest comments

Mail Address : dkmosa@gmail.com

Change log

1.0 - initial release