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
-
📁 assets
-
📁 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"
>
Sources and Credits
We are using this JS and CSS plugins for creating quicky.