Buy Again

## Development Guide

Documentation - v2.0

### Saasbox - Multipurpose HTML Template for Saas & Agency

The Saasbox is a Static HTML5 Template:
We do not provide any documentation or email support on how to integrate with any CMS (such as WordPress, Joomla, etc.) or frameworks (such as Angular, Vue, React, etc.).

### 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!

In some cases, you may have to wait 2 working days to get an email answer. However, we will try to answer you as soon as possible. Replies are sometimes delayed due to multiple emails and time zone variations.

### 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

It has a directory (saasbox/dist) of compiled files. If you want to edit without source files (plain HTML/CSS/JS files), you do not need to install anything on your machine.

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.

npm install --legacy-peer-deps

### 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.

npm run gulp

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

npm run gulp watch

### 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.

Visit the official website to learn the details.

SCSS Files Layout
File | Description
--- | ---
style.scss core .scss file | Core stylesheet
_reboot.scss | Reboot CSS
_shortcode.scss | Shortcode CSS
_preloader.scss | Preloader CSS
_header.scss | Header CSS
_hero.scss | Welcome Area CSS
_about.scss | About CSS
_tab.scss | Tab CSS
_service.scss | Service CSS
_pricing.scss | Pricing Table CSS
_feature.scss | Feature CSS
_team.scss | Team CSS
_partner.scss | Partner CSS
_portfolio.scss | Portfolio CSS
_feedback.scss | Reviews CSS
_counter.scss | Counter Up CSS
_blog.scss | Blog CSS
_footer.scss | Footer CSS
_cta.scss | Call to Action CSS
_cookie.scss | Cookie CSS
_faq.scss | FAQ's CSS
_breadcrumb.scss | Breadcrumb CSS
_shop.scss | Shop CSS
_error.scss | 404 CSS
_register.scss | Login/Register CSS
_contact.scss | Contact CSS
_demo.scss | Demo Page CSS

### 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.

Visit the official website to learn the details.

PUG Files Layout
File | Description
--- | ---
inc/about-1.pug | About 1 Section Code
inc/about-2.pug | About 2 Section Code
inc/about-3.pug | About 3 Section Code
inc/about-4.pug | About 4 Section Code
inc/blog-1.pug | Blog 1 Section Code
inc/blog-2.pug | Blog 2 Section Code
inc/cart.pug | Cart Page Code
inc/checkout.pug | Checkout Page Code
inc/cookie.pug | Cookie Section Code
inc/cool-facts.pug | Cool Facts Section Code
inc/cta-1.pug | Call to Action 1 Section Code
inc/cta-2.pug | Call to Action 2 Section Code
inc/cta-3.pug | Call to Action 3 Section Code
inc/demo-hero.pug | Demo Page Code
inc/faq-1.pug | FAQ 1 Section Code
inc/faq-2.pug | FAQ 2 Section Code
inc/feature-1.pug | Feature 1 Section Code
inc/feature-2.pug | Feature 2 Section Code
inc/feature-3.pug | Feature 3 Section Code
inc/footer-1.pug | Footer 1 Code
inc/footer-2.pug | Footer 2 Code
inc/footer-3.pug | Footer 3 Code
inc/head.pug | Head Code
inc/header-1.pug | Header 1 Code
inc/header-2.pug | Header 2 Code
inc/hero-1.pug | Hero 1 Code
inc/hero-2.pug | Hero 2 Code
inc/hero-3.pug | Hero 3 Code
inc/hero-4.pug | Hero 4 Code
inc/js-plugins.pug | Include all JavaScript Libraries
inc/loader.pug | Preloader Code
inc/newsletter.pug | Newsletter Section Code
inc/partner-1.pug | Partner 1 Section Code
inc/partner-3.pug | Partner 3 Section Code
inc/portfolio-1.pug | Portfolio 1 Section Code
inc/portfolio-2.pug | Portfolio 2 Section Code
inc/pricing-1.pug | Pricing 1 Section Code
inc/pricing-2.pug | Pricing 2 Section Cod
inc/pricing-3.pug | Pricing 3 Section Cod
inc/related-items.pug | Related Product Section Code
inc/service-1.pug | Service 1 Section Code
inc/service-3.pug | Service 3 Section Code
inc/shop-sidebar.pug | Shop Sidebar Section Code
inc/sidebar.pug | Blog Sidebar Section Code
inc/tab.pug | Tab Section Code
inc/team.pug | Team Section Code
inc/testimonial-1.pug | Testimonial 1 Section Code
inc/testimonial-2.pug | Testimonial 2 Section Code
inc/video.pug | Video Section Code
*.pug All HTML Pages | All Pages 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`

Remember: The page you will edit, the change will be only that page. So, you need to edit all the HTML files.

### 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`

Remember: The page you will edit, the change will be only that page. So, you need to edit all the HTML files.

### 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`

Remember: The page you will edit, the change will be only that page. So, you need to edit all the HTML files.

### 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`

Remember: The page you will edit, the change will be only that page. So, you need to edit all the HTML files.

### 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.

###### Recompiling will overwrite your all changes!

When you will customize with compile files, please do not run the template build tools. If you run the template build tools again, all your changes will be overwritten.

### Third Party Plugins Activation

Name | Plugins Activation Code
--- | ---
Preloader Active Code |
    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);
        });
    }
Tiny Slider |
    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'
        });
    }
CounterUp 2 |
    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]);
        }
    }
BaguetteBox |
    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)'
            });
        });
    }
Mediabox |
    let playButton = document.querySelectorAll('.play-button').length;

    if (playButton > 0) {
        MediaBox('.play-button');
    }
Countdown |
    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

### Changelog(s)

###### Version: 2.2.0

- Updated: Bootstrap v5.3.0 > Bootstrap v5.3.3
- Updated: Bootstrap v1.10.5 > Bootstrap v1.11.3
- Updated: Flag Icons Plugins
- Improved: Code Quality

###### Version: 2.1.0

- New Added: Add 2 new home page (Personal Portfolio & eCommerce Landing)
- Updated: Bootstrap v5.2.0 > Bootstrap v5.3.0
- Updated: Bootstrap Icons v1.8 > Bootstrap v1.10.5

###### Version: 2.0.1

- Updated: Plugins

###### Version: 2.0.0

- New Added: The whole code is wriiten with Vanilla JavaScript. No need jQuery dependency.
- Improved: Design Quality
- Improved: Code Quality
- Updated: Bootstrap v5.1.0 > Bootstrap v5.1.1
- Updated: Documentation

###### Version: 1.8.0

- Updated: Bootstrap v5.0.0-beta1 > Bootstrap v5.1.0
- Fixed: Some Minor Issues

###### Version: 1.7.0

- Updated: Bootstrap v5.0.0-alpha2 > Bootstrap v5.0.0-beta1
- Fixed: Some Minor Issues

###### Version: 1.6.0

- New Added: CSS Autoprefixer in npm (Now no need to use SCSS mixins for CSS prefix)
- Updated: Bootstrap 5.0.0-alpha1 > Bootstrap 5.0.0-alpha2
- Updated: Fonts Poppins > Fonts Inter

###### Version: 1.5.0

- Updated: Bootstrap 4.5.0 > Bootstrap 5.0.0-alpha1
- Fixed: Fixed Some Minor Bugs

###### Version: 1.4.0

- Updated: Gulp 3.9.1 > Gulp 4

###### Version: 1.3.0

- Updated: Bootstrap 4.3.1 > Bootstrap 4.5.0
- Updated: Contact Page

###### Version: 1.2.0

- Fixed: Some Minor Issues

###### Version: 1.1.0

- New Added: 2 Home Demos
- New Added: Change Primary Color
- New Added: Design Quality

###### Version 1.0.0

- Initial Realease