Getting Started

Thank you for purchasing our Template , You are entitled to get free lifetime updates to this product and support from the creabik team. Thanks!

First Steps :

You will need the following tools to customize zipkit template.

  • 1. A good code editor of your choice like (atome, vscode, brackets ...)
  • 2. A supported web browser
  • 3. A Sass preprocessor installed
  • 4. Intermediate " html " knowledge
  • 5. Intermediate " scss " knowledge
  • 6. Basic " javascript " knowledge

Changelog

  • - initial release " v1.0.0 " - 14 June 2020

files Structure

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.

Global template structure :

  • zipkit template
  • | -- assets
  • | --- |---- css
  • | --- |---- fonts
  • | --- |---- images
  • | --- |---- js
  • | -- Home
  • | --- |---- Home_1.html
  • | --- |---- Home_2.html
  • | --- |---- Home_3.html
  • | --- |---- Home_4.html
  • | --- |---- Home_5.html
  • | --- |---- Home_6.html
  • | -- blog-pages
  • | --- |---- article_sidebar.html
  • | --- |---- article.html
  • | --- |---- blog_grid.html
  • | --- |---- blog_minimal.html
  • | --- |---- blog_sidebar.html
  • | -- author-pages
  • | --- |---- Account_general.html
  • | --- |---- Account_notification.html
  • | --- |---- Account_plans.html
  • | --- |---- Account_security.html
  • | --- |---- Account_users.html
  • | -- marketplace-pages
  • | --- |---- marketplace.html
  • | --- |---- product_checkout.html
  • | --- |---- product_details.html
  • | --- |---- product_details.html
  • | -- inner-pages
  • | --- |---- About.html
  • | --- |---- career.html
  • | --- |---- career_opening.html
  • | --- |---- case_study.html
  • | --- |---- comming_soom.html
  • | --- |---- contact.html
  • | --- |---- FAQ.html
  • | --- |---- help.html
  • | --- |---- help_article.html
  • | --- |---- plans.html
  • | --- |---- plan_single.html
  • | --- |---- plan_list.html
  • | --- |---- thank_you.html
  • | --- |---- user_reviews.html
  • | --- |---- terms.html
  • | --- |---- 404.html
  • | -- Documentation
  • | --- |---- documentation.html
  • | --- index.html

SCSS files :

zipkit relies on the powerful Sass features, letting you handle complex styles in a breeze.

File structure

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.

  • scss
  • | -- Bases
  • | --- |---- _bases.scss
  • | --- _colors
  • | -- elements
  • | --- |---- _Buttons.scss
  • | --- |---- _inputs.scss
  • | -- Helpers
  • | --- |---- _classes.scss
  • | --- |---- _mixins.scss
  • | --- |---- _variable.scsss
  • | -- Layouts
  • | --- |---- _navbars.scss
  • | --- |---- _headers.scss
  • | --- |---- _sections.scss
  • | --- |---- _footers.scss
  • | --- |---- _others.scss
  • | --- Style.scss

Style file

              
  // 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";                                   
              
            

Customization

zipkit is built in a css modular approach. We've made it easy for you to customize theme colors.

Change Page color:

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>        
          
        

Change Images:

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

Changing Fonts:

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";
                    
                  

Components

An overview of zipkit styling and interface elements.

Avatars

Represent users or customers around the interface.

Sizing

... ... ...
              
  <!-- 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">
              
            

Group

... ... ... ...
          
            <!-- 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>
          
        

Accordions

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>
      
    

Buttons

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>
    
  

Forms - Text Inputs

Styles and state variations for text inputs

Looks good!
@
Please choose a username.
    
  <!-- 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>
    
  

Selectables

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>
      
    

Alerts

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>
      
    

Pagination

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>
      
    

Shadows

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>
      
    

Deviders

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>
    
  

Client Logos

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>
      
    

Box Styles

Structural component for displaying boxed content

Finest Quality

Create professional short form video with the online video editor that anyone can master.

Studio

Create professional short form zipkit with the online zipkit.

SEO monitoring

Keep track of all the important

Finest Quality

Keep track of all the important

Plugin

AOS:

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>                         
                    
                  

Prism:

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>                         
                        
                      

Perfect Scrollbar:

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>                         
                          
                        

Customer support

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.

Support includes:

  • • Responding to questions or problems regarding the item and its features
  • • Fixing bugs and reported issues
  • • Providing updates

Support doesn't include :

  • • Customization and installation services
  • • Support for third party software and plugins

Before Support:

  • • Make sure your question is a valid Theme Issue and not a customization request
  • • Make sure you have read through the documentation and any ressources before asking support on how to accomplish a task
  • • If you have customized your theme and now have an issue, back-track to make sure you didn't make a mistake. If you have made changes and can't find the issue, please provide us with your changelog.
  • • Almost 80% of the time we find that the solution to people's issues can be solved with a simple "Google Search". You might want to try that before seeking support. You might be able to fix the issue yourself much quicker than we can respond to your request.
  • • Make sure to state the name of the theme you are having issues with when requesting support.