Documentation

Here you can find full information about this template

Requirements

1. Section

To fully work with this template, make sure you have the following components installed:

  • Node.js
  • PurgeCss
  • Prepros (or another SASS compiler)

    • How it works

    2. Section

    This template includes Bootstrap , SASS , and JavaScript.

    Styles

    3. Section

    This template includes few files of styles.

    For example

    I need to change all text color of site to white, all i need to do just going to this file: dark-light.css

    dark-light.css

    As you can see, a different variable for each color, just change here --gray-color: #2b2b2b; and changes will applies on all template. Same with all components in this template.

    Defaults veriables
    --gray-color Title and text color
    --white-color Title and text color
    --red-color Danger color
    --main-bg-color Container background color
    --main-bg-color-darker Second container background color
    --first-flag-color First flag color
    --second-flag-color Second flag color
    --social-bg Social link color
    --primary-color Accent color
    --active-main-bg-color-darker Active background when hover
    --nav-active Nav bar hover color
    --background-color Main background color
    --nav-bar-bg Nav bar background color
    --svg-colors SVG colors
    --container-bg Another container background color
    --container-bg-d Another container background color
    --shadows Shadow effect for containers
    --filter Filter for images
    --transform Transform effect
    --service-image-1 URL for images (depends what the style theme user choose)
    --service-image-2 URL for images (depends what the style theme user choose)
    --service-image-3 URL for images (depends what the style theme user choose)
    --templates-image-1 URL for images (depends what the style theme user choose)

    Optimization

    4. Section

    To optimize the site I used PurgeCss, it automatically scans the css file and removes unused styles, thereby reducing the file size.

    This is done for the file bootstrap.min.css, so new Bootstrap components you add to the template will not have Bootstrap styles, you can write your own, but I recommend making a couple of steps to include Bootstrap styles, and also to optimize the site.

    1. Make sure Node.js installed
    2. And also you need to download Bootstrap
    3. Put bootstrap.min.css wich was downloaded to your project directory and create folder with "result" name
    4. Then you need open terminal, i use ConEmu for windows
    5. Go to your project directory in terminal
    6. And run this command:
    7. purgecss --css bootstrap.min.css --content * --output result
    8. Then you will get in result folder bootstrap.min.css file wich include only then styles and contents you use

    Shop

    5. Section

    This template connected to Snipcart eCommerce platform it means if you don't want integrate another platform, you need to create account there and active your API-KEYS in this template, also you need to connect payment gateways to receive transactions, it's simple just few steps and you ready to get pay from your products.

    Here you can find full information about SnipCart, API-KEYS and how you can sell digital goods.

    How connect API-KEYS to this template
    1. Go to Snipcart and create your account
    2. Add to account BILLING & PAYMENTS information, then set up PAYMENT GATEWAYS
    3. Switch to live mode, and copy your LIVE API KEY
    4. Then paste API KEY to snipcart.js file