Saasbox - Multipurpose HTML Template for Saas & Agency

Get Help

Thank you for purchased our item(s). If you have any questions that are beyond the scope of this help file, please feel free to email via support page here. Thank you so much!

Files Structure

• Saasbox
  • dist (compiled distribution files)
  • node_modules (npm dependencies files. It is NOT included in the downloaded file, this folder will be installed automatically when you install npm).
  • src (all source files)
    • pug (all .pug files into this folder)
    • scss (all .scss files into this folder)
  • static (all static assets)
    • css (all static CSS files)
    • img (all images)
    • js (all static JS files)
  • .browerslistrc
  • changelog.txt
  • gulpfile.js
  • license
  • package.json
  • package-lock.json (this file NOT included in the downloaded file, this file will be automatically created when you run gulp)

Code Editor

There are many code editors for web code editing. You can use whatever you want. We recommend that you use Visual Studio Code . Because - this template is coded using it.

• Brackets
• Sublime Text
• Visual Studio Code Recommend
• Atom
• Notepad++
• Php Storm

Installation

You need to install package files/dependencies for this project if you want to customize it. To do this, you must have node and npm installed on your computer. Installation guide of the node can be found here.

As npm comes bundled with a node, a separate installation of npm is NOT needed. If you have installed them, just go to the root folder and run the following command in your command prompt or terminal.

Run Gulp

Run a command to run Gulp. When you run this command, it also watching at all source and static files. So, you don't need to run another command to watching these.

If you want, just watch the source files. You can run another individual command.

Know the file type

Source files:

Source files are files that are processed with template build tools to make the browser readable. E.g. SCSS & PUG files always source files.

Files location: saasbox > "src" folder

Compiled files:

Compiled files are files generated as a result of running a compilation process in the source files. E.g. CSS & standard HTML files always compiled files.

Files location: saasbox > "dist" folder

Static files:

Static files are ones that aren’t processed or generated. E.g. Images, Web Icon Fonts and standard HTML are static files.

Files location: saasbox > "static" folder

SCSS files

Sass stands for Syntactically Awesome Stylesheet. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. It's gives you variables, nesting, partials, modules, mixins, extend/inheritance & operators, etc.

PUG files

With Pug you can easily write HTML code. You have many powerful features at Pug. It's has powerful features like conditions, loops, includes, mixins. When you write HTML code in Pug, it is processed by the template engine into standard HTML code. So that web browsers can understand the code.

How to edit the Title & Favicon?

Open the mail file (saasbox) in your code editor. Then open head.pug file & customize as your desire.

File location: saasbox > src > pug > inc > head.pug

Customize with Complied Files

Open any *.html file & customize as your desire.

File location: saasbox > dist > *.html

How to edit the Brand Logo?

Open the mail file (saasbox) in your code editor. Then open header.pug file & customize as your desire.

File location: saasbox > src > pug > inc > header.pug

Customize with Complied Files

Open any *.html file & customize as your desire.

File location: saasbox > dist > *.html

How to edit the Navbar?

Open the mail file (saasbox) in your code editor. Then open header-1.pug || header-2.pug file & customize as your desire.

File location: saasbox > src > pug > inc > header-1.pug || header-2.pug

Customize with Complied Files

Open any *.html file & customize as your desire.

File location: saasbox > dist > *.html

How to edit the Footer Widget?

Open the mail file (saasbox) in your code editor. Then open footer-1.pug || footer-2.pug || footer-3.pug file & customize as your desire.

File location: saasbox > src > pug > inc > footer-1.pug || footer-2.pug || footer-3.pug

Customize with Complied Files

Open any *.html file & customize as your desire.

File location: saasbox > dist > *.html

How to edit the template Colors?

Open the mail file (saasbox) in your code editor. Then open _variables.scss file & customize as your desire.

File location: saasbox > src > scss > _variables.scss

Customize with Complied Files

Open style.css file & customize as your desire.

File location: saasbox > dist > style.css

Customize with Complied Files

Working with compiled files is very easy. You don't need any build tools or local setup to edit the template. A folder (saasbox/dist) is already provided with the template. Open this folder and edit it as your desired.

Third Party Plugins Activation

let preloader = document.getElementById('preloader');

if (preloader) {
    window.addEventListener('load', function () {
        let fadeOut = setInterval(function () {
            if (!preloader.style.opacity) {
                preloader.style.opacity = 1;
            }
            if (preloader.style.opacity > 0) {
                preloader.style.opacity -= 0.1;
            } else {
                clearInterval(fadeOut);
                preloader.remove();
            }
        }, 20);
    });
}

if (document.querySelectorAll('.welcome3-slide-wrap').length > 0) {
    tns({
        'container': '.welcome3-slide-wrap',
        'items': 1,
        'autoplay': true,
        'autoplayButtonOutput': false,
        'autoplayTimeout': 4000,
        'speed': 750,
        'loop': true,
        'mouseDrag': true,
        'controls': false,
        'nav': false,
        'mode': 'gallery',
        'animateIn': 'tns-fadeIn',
        'animateOut': 'tns-fadeOut'
    });
}

let counterlen = document.querySelectorAll(".counter").length;

if (counterlen > 0) {
    let counterUp = window.counterUp.default;

    let callback = entries => {
        entries.forEach(entry => {
            let counterElement = entry.target
            if (entry.isIntersecting && !counterElement.classList.contains('is-visible')) {
                counterUp(counterElement, {
                    duration: 2000,
                    delay: 20
                });
                counterElement.classList.add('is-visible');
            }
        });
    }

    let IO = new IntersectionObserver(callback, {
        threshold: 1
    });

    let counterUpClass = document.querySelectorAll('.counter');
    let counterUpClasslen = counterUpClass.length;

    for (let i = 0; i < counterUpClasslen; i++) {
        IO.observe(counterUpClass[i]);
    }
}

let imgZoom = document.querySelectorAll('.portfolio-img-zoom');
let imgZoomlen = imgZoom.length;

if (imgZoomlen > 0) {
    window.addEventListener('load', function () {
        baguetteBox.run('.portfolio-img-zoom', {
            buttons: 'auto',
            animation: 'slideIn',
            overlayBackgroundColor: 'rgba(30, 39, 46, .9)'
        });
    });
}

let playButton = document.querySelectorAll('.play-button').length;

if (playButton > 0) {
    MediaBox('.play-button');
}

let comingSoonClock = document.getElementById('comingSoonClock');

if (comingSoonClock) {
    new countdown({
        target: '#comingSoonClock',
        dayWord: ' Days',
        hourWord: ' Hours',
        minWord: ' Min',
        secWord: ' Sec'
    });
}

Credits

• Framework
• Bootstrap 5
• Fonts & Icons
• Bootstrap Icons
• Google Fonts
• Flaticon
• Flags Icon
• Images
• Unsplash
• Freepik
• Plugins
• Tiny Slider
• Images Loaded
• slideToggle
• Counter-Up
• baguetteBox
• mediabox
• countdown
• Animate CSS
• WOW
• Maps
• Google Maps
• Images & Svg Icons
• Global Network PNG @transparentpng.com
• Flaticon: Plant SVG
• Flaticon: Money Plant SVG
• Flaticon: Saving Money SVG
• Flaticon: Play SVG
• Flaticon: Logo SVG
• Flaticon: Shopping SVG
• Flaticon: Development SVG