Thank you for purchasing our Template , You are entitled to get free lifetime updates to this product and support from the creabik team. Thanks!
You will need the following tools to customize zipkit template.
This section is about the zipkit File structure. You will learn where to find the files you need to start working and how to order them. zipkit has many files and it's easy to get lost. Let's dive into the folder structure.
zipkit relies on the powerful Sass features, letting you handle complex styles in a breeze.
zipkit relies on a heavy but modular scss structures. You only import in your Style file the partials that you need. This how scss files are organized. Of course, you will never find them all at one in one place. We simply display them here in a friendly manner so you can identify each one of them.
// style.scss
// =================================== Helpers
@import "1-helpers/colors";
@import "1-helpers/mixins";
@import "1-helpers/variables";
@import "1-helpers/classes";
// =================================== Base
@import "0-base/base";
@import "0-base/typography";
// =================================== elements
@import "2-elements/buttons";
@import "2-elements/forms";
@import "2-elements/boxes";
@import "2-elements/others";
// =================================== Layouts
@import "3-Layouts/header";
@import "3-Layouts/hero";
@import "3-Layouts/sections";
@import "3-Layouts/footer";
@import "3-Layouts/block-layouts";
// =================================== Pages
@import "4-Pages/style-guide";
@import "4-Pages/index";
@import "4-Pages/account";
@import "4-Pages/blog";
@import "4-Pages/marketplace";
@import "4-Pages/_documentation.scss";
zipkit is built in a css modular approach. We've made it easy for you to customize theme colors.
you can easly change your pages main colors you need just go to scss/1-helpers/colors.scss and change your primary, and layouts colors
// Brand colors
$color_brand: #5A52FF;
$color_brand_second: #2d3a58;
$color_dark: #2d3a58;
$color_dark_lighten: #1A191D;
$color_text: #232226;
$color_neutral: #888;
$color_light: #F3F2FC;
$color_light_rgba: rgba(#fff, .35);
$color_overlay: rgba($color_dark, .992);
$color_text_field: rgba($color_dark, .35);
$color_green: #3DCABD;
$color_fill_light: rgba($color_text, .03);
$color_fill_input: rgba($color_dark, .08);
$color_border: #e5e5e5;
$color_border_dark: rgba($color_dark, .35);
$color_error: #DE4B53;
$color_success: #3DCABD;
$color_brand: linear-gradient(45deg, #5731AB 0%, #321C64 100%);
$color_brand:#5A52FF;
$white:#fff;
$grad1: linear-gradient(45deg, #5731AB 0%, #321C64 100%);
$grad2: linear-gradient(0deg, #F3F2FC 0%, #F3F2FC 50%, #fff 50%, #fff 100%);
$grad3: linear-gradient(0deg, #2d3a58 0%, #2d3a58 40%, #fff 40%, #fff 100%);
$white:#fff;
$red:#ff5f7c;
$green:#54eb9f;
$btn_search:linear-gradient(-180deg,#3db96d 0%,#1b904e 100%);
$color_brand: radial-gradient( circle at 50% 0,#5731AB,#2d3a58 );
/* 1. Template Colors
========================================================================== */
$header-dark:#2d3a58;
$navbar-dark:rgba(0, 0, 0, 0.9);
$bg-grey:rgb(233, 233, 233);
$section-dark:#161616;
$card-dark:#34373B;
$section_light:#efefef;
$hero-white:#F9FAFF;
$plan:#EFEFFF;
The logo image can be found inside header container, so just upload you site logo image inside zipkit > assets > images > Logos > logo-dark.svg
<--! site-branding -->
<div class="site-branding">
<div class="site-title">
<a href="../index.html">
<div class="logo">
<img src="../assets/images/logos/logo-dark.svg
"class="svg-logo" alt="ootancy">
</div>
</a>
</div>
</div>
zipkit template downloaded package does not contain images which are there in our online demo. We are using placeholder images instead of real images. You will see the image code as mentioned below. You can replace placeholder image url with your image url like ./assets/images/Image_URL.png
In order to use google fonts, you need to visit
Google Fonts Library and follow the
instructions on how to get a new font. After you have decided on the styles of the font that
you want to load, or download it in ./assets/fonts/
after you need to add the name you font in
./assets/scss/bases/bases.scss like this :
//bases.scss
@font-face {
font-family: "SpaceGrotesk_Bold";
src: url("../fonts/SpaceGrotesk-Bold.ttf") format("truetype");
}
@font-face {
font-family: "SpaceGrotesk";
src: url("../fonts/SpaceGrotesk-Regular.ttf") format("truetype");
font-weight: normal;
}
Go to ./assets/scss/1-helpers/_variables.scss and edit this file with your new font like that:
//variables.scss
$font-primary:"SpaceGrotesk-Bold";
$font-secondary:"SpaceGrotesk";
An overview of zipkit styling and interface elements.
Represent users or customers around the interface.
<!-- Avatar Size-->
<img src="../assets/images/others/avatar.png" alt="..." class="avatar avatar-sm rounded-circle mr-2">
<img src="../assets/images/others/avatar.png" alt="..." class="avatar avatar-md rounded-circle mr-2">
<img src="../assets/images/others/avatar.png" alt="..." class="avatar avatar-xl rounded-circle mr-2">
<!-- Avatar Group-->
<!-- Avatar Group-->
<div class=" avatar-group">
<img src="../assets/images/others/avatar_1.png" alt="..." class=" avatar-item rounded-circle mr-2">
<img src="../assets/images/others/avatar.png" alt="..." class=" avatar-item rounded-circle mr-2">
<img src="../assets/images/others/avatar_1.png" alt="..." class=" avatar-item rounded-circle mr-2">
<img src="../assets/images/others/avatar.png" alt="..." class=" avatar-item rounded-circle mr-2">
</div>
zipkit makes use of the Space Grotesk webfont for headings and body text.
<!-- Accordion -->
<!--Accordion wrapper-->
<div class="accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Card header -->
<div class="accordion-header" role="tab" id="headingOne1">
<a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true"
aria-controls="collapseOne1">
<div class="d-flex justify-content-between">
<h5 class="mb-0">
Collapsible Group Item #1
</h5>
<ion-icon name="add-outline"></ion-icon>
</div>
</a>
<!-- Card body -->
<div id="collapseOne1" class="collapse" role="tabpanel" aria-labelledby="headingOne1"
data-parent="#accordionEx">
<div class="accordion-desc">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
</div>
</div>
</div>
</div>
Indicate the current page’s location within a navigational hierarchy.
<!-- breadcrumb -->
<nav aria-label="breadcrumb ">
<ol class="breadcrumb has_stylel1 mb-0">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
Styles for buttons with support for Multiple sizes, states, and more..
<!-- Button -->
<div class="element_content">
<div class="row">
<div class="col-lg-12 mb-30">
<!-- btn-sm -->
<a href="" class="btn btn-sm ml-20"> button</a>
<!-- btn-md -->
<a href="" class="btn ml-20"> button</a>
<!-- btn-lg -->
<a href="" class="btn btn-lg ml-20"> button</a>
</div>
<div class="col-lg-12 d-inline-block">
<div class="p-2">
<!-- btn-primary -->
<a href="" class="btn btn-primary ml-20"> button primary</a>
</div>
<div class="p-2">
<!-- btn-outline -->
<a href="" class="btn btn-primary btn-outline ml-20"> button primary</a>
</div>
<div class="p-2">
<!-- btn-primary -->
<a href="" class="btn btn-primary ml-20"> <ion-icon name="leaf-outline"></ion-icon>
button primary
</a>
</div>
</div>
</div>
</div>
Styles and state variations for text inputs
<!-- Forms - Text Inputs -->
<div class="row">
<!-- Text Inputs-->
<div class="col-lg-6">
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<!-- Text Inputs -->
<div class="col-lg-6">
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required="">
<div class="valid-feedback">
Looks good!
</div>
</div>
<!-- Text Inputs -->
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" >@</span>
</div>
<input type="text" class="form-control is-invalid" aria-describedby="inputGroupPrepend3" required="">
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
Checkboxes, Radios and Select.
<!-- Selectables -->
<div class="element_content">
<div class="col-lg-8">
<div class="row mb-4 mb-md-5">
<div class="col">
<div class="d-flex flex-wrap">
<div class="custom-control custom-checkbox mr-4">
<input type="checkbox" class="custom-control-input" id="check-1">
<label class="custom-control-label" for="check-1">Unchecked</label>
</div>
<div class="custom-control custom-checkbox mr-4">
<input type="checkbox" class="custom-control-input" id="check-2" checked="">
<label class="custom-control-label" for="check-2">Checked</label>
</div>
</div>
</div>
</div>
<div class="row mb-4 mb-md-5">
<div class="col">
<div class="d-flex flex-wrap">
<div class="custom-control custom-radio mr-4">
<input type="radio" id="radio-1" name="radio" class="custom-control-input">
<label class="custom-control-label" for="radio-1">Unchecked</label>
</div>
<div class="custom-control custom-radio mr-4">
<input type="radio" id="radio-2" name="radio" class="custom-control-input" checked="">
<label class="custom-control-label" for="radio-2">Checked</label>
</div>
</div>
</div>
</div>
</div>
</div>
Checkboxes, Radios and Select.
<!-- Alert -->
<div class="element_content">
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<!-- Title -->
<strong>Danger Will Robinson!</strong> This is a dismissable alert!
<!-- Button -->
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<i class="fe fe-x"></i>
</button>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<!-- Title -->
<strong>Holy guacamole!</strong> Notice how the text/UI have high contrast?
<!-- Button -->
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<i class="fe fe-x"></i>
</button>
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
<div class="alert alert-gradient" role="alert">
A simple dark alert—check it out!
</div>
</div>
Indicate a series of related content exists across multiple pages.
<!-- Pagination -->
<!-- Style 1 -->
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#!">1</a></li>
<li class="page-item"><a class="page-link is-active" href="#!">2</a></li>
<li class="page-item"><a class="page-link" href="#!">3</a></li>
<li class="page-item"><a class="page-link" href="#!"><ion-icon name="chevron-forward-outline"></ion-icon></a></li>
</ul>
</nav>
<div class="mt-30">
<!-- Style 1 -->
<nav aria-label="Page navigation ">
<ul class="pagination has_style1">
<li class="page-item"><a class="page-link" href="#!">1</a></li>
<li class="page-item"><a class="page-link is-active" href="#!">2</a></li>
<li class="page-item"><a class="page-link" href="#!">3</a></li>
<li class="page-item"><a class="page-link" href="#!"><ion-icon name="chevron-forward-outline"></ion-icon></a></li>
</ul>
</nav>
</div>
Preset styles to imply depth on interface components
$shadow_1
$shadow_2
$shadow_3
<!-- Shadows -->
<div class="colors mb-30_reset">
<div class="row">
<!-- Shadow 1 -->
<div class="col-md-3 col-6">
<div class="sh_palette shadow_1">
</div>
<p>$shadow_1</p>
</div>
<!-- Shadow 2 -->
<div class="col-md-3 col-6">
<div class="sh_palette shadow_2">
</div>
<p>$shadow_2</p>
</div>
<!-- Shadow 3 -->
<div class="col-md-3 col-6">
<div class="sh_palette shadow_3">
</div>
<p>$shadow_3</p>
</div>
</div>
</div>
Decorative elements to give your site some dynamic appeal.
<!-- Deviders -->
<div class="element_content">
<div class="row">
<div class="col-6">
<div class="devider_palette">
<img class="img-fluid" src="../assets/images/others/devider.svg" alt="">
</div>
</div>
<div class="col-6">
<div class="devider_palette">
<img class=" img-fluid " src="../assets/images/others/devider.svg" alt="">
</div>
</div>
</div>
</div>
Custom logo designed for your work examples.
<!-- Client Logos-->
<div class="element_content">
<div class="logos_palette1">
<div class="row justify-content-center align-items-center">
<div class="col-lg-4 col-md-4 col-6">
<img class=" img-fluid mb-20" src="../assets/images/logos/client_logo1.svg" alt="">
</div>
<div class="col-lg-4 col-md-4 col-6">
<img class=" img-fluid mb-20" src="../assets/images/logos/client_logo2.svg" alt="">
</div>
<div class="col-lg-4 col-md-4 col-6">
<img class=" img-fluid mb-20" src="../assets/images/logos/client_logo3.svg" alt="">
</div>
<div class="col-lg-4 col-md-4 col-6">
<img class=" img-fluid mb-20" src="../assets/images/logos/client_logo4.svg" alt="">
</div>
<div class="col-lg-4 col-md-4 col-6">
<img class=" img-fluid mb-20" src="../assets/images/logos/client_logo5.svg" alt="">
</div>
<div class="col-lg-4 col-md-4 col-6">
<img class=" img-fluid mb-20" src="../assets/images/logos/client_logo6.svg" alt="">
</div>
</div>
</div>
<div class="logos_palette">
<div class="row justify-content-center align-items-center">
<div class="col-lg-4 col-md-4 col-6 ">
<img class=" img-fluid mb-20" src="../assets/images/logos/client_logo1_light.svg" alt="">
</div>
<div class="col-lg-4 col-md-4 col-6">
<img class=" img-fluid mb-20" src="../assets/images/logos/client_logo2_light.svg" alt="">
</div>
<div class="col-lg-4 col-md-4 col-6">
<img class=" img-fluid mb-20" src="../assets/images/logos/client_logo3_light.svg" alt="">
</div>
<div class="col-lg-4 col-md-4 col-6">
<img class=" img-fluid mb-20" src="../assets/images/logos/client_logo4_light.svg" alt="">
</div>
<div class="col-lg-4 col-md-4 col-6">
<img class=" img-fluid mb-20" src="../assets/images/logos/client_logo5_light.svg" alt="">
</div>
<div class="col-lg-4 col-md-4 col-6">
<img class=" img-fluid mb-20" src="../assets/images/logos/client_logo6_light.svg" alt="">
</div>
</div>
</div>
</div>
Structural component for displaying boxed content
Create professional short form video with the online video editor that anyone can master.
Create professional short form zipkit with the online zipkit.
Keep track of all the important
Touch, responsive, Fully accessible carousels.
<--! AOS -->
<a href="#!" class="btn btn-primary" data-aos="fade-in">
Primary action
</a>
<a href="#!" class="btn btn-primary" data-aos="fade-in" data-aos-delay="150">
Primary action
</a>
Animate on scroll library.
<--! AOS -->
<a href="#!" class="btn btn-primary" data-aos="fade-in">
Primary action
</a>
<a href="#!" class="btn btn-primary" data-aos="fade-in" data-aos-delay="150">
Primary action
</a>
Animate on scroll library.
<--! AOS -->
<a href="#!" class="btn btn-primary" data-aos="fade-in">
Primary action
</a>
<a href="#!" class="btn btn-primary" data-aos="fade-in" data-aos-delay="150">
Primary action
</a>
Animate on scroll library.
<--! AOS -->
<a href="#!" class="btn btn-primary" data-aos="fade-in">
Primary action
</a>
<a href="#!" class="btn btn-primary" data-aos="fade-in" data-aos-delay="150">
Primary action
</a>
Please remember you have purchased a very affordable theme and you did not pay for a full-time web design agency. We will help with your issues, but these requests will be put on a relevant priority, regarding their nature. Support is provided for your comfort and for a best possible experience, so please be patient, polite and respectful, as we are towards you.