Clab Documentation
Welcome to the clab world! Thank you for purchasing!
Created: 16/03/2019.
By: vectorlab
Welcome to the clab world! Thank you for purchasing!
Created: 16/03/2019.
By: vectorlab
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.
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
This folder contains css
, dev
, img
,
js
and vendor
files.
This folder contains both minified and expanded versions of CSS. This file was
compiled by dev/sass
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.
This folder contains all demo images
This folder contains all third party plugins such as Bootstrap
, jQuery
,
owl carousel
and so on.
Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
In order to utilize Node.js on your computer. Also ensure that you have NPM (node packaged modules) installed.
Run the following commands
gulp
globally by running the command npm install -g gulp
npm install
.Once you have successfully setup now you can use npm install gulp-cli -g
commands to automate your task.
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 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
Class Name | Size |
---|---|
.bg-gray |
#f0f1f4 |
.bg-white |
#ffffff |
.bg-dark |
#242424 |
.bg-dark-alt |
#303030 |
.bg-green-light |
#d7f5e3 |
.gradient-primary |
#287dfe #7431ff |
.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>
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 |
Class Name | Size |
---|---|
.avatar-sm |
35px X 35px |
.avatar-md |
70px X 70px |
.avatar-lg |
140px X 140px |
Class Name | Size |
---|---|
.icon-sm |
28px |
.icon-md |
42px |
.icon-lg |
56px |
Class Name | Size |
---|---|
.ls-2 |
1rem |
.ls-3 |
2rem |
Class Name | Size |
---|---|
.lh-35 |
35px |
.lh-45 |
45px |
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 |
Class Name | Size |
---|---|
.font-weight-300 |
300 |
.font-weight-400 |
400 |
.font-weight-600 |
600 |
.font-weight-700 |
700 |
.font-weight-800 |
800 |
Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
DocumentationGet vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.
DocumentationjQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
DocumentationMagnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device (for jQuery or Zepto.js).
DocumentationTouch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
DocumentationPrism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.
DocumentationPrism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.
DocumentationjQuery numbers animation plugin, adds 'number' property and step function to jQuery's animate function properties.
DocumentationReveal Animations When You Scroll. Very Animate.css Friend :-) Easily customize animation settings: style, delay, length, offset, iterations
DocumentationOur 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 ...
If you encountered any problem during work please contact our support via email or Themeforest comments
Mail Address : dkmosa@gmail.com
1.0
- initial release