Thank you so much to buy our template. This document is for the HTML version We are trying to explain about Favland - SaaS & Software HTML5 Template, if you have any questions about it, please feel free to contact us.

Introduction

This guide will help you get started with Favland - SaaS & Software HTML5 Template! All the important stuff – compiling the source file, folder structure, build tools is documented here.

Folder structure

• 📁 Favland - Contains fonts, image, js, partials, plugins, scss, and other HTML files.
  • 📁 css - Compiled CSS
  • 📁 docs - Documentation of template
  • 📁 fonts - Webfonts
  • 📁 images - Image assets
  • 📁 js - Javascript source & Vendors files
  • 📁 scss - Contains the source for all theme CSS. You will find the following contents in scss:
• 📁 node_modules - Directory where npm installs dependencies.
• 📄 gulpfile.js - All the build commands
• 📄 package.json - List of dependencies and npm information
• 📄 package-lock.json - Describes a dependency tree

Setting up Dev Tools

Favland uses Gulp for its build system. Our package.json includes convenient methods for working with the framework, including compiling code, minification js/css files and more.

To use our build system and run our documentation locally, you'll need a copy of Favland's source files and NodeJS. Follow these steps and you should be ready to go:

1. Before installing gulp and sass first you must have NodeJs installed, NodeJS will have npm (node packaged modules)
2. Download and install Node.js. If Node.js is already installed in your machine, please make sure the installed latest version and jump to next step.
3. Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
4. Run npm install --global gulp-cli command. If you already installed Gulp CLI previously, then run npm rm --global gulp to make sure your old version doesn't collide with gulp-cli. Verify that gulp in successfully installed, and version of installed gulp will appear. gulp --version. jump to next step
5. Navigate to the root /theme directory and run npm install to install our local dependencies listed in package.json.
6. Run gulp command.

Now you're good to go in running the template and preview it in browser. This should automatically open up a browser window with the website running. Once the development server is up and running any changes you make to the HTML & JS & SASS files will be updated in your browser window.

Edit Color Scheme

Editing the default color scheme variables will change the colors in Favland.min.css and result the theme colors will change.

1. Open the variables.scss file

   The variables.scss file is located in the app/scss/abstracts/ directory of the theme package.

2. Change the variable values to your preferred colors

   Inside variables.scss, Modify the HEX values to change the color scheme.

// Color system

$white:    #fff !default;
$gray-50:  #F9FAFC !default;
$gray-100: #F1F4F9 !default;
$gray-200: #E1E8F0 !default;
$gray-300: #CBD5E1 !default;
$gray-400: #94A3B8 !default;
$gray-500: #64748B !default;
$gray-600: #465568 !default;
$gray-700: #344056 !default;
$gray-800: #1E293B !default;
$gray-900: #101729 !default;
$black:    #000 !default;

$blue:    #3B82F6 !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #ff4154 !default;
$orange:  #fd7e14 !default;
$yellow:  #fdcc2b !default;
$green:   #10B982 !default;
$teal:    #20c997 !default;
$cyan:    #07B6D5 !default;

Plugins