Setup

Setup Drift via Gulp

Download From ThemeForest

First of all you will need to download the zip file from your ThemeForest account. For that, you can go to https://themeforest.net/downloads and click the download button next to the Drift item.

Once the zip file is successfully downloaded, you will need to extract that. Extracting the zip file will create a folder with following sub-folders:

  • docs/

  • PSDs/

  • source-code/

    • classic-version/

    • npm-version/

Drift comes with two versions classic-version and npm-version. This step explains the installation of npm-version only. For classic version, check the Classic Version section from the menus.

Setup Your Project

In this step, you can copy the npm-version/ folder and paste that to the location you want to setup your project at.

Once the folder is copied successfully, you can rename this folder with the name of your project. For example, we are naming this as my-first-drift/

Check If Your Machine is Ready

Now, before moving further, you must ensure that you have both NPM and Gulp installed globally on your machine.

To check if you already have NPM installed, you could run the following command in the command prompt on Windows PC or terminal on Mac:

$ npm -v

If the above command returns a version of the NPM, that means you already have NPM installed on your machine. In case, NPM is not installed on your machine, you must download the latest version of npm from https://nodejs.org/en/download/ and install it.

Now, run the following command to check the same for Gulp:

$ gulp -v

If this returns a version of Gulp. That means you already have Gulp installed on your machine. In case, Gulp is not installed yet on machine, you must run the following command to install it globally:

$ npm install gulp-cli -g

Install All Dependencies

Now, run the following command to install all the dependencies Drift has in its package.json:

$ npm install

The above command will install all the dependencies and now is the time to choose the layout you want to keep in your project.

Choose Layout

Following folders and files are compulsory and must not be removed:

  • assets/

  • node_modules/

  • gulpfile.js

  • package.json

Apart from above, rest folders are different-different layout folders and you can remove all of those except the one you want to use in your project. For example, if you want to use the default layout, then keep the default/ folder and remove the rest.

There is one more thing to do yet before we say cheers!

In the assets/css/ folder, there are also various layout related folders.

You can also remove these unnecessary folders just like you did in above steps.

and then do the same for assets/scss/layouts/

Cheers! you have Drift setup on your machine successfully with only things which you need specifically for your next generation project.

Happy Coding!

Last updated