Getting Started

Introduction

UniKit is a fully featured modern multipurpose template built on top of awesome Bootstrap 5.1.3. It's for building responsive, mobile-first app with Bootstrap.

This documentation is guidelines for all users including beginner, experienced web developer, etc

Please feel free to get back to us via email support@getappui.com

Folder Structure

Extract the zip file you received after purchase and you would find the exact below files and folders: 

├── UniKit
│   ├── dist - auto generated production ready files, including HTML, css, js, images, etc
│   ├── src/
│   │   └── assets
│   │   │   └── images
│   │   │   └── js
│   │   │   └── scss
│   └── HTML Files
│   ├── gulpfile.js - The build commands for Gulp
│   ├── package.json
└── README.md

Quick Start

To get started, you need to do the following:

  1. UniKit uses yarn to manage the dependencies. In order to make it work, you will need NodeJS installed on your system. You can install the node js by downloading the package installer from the official website.
  2. Make sure to have Gulp CLI installed and running at your system level. If you don't, you can install it using following command:
    npm install gulp-cli -g
  3. Unzip your theme bundle zip and open your command line, making sure your command line is at the root of the unzipped theme directory.
  4. Install all the required dependencies using following command:
    yarn install

That's it. Now you are ready to compile everything including sass, js, etc. Please check following instructions for the same:

  1. To watch your Sass, JavaScript, image asset, and HTML changes, run the command below. It will start a local Browsersync instance on port 3000 to serve and auto-refresh your pages as you edit.
    gulp
  2. When you are ready to go for production use, run the command below. It will create dist folder containing the html files, compiled css, images, etc.
    gulp build
Note: You don't need to set up the above if you are not looking for any style modification. You might want to use the ready-to-use (pre-compiled) version available in the dist folder.

Customization

Customize Styling (SCSS)

UniKit comes with the power of Sass (scss). Scss lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

You can easily modify the themes by simply changing few variables. You can override the values available in the file src/assets/scss/skins/_variables.scss

Customization PWA

A progressive web application (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.

You can easily modify the pwa config by simply changing in the file src/assets/scss/skins/_variables.scss

Change Log

v1.0.0 - 2 Apr 2022
  • Initial Release