Setup Drift

In this article, we are considering that you have already setup all the tools mentioned in the above step Setup Development Environment.

Overview of folder structure

Now, when you download the item Drift from themeforest.net. You will receive a zip file with a name like drift-bs4-{x.x} where {x.x} represents to the latest version of Drift.

Extracting this file will give you a folder which will further contain 3 sub-folders as mentioned below:

  • source-code/

    The source-code/ folder represents to the complete source code of the Drift which includes demo and starter-templates for all 8 layouts.

  • PSDs/

    This PSDs/ folder contains all the layered PSDs designed for Drift.

  • docs/

    This docs/ folder is for offline documentation.

As PSDs/ and docs/ are very straight forward. We are not going to detail them further here. From now on, we will be explaining what is there inside the source-code/ folder. So, there are following folders you will find inside this folder:

  • default/

    This is the default layout Drift offers in its demo. This folder contains all the files presented in demo at themeforest.net

  • saas/ folder

    If you are building a SaaS based application, probably this starter-template will fit your need. However, this is not limited to SaaS app. It can be used based on the user interface you need.

  • intranet/ folder

    This template could be used for the intranet kind of application for sure but as with other templates, you can use this with any of the app where you need this kind of UI/UX.

  • listing/ folder

    Feel free to use this template for a Real-estate listing, jobs portal or that kind of applications. Additionally you can use the listing dashboard Drift offers.

  • back-office/ folder

    This starter-template gives a feeling of back-office type application. Feel free to use it as per your project's need.

  • back-office-mini/ folder

    This starter template is a good fit for you if you are looking for a folded left side navigation style.

  • modern/ folder

    Use this starter template to give your project a modern look and feel.

  • crm/ folder

    This one is an elegant starter-template which fits very well for the CRM type applications. However, we have kept this layout as our default as it fits most of the applications too.

  • vendors/ folder

    This is the folder where we place all the custom developed resources. For example, 200+ custom designed font-icons by us G-axon. You can add more custom developed resources here in this folder which you are intended to use throughout your application.

  • package.json folder

    This file is being used by NPM (Node Package Manager) and lists all the dependencies Drift has. So, if you want to add more packages to your project or remove any if you do not need, this is the right place to make those edits.

  • README.md folder

    This file has just two lines about the Drift. The only intention of making this file is so that you won't need to create one for your project. You can use this file to detail information about your project and can place this into the .gitignore if you are pulling Drift from our GitHub repo.

The above is just a quick overview of folder structure. The detailed structure is explained in the section Folder & File Structure.

Setup the demo

Now, to setup the exact demo set at our demo, you need to follow below steps:

Step 1 - Setup your project folder

Of course, you need to create a new folder to setup your project on local machine. So, in this step, you can create a folder and give it the name of your project. For example, "my-new-project".

Step 2 - Copy and paste necessary folder and files

In this step, you need to copy below mentioned folder & files and paste them to your new created folder "my-new-project" in our case.

  • default/
  • vendors/
  • package.json
  • README.md (optional)

Step 3 - NPM Commands

Drift uses NPM (Node Package Manager) as its dependency manager. You will need to run following commands in terminal after changing your current directory path in terminal with cd /path-to-your-project-folder command. Once you are inside your project folder, run the following command:

 $ npm install

This command will install all the dependency libraries Drift uses. So, once this command is successfully ran, it will add another folder node_modules to your project folder and this folder will have all the dependency libraries.

Now, the next step of us will be to compile all the Sass (.scss) files our demo (default/) template need. For that, you will need to run following command:

$ npm run default-semidark

This command will run the sass compiler to convert the Sass files to css files which are related to default/ demo version.

NOTE: As Drift comes up with three theme variations in default template. The above command is for the semi-dark version. In case, you want to use light or dark version, use the following commands instead.

$ npm run default-light
$ npm run default-dark

Once, above command is successfully ran, the following command will need to be run thereafter to convert some browser compatibility css from sass.

$ npm run default-bc

Cheers! this is all you need to do to have the demo version installed at your end. You can start browsing the template in browser by accessing them from default/ folder.

Happy Coding!!!