v1.3

Quicky Documentation

Thank you so much to see our template. Learn how to use template using NPM scripts to build and compile SCSS, change brand-colors and more.

Introduction

Quicky, a modern and clean premium quality messaging template based on Bootstrap 4 using concept driven and minimal design. Its well optimized with mobile first responsive approach. Quicky built using SASS preprocessor, HTML5, CSS3 and help of usefull jQuery plugins.

File Structure

Learn more about file structure of Quicky.

  • 📁 app
    • 📁 assets
      • 📁 css - Compiled CSS
      • 📁 js - Javascript file
      • 📁 media - Image & icon assets
      • 📁 vendors - Third party plugins
      • 📁 webfonts - Webfonts
    • 📁 dark-skin - HTML source of dark skin
    • 📁 light-skin - HTML source of light skin
    • 📁 scss - SCSS source for theme
  • 📁 node_modules - Directory where npm installs dependencies.
  • 📄 gulpfile.js - All the build commands
  • 📄 package.json - List of dependencies and npm information

Quick start -Install

This template requires Node and Gulp CLI. Please follow these steps to install the required technologies:

1. Installing Node.js

If you do not have Node installed already, you can get it by downloading the package installer from Node's website. You need to have Node.js installed onto your computer before you can install Gulp. Download and install Node.js →

2. Installing Gulp

Before installing gulp first you must have NodeJs installed, NodeJS will have npm (node packaged modules).Download and install Gulp JS from https://gulpjs.com/

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

Download Gulp Command Line Interface to be able to use gulp in your Terminal.

npm install --global gulp-cli

If you have previously installed a version of gulp globally, please run npm rm --global gulp to make sure your old version doesn't collide with gulp-cli.

npm rm --global gulp

Verify that gulp in successfully installed, and version of installed gulp will appear.

gulp --version
3. Install dependencies

After installing Gulp, run npm install in the main Quicky/ folder to download all the project dependencies. You’ll find them in the node_modules/ folder.

npm install

This will download all dependencies defined in package.json file. Once it finished running the command, it will generate a folder name node_modules/ where you see downloaded files.

4. Running in Browser

Run gulp in the quicky/ folder to serve the project files using BrowserSync. Running gulp will compile the theme and open /index.html in your main browser.

gulp

Hit CTRL+C to terminate the gulp command. This will stop the local server from running.

Skin

You can use quicky with dark or light mode. By default we use light mode.

To use quicky in light mode, link dark-skin css file.

<link rel= "stylesheet" href= "./assets/skin/dark-skin.min.css" type= "text/css" >

RTL

You can use quicky with RTL mode. By default we use LTR mode.

To use quicky in RTL mode, add dir="rtl" into body.

<body dir= "rtl" >