Getting Started

Get started with Folio by following this guide, It will help you to get the most out of our Bootstrap Theme quickly with easy understanding.

Thank you for purchasing Folio theme! We’re glad that you found what you were looking for. It is our goal that you are always happy with what you bought from us, and We hope that you will be able to create an outstanding website with our theme easily.

Before proceeding with the theme installation, It is recommended that you follow the steps listed in this guide. We have covered all kinds of necessary information, and provide you with all the guidelines and details that you will need to use Folio theme. If you can’t find the answer you’re looking for, We encourage you to reach to us through our support portal. We'll be glad to help you out with your queries. Please generate ticket through our support portal and you shall hear back very soon.

Directory structure

Once you have downloaded the package after theme extracting, you will see the following files & folder structure:

  • docs
    Includes theme's documentation files (on theme editing and setup).
    • index.html
      Main documentation file. You are reading it at the moment.
  • template
    Includes all assets and template files, used in theme
      Includes all assets files, like CSS, Images, JS, SCSS and plugins used in theme
        Includes .css file, used in theme
      • images
        Includes all images, used in .html files.
      • include
        Contains PHP files for contact form mailing functionality.
      • js
        Includes plugin's initialization file
      • scss
        Includes all of raw source files that are used to create the final CSS that is included in theme
      • vendor
        Includes all plugins files.
    • index.html
      You will find here all .html files used in theme
  • gulpfile.js
    All the build commands
    List of dependencies and npm information
    Lock dependencies to a specific version number to avoid possible version mismatch.

What to do after purchase?

1. Check theme inside out

After extracting .zip file, check every file and folder to know more about theme inside out. Confused with any file/folder usage? Check above directory structure to clear your doubts. We recommended reading the whole documentation for better understanding of theme. Yes, it will take up to 30 min but it worth reading.

2. Install local environment for customization (Optional but highly recommended)

Go to Gulp section and follow the steps. You can skip this step if you prefer to work with Folio as a static source without Gulp and Sass.

3. Branding

After installation and running gulp, change your brand colors buy following Color scheme section instructions. Change your brand logo by following Logo settings section

4. Customization

Now you can start customizing your website as per your need.

5. Delete unnecessary file and folder to upload on live server

After completing your website, you must need to delete unnecessary file and folder to reduce website size. Please check below folders/files usage to run your website:

  • assets/css: You must need style.css (or style-rtl.scss for RTL version). If you have not used color.css file then you can remove it.
  • assets/images: You can remove all unnecessary files from this folder.
  • assets/include: If you are not going to use working contact form then you can remove include folder.
  • assets/js: Don't delete this file.
  • assets/scss: If you don’t want sourcemap you can remove SCSS folder. You must remove source map comment from the end of the style.css (or style-rtl.scss for RTL version) file to avoid warning on console log.
  • assets/vendor: Keep only those vendor folders that you have used in your website.
  • node_modules: You only need this folder for local server. Don't upload it to live server.
  • Docs: You don’t need docs folder for your live website.