Get Started

Guide to get started with Sandbox Modern & Multipurpose Bootstrap 5 Template.

Overview

This guide will help you get started with Sandbox. All the information regarding file structure, build tools, components, credits, license and FAQ can be found here.

If you have any questions that are beyond the scope of this help documentation, please feel free to contact us with the links below and please don't forget to provide your website URL.

Contact Form Discussions Page

Please remember...

  • Requests sent during weekends or on holidays will be replied on business days.
  • We only provide support for the issues related to the features that are included in the template. Debugging or providing guides on how to make custom modifications are not part of our support. Thank you for understanding.

File Structure

  • dev All template files with unminified CSS / JS. Use this folder if you don't wish to use Node.js / Gulp / SASS.
  • dist All template distribution files like HTML / CSS / JS that have been processed (compiled / minified) from src folder using Node.js / Gulp.
  • src All template source files like HTML / SCSS / CSS / JS that are then processed (compiled / minified) to dist folder.
    • src/assets/js Contains main theme.js and JS vendor files. If you don't wish to use all included plugins and scripts, just remove unwanted vendor JS files from src/assets/js/vendor then remove unwanted functions from src/assets/js/theme.js and recompile.
    • src/assets/css Contains CSS vendor files. If you don't wish to use all included plugins, just remove unwanted vendor CSS from src/assets/css/vendor and recompile.
    • src/assets/scss Contains all project SCSS files that are compiled and minified in dist/assets/css folder.
  • dev/docs & dist/docs Contain all documentation files (installation, blocks, elements, etc.) regarding the template. You can also reach the documentation from the live demo as well.
  • package.json Includes the list of dependencies to install from npm.
  • gulpfile.js Configuration file for Gulp library. It contains all tasks to perform with Gulp. Learn more about it from official Gulp documentation.

Installation

If you'd like to speed up development process with Node.js / Gulp / SASS, then follow these steps:

  1. Install Node.js if you don’t have it yet.
  2. Run npm install gulp-cli -g command, if you haven't already installed Gulp CLI previously.
  3. Unzip the template package and in the root project folder sandbox, go to your command line and run npm install. This will install the npm packages listed in the package.json file.
  4. You should now have the project files set up and all the npm packages installed.

Gulp Commands

  • gulp This command will fire default gulp task which includes: creating dist folder, launching BrowserSync, merging vendor libraries, JS minification, SASS and HTML compilation and starting watch task.
  • gulp serve This command will launch watch task and BrowserSync. It will watch changes of your HTML / SCSS / CSS / JS files and automatically compile them.
  • gulp build:dist This will create dist which includes all template files with minified CSS / JS.
  • gulp build:dev This will create dev which includes all template files with unminified CSS / JS.

When you want to kill the server just hit Control + C

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox