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: #e3e4e887 !default;
$gray-700: #344056 !default;
$gray-800: #1E293B !default;
$gray-900: #101729 !default;
$black:    #000 !default;

$blue:    #0157ff !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;


Credits

File Name Credits
eiffel-tower.svg Icons made by surang from www.flaticon.com
petronas-twin.svg Icons made by surang from www.flaticon.com
great-wall-of-china.svg Icons made by surang from www.flaticon.com
google.svg Icons made by Freepik from www.flaticon.com
linkedln.svg Icons made by Freepik from www.flaticon.com
apple.svg Icons made by Freepik from www.flaticon.com
calender.svg Icons made by Pixel perfect from www.flaticon.com
cancel.svg Icons made by Pixel perfect from www.flaticon.com
no-credit-card.svg Icons made by Freepik from www.flaticon.com
check.svg Icons made by Pixel perfect from www.flaticon.com
quotation-marks.svg Icons made by Freepik from www.flaticon.com
check-true.svg Icons made by Pixel perfect from www.flaticon.com
check-false.svg Icons made by Pixel perfect from www.flaticon.com
vintage-eyeglasses.svg
Icons made by Freepik from www.flaticon.com
support.svg Icons made by Freepik from www.flaticon.com
rating.svg Icons made by Pixel perfect from www.flaticon.com
star.svg Icons made by Pixel perfect from www.flaticon.com
fireworks.svg Icons made by Freepik from www.flaticon.com
warning.svg Icons made by Freepik from www.flaticon.com
creativity.svg Icons made by Smashicons from www.flaticon.com
united.svg Icons made by Freepik from www.flaticon.com
quality.svg Icons made by Freepik from www.flaticon.com
augmented-reality.svg Icons made by Wichai.wi from www.flaticon.com
limit.svg Icons made by Wichai.wi from www.flaticon.com
data.svg Icons made by Payungkead from www.flaticon.com
google-docs.svg
Icons made by Freepik from www.flaticon.com
book.svg Icons made by Freepik from www.flaticon.com
cube.svg Icons made by Freepik from www.flaticon.com
flag.svg Icons made by Freepik from www.flaticon.com
seminar.svg
Icons made by monkik from www.flaticon.com
conferance.svg Icons made by surang from www.flaticon.com
trade.svg
Icons made by Eucalyp from www.flaticon.com
launch.svg
Icons made by Eucalyp from www.flaticon.com
meeting.svg Icons made by photo3idea_studio from www.flaticon.com
cherity.svg Icons made by Freepik from www.flaticon.com
travel.svg Icons made by surang from www.flaticon.com
webinar.svg Icons made by Freepik from www.flaticon.com
expo.svg Icons made by Eucalyp from www.flaticon.com
ceremonies.svg Icons made by photo3idea_studio from www.flaticon.com
job-fair.svg Icons made by Freepik from www.flaticon.com
dinner.svg Icons made by Freepik from www.flaticon.com
bg-cover-2.jpg Photo by Jason Briscoe on Unsplash
bg-cover-3.jpg School photo created by pch.vector - www.freepik.com
bg-cover-4.jpg Photo by Luca Bravo on Unsplash
logos/brand https://worldvectorlogo.com/
Images https://www.pexels.com/ and https://unsplash.com/