Introduction

Before you dive into code, we want you to explain how the template is structured and organized. A guide to understanding how Cavistar is structured and organized. We'll be happy to help you out in your doubts. Please send us mail at hello@chitrakootweb.com

The Cavistar is a static HTML template and not a WordPress theme!
Note: SVG icons and graphics do not appear in a local file. Because the SVG injection script requires AJAX to work. To appear the icon and SVG image, you must open the page from a local server such as the wamp, xampp or browsersync server.

Directory Structure

After template extracting, you will see the following files & folder structure:

  • dist
    Includes minify CSS and merge JS.
    • assets
      Includes minify CSS and merge JS files into assets folder.
      • css
        Includes all .css minify files, used in template.
        js
        Includes all .js merge files, used in template.
  • documentation
    Includes theme's documentation files.
    • index.html
      Main documentation index file.
  • html
    You will find here all .html files and assets files of the template.
    • assets
      Includes all assets files, like CSS, Images, JS, Video, SCSS and plugins used in template
      • css
        Includes all .css files, used in template.
        js
        Includes plugin's initialization file.
        img
        Includes all images, used in .html template.
        libs
        Includes all plugins files.
        scss
        Includes all of source files that are used to create the final CSS that is included in template.
        video
        Includes video file of the template.
    • index.html
      You will find here all .html files used in template
  • gulpfile.js
    All the build commands
    package.json
    List of dependencies and npm information.
    README.MD
     

CSS Files

Below are required styles in order to make quick and easy work. You need to add these at the top of your html page into head tag. You can include other libs CSS as per your requirement.

copy

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700&display=swap" rel="stylesheet">

<!-- Libs CSS -->
<link rel="stylesheet" href="assets/libs/font-awesome/css/fontawesome-all.min.css">

<!-- Theme CSS -->
<link href="assets/css/theme.css" rel="stylesheet">

JS Files

Below are required global scripts in order to make quick and easy work. You need to add these at the bottom of your html page before closing the body tag. You can include other libs scripts as per your requirement.

copy

<!-- Global JS -->
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
<script src="assets/libs/jquery/dist/jquery-migrate.min.js"></script>
<script src="assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>

Starter Template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

copy

<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- Title  -->
    <title>Hello, world!</title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/img/favicon.ico">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700,800,900&display=swap" rel="stylesheet">

    <!-- Libs CSS -->
    <link rel="stylesheet" href="assets/libs/font-awesome/css/fontawesome-all.min.css">

    <!-- Theme CSS -->
    <link href="assets/css/theme.css" rel="stylesheet">

    
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Global JS -->
    <script src="assets/libs/jquery/dist/jquery.min.js"></script>
    <script src="assets/libs/jquery/dist/jquery-migrate.min.js"></script>
    <script src="assets/libs/popper.js/dist/umd/popper.min.js"></script>
    <script src="assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- Theme JS -->
    <script src="assets/js/theme.js"></script>

  </body>
</html>
That’s all you need for overall page requirements. Visit the Layout docs to start laying out your site’s content and components.
If you want to make use of quick uncompiled resources make sure you install and use our Build Tools to compile and minify CSS and JavaScript for production. Click here to learn more about how to use NPM, Gulp other useful tools in order to compile CSS and JavaScript.
Summary