# Overview
An overview about Drift HTML version
Demo:
Drift is a complete HTML jQuery starter-kit for BootStrap and jQuery lovers. With Drift, you can set admin panel, SaaS application, a Web Portal, CMS or any web UI in minutes.
Drift also ships in-built sample application UI which you could directly use in your app. These app UI include Todo App, Mail App, Contacts App and Chat App.
Apart from the above mentioned in-built apps, Drift also features pages like Login, Signup, Social Media Wall, Profile, Lock Screen, General error pages along with hundreds of widgets and metrics ready for you to jump start with your next project.
### Key Features
* BootStrap 4.x
* NPM (Node Package Manager)
* Gulp
* 3 Themes - Light, Semi-dark and Dark
* 8 Unique layouts
* 10 Preset color themes
* In Full-width, Boxed and Framed layouts
* RTL Supported
Drift follows the best practices your next generation app.
# 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 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/
{% hint style="info" %}
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.
{% endhint %}
## 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**
{% hint style="warning" %}
Now, before moving further, you must ensure that you have both **NPM** and **Gulp** installed globally on your machine.
{% endhint %}
**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:**
```bash
$ 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 and install it.
**Now, run the following command to check the same for Gulp:**
```bash
$ 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:
```bash
$ npm install gulp-cli -g
```
## Install All Dependencies
Now, run the following command to install all the dependencies Drift has in its package.json:
```bash
$ 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
{% hint style="info" %}
Following folders and files are compulsory and must not be removed:
* assets/
* node\_modules/
* gulpfile.js
* package.json
{% endhint %}
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/
{% hint style="success" %}
Cheers! you have Drift setup on your machine successfully with only things which you need specifically for your next generation project.
Happy Coding!
{% endhint %}
# Folders and Files Structure
Quick overview of folder structure
## Overview
The below image gives a quick overview of the folder and file structure Drift follows:
## assets/
The below image gives an insight of the assets/ folder:
# Overview
An quick overview about formatting and styles
In Drift best practices have been followed for SCSS coding.
{% hint style="info" %}
#### Important
Drift is utilizing the BootStrap 4 as much as possible. Which means, you can make use of BootStrap classes directly most of the time rather than putting yourself in a learning mode to learn about each and every unique class.
This sets Drift apart from other competitors and gives an ease to developers in getting into
{% endhint %}
Another fact is, Drift is following the BEM (Block Element Modifier) methodology to speed up the development process and ease the teamwork of developers.
# Sass Variables
To find all the Sass variables, you will need to access the below file:
```bash
assets / scss / layouts / {layout} / themes / {theme} / _variables.scss
```
{% hint style="info" %}
#### Where
{layout} is the layout you want to work in. For example, default
{theme} is either the existing theme provided by Drift or the one created your own custom one
{% endhint %}
In Drift, All of the BootStrap variables are copied over in \_variables.scss. Many of those are customized as per the layout and theme but there are still few variables which we didn't customize. Those variables are commented in \_variables.scss
So, whenever you feel like you need to customize those variables too, you can uncomment those and set the specific value in there.
# Layouts & Theme
Classes related to layouts
This section covers the documentation about the classes which builds the layout or could be used to customize the layout as per your need.
The following classes could be applied to \ tag to achieve the desired layout for your project:
```css
/* Layout Related Classes
-------------------------------- */
/* Below is a unique class for default layout. For other layouts,
you can replace default (after --) with the name of those layouts.
for example .dt-layout--crm */
.dt-layout--default
/* Sidebar Related Classes (Only for layouts with sidebar)
-------------------------------- */
/* To fix the sidebar */
.dt-sidebar--fixed
/* To make the sidebar folded */
.dt-sidebar--folded
/* To expend the sidebar
(Drift uses this on on-hover event when the sidebar is in folded mode) */
.dt-sidebar--expended
/* Header Related Classes (Only for default layouts)
-------------------------------- */
/* To fix the header */
.dt-header--fixed
/* Framing Related Classes
--------------------------------- */
/* To make the framing fluid */
.dt-layout--full-width
/* To make the framing covered from all four sides */
.dt-layout--framed
/* To make the framing in boxed style (or fixed width) */
.dt-layout--boxed
/* Theme Related Classes (only for default layout)
---------------------------------- */
/* To apply the semi-dark theme */
.theme-semidark
/* To apply the light theme */
.theme-light
/* To apply the dark theme */
.theme-dark
```
The following classes are related to the layouts with drawer and will be applied to sidebar:
```css
/* to convert the sidebar into drawer */
.dt-drawer
/* To switch the drawer position either right or left */
.position-right
.position-left
```
# Fonts
Setting up a font for your project
In your project, you would want to setup your own selected font. This section is a step-by-step guide on how to setup your custom font to your project.
Before moving further, Lets talk about the ways you can setup font in your project:
There could be two ways you could setup fonts in your project:
* Via online font resources like Google Fonts
* Via your custom web-font kit
Here below, these two ways are going to be detailed one by one.
## Via Online Font Resources (Google Fonts)
For this, you will need to visit Google Fonts and pick the font you want to setup in Drift.
Once you hit the **+** icon and customize the different font-weights you need, you can then go to the EMBED tab and then select @STANDARD tab.
Here on this tab, you will need to copy the entire \ tag. Just like this is highlighted in the picture below for reference:
.png?alt=media\&token=bd5b5df5-79ce-4edc-8483-18dcd81cb298)
After copying the link, you need to place this in the \ section of your page or layout file.
This is the first step completed successfully and you have font resources included in your project.
Now, the last thing you need to do is, changing the values of font variables in SCSS. For that, you will need to follow the steps explained in **Change Font Variables** below.
## Via Custom Web-Font Kit
For this, first of all, you must have a web-font-kit folder having all web font files.
Then you need to copy that folder into `assets / fonts /` and make sure that you have a `style.css` file in your web-font kit folder which has all weights and font-family set as given in below example:
```css
@font-face {
font-family: 'NoirPro';
src: url('NoirPro-Light.eot?#iefix') format('embedded-opentype'),
url('NoirPro-Light.woff') format('woff'),
url('NoirPro-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'NoirPro';
src: url('NoirPro-Regular.eot?#iefix') format('embedded-opentype'),
url('NoirPro-Regular.woff') format('woff'),
url('NoirPro-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'NoirPro';
src: url('NoirPro-Medium.eot?#iefix') format('embedded-opentype'),
url('NoirPro-Medium.woff') format('woff'),
url('NoirPro-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'NoirPro';
src: url('NoirPro-SemiBold.eot?#iefix') format('embedded-opentype'),
url('NoirPro-SemiBold.woff') format('woff'),
url('NoirPro-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'NoirPro';
src: url('NoirPro-Bold.eot?#iefix') format('embedded-opentype'),
url('NoirPro-Bold.woff') format('woff'),
url('NoirPro-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'NoirPro';
src: url('NoirPro-Heavy.eot?#iefix') format('embedded-opentype'),
url('NoirPro-Heavy.woff') format('woff'),
url('NoirPro-Heavy.woff2') format('woff2');
font-weight: 900;
font-style: normal;
}
```
Now, the last thing you need to do is, changing the values of font variables in SCSS. For that, you will need to follow the steps explained in **Change Font Variables** below.
## Change Font Variables
In this step, you could change the SCSS variables in the file given below:
```bash
assets / scss / layouts / {layout} / themes / {theme} / _variables.scss
```
{% hint style="info" %}
#### Where
{layout} is the layout you want to work in. For example, default
{theme} is either the existing theme provided by Drift or the one created your own custom one
{% endhint %}
Following are most common font related variables which you might be looking to change values for:
{% code title="assets / scss / layouts / {layout} / themes / {theme} / \_variables.scss" %}
```css
$font-family-sans-serif: 'NoirPro', sans-serif;
//$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif;
// stylelint-enable value-keyword-case
$font-size-base: 1.4rem; // Assumes the browser default, typically `10px`
$font-size-lg: 1.6rem;
$font-size-sm: 1.2rem;
//$font-weight-lighter: lighter !default;
//$font-weight-light: 300 !default;
//$font-weight-normal: 400 !default;
//$font-weight-bold: 700 !default;
//$font-weight-bolder: bolder !default;
//$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.4;
$h1-font-size: 2.2rem;
$h2-font-size: 2rem;
$h3-font-size: 1.8rem;
$h4-font-size: 1.6rem;
$h5-font-size: 1.4rem;
$h6-font-size: 1.2rem;
$headings-margin-bottom: 1.8rem;
//$headings-font-family: null !default;
$headings-font-weight: $font-weight-normal;
//$headings-line-height: 1.2 !default;
$headings-color: $white;
$display1-size: 4rem;
$display2-size: 3.6rem;
$display3-size: 3rem;
$display4-size: 2.4rem;
$display5-size: 2rem !default;
$display6-size: 1.8rem !default;
$display1-weight: $font-weight-normal;
$display2-weight: $font-weight-normal;
$display3-weight: $font-weight-normal;
$display4-weight: $font-weight-normal;
$display5-weight: $font-weight-normal !default;
$display6-weight: $font-weight-normal !default;
$display-line-height: $headings-line-height;
$lead-font-size: 2rem;
$lead-font-weight: 200;
//$small-font-size: 80% !default;
$text-muted: $text-color;
$blockquote-small-color: $text-color;
//$blockquote-small-font-size: $small-font-size !default;
$blockquote-font-size: 1.8rem;
```
{% endcode %}
# Colors
Customizing colors in your project
This section details how you could customize color variables for your project.
There are following type of color variables you can change for your project:
* BootStrap Base Colors
* Custom Colors
### BootStrap Base Colors
{% code title="assets / scss / layouts / {layout} / themes / {theme} / \_variables.scss" %}
```css
$app-primary: #512DA8 !default;
$app-secondary: #FF4081 !default;
$primary: $app-primary;
$secondary: $app-secondary;
$success: #52c41a;
$info: #1890ff;
$warning: #fa8c16;
$danger: #f44336;
$light: #e5e5e5;
$dark: #212121;
```
{% endcode %}
{% hint style="info" %}
#### `NOTE`
`$app-primary` and `$app-secondary` are custom Drift colors which gives you an option to extend the primary and secondary colors of the theme in your own custom theme file.
{% endhint %}
### Custom Colors
{% code title="assets / scss / layouts / {layout} / themes / {theme} / \_variables.scss" %}
```css
$text-color: #757575 !default;
$text-color-dark: #212121 !default;
$primary-light: lighten($primary, 40%) !default;
$light-green: #1dce8e !default;
$dark-green: #3d6003 !default;
$light-blue: #5797fc !default;
$light-cyan: #00bcd4 !default;
$dark-blue: #0060ca !default;
$sky-blue: #00aeef !default;
$light-pink: #ff415a !default;
$brown: #5e1e21 !default;
$light-brown: #b23737 !default;
$light-teal: #1b8abe !default;
```
{% endcode %}
#### Typography Colors
{% code title="assets / scss / layouts / {layout} / themes / {theme} / \_variables.scss" %}
```css
//$body-bg: $white !default;
$body-color: $text-color;
$link-color: theme-color("primary");
$link-hover-color: darken($link-color, 10%);
$headings-color: $text-color-dark;
```
{% endcode %}
#### Other Misc Colors
{% code title="assets / scss / layouts / {layout} / themes / {theme} / \_variables.scss" %}
```css
$border-color: #ddd;
/* header colors */
$header-bg: $primary !default;
$header-color: rgba($white, 0.75) !default;
$header-color-hover: rgba($white, 1) !default;
$dt-brand-bg: $header-bg !default;
$dt-brand-color: $header-color !default;
/* sidebar colors */
$sidebar-bg: #110a21 !default;
$sidebar-color: #d1c4e9 !default;
$sidebar-color-hover: $secondary !default;
$sidebar-active-bg: #1e1532 !default;
$sidebar-active-color: $sidebar-color-hover !default;
$sidebar-submenu-color: $sidebar-color !default;
$sidebar-header-color: $text-color !default;
$sidebar-separator: #383245 !default;
/* footer colors */
$footer-bg: $gray-100 !default;
$footer-color: $text-color !default;
/* custom drawer colors */
$dt-drawer-bg: $white !default;
$dt-backdrop-bg: rgba($black, 0.4) !default;
/* colors for sidebar in apps */
$module-sidebar-bg: $white !default;
$module-sidebar-color: $text-color-dark !default;
$module-sidebar-color-hover: $secondary !default;
```
{% endcode %}
{% hint style="info" %}
There are many other color variables which you can find in the same file. You can customize those as per your need.
{% endhint %}
# Margin & Paddings
Ways to manage margin and padding in your project
For margin and padding, Drift utilizes the classes provided by BootStrap. You can use the same class names throughout the project.
To change the values of spacing for these margin and padding, you can change the values for $spacer in `assets / scss / layouts / {layout} / themes / {theme} / _variables.scss` as mentioned below:
{% code title="assets / scss / layouts / {layout} / themes / {theme} / \_variables.scss" %}
```css
$spacer: 1.6rem;
$spacers: ();
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge((
0: 0,
1: ($spacer * .25),
2: ($spacer * .5),
3: ($spacer * .75),
4: $spacer,
5: ($spacer * 1.25),
6: ($spacer * 1.5),
7: ($spacer * 1.75),
8: ($spacer * 2),
9: ($spacer * 2.25),
10: ($spacer * 2.5)
), $spacers);
```
{% endcode %}
{% hint style="info" %}
You can add extra classes here by extending this array. Or there is another place where you can add more classes and that is `assets / scss / core/ globals / _margin.scss` or can create your own custom file and import that.
{% endhint %}
# Theme Customization
How to customize an existing theme of Drift
All the layouts have the pre-generated CSS files at the following path:
```
assets / css / {layout} / {theme_name}.css
assets / css / {layout} / {theme_name}.min.css
```
#### Customizing SCSS Files
The SCSS files are organized in two folders mentioned below:
* core/
* layouts/
The **core/** folder contains sub-folders which further contains all the SCSS styling code which is common for all the layouts. So, if you are interested in changing the global styling, you can customize the SCSS files given inside the **core/** folder at the following path:
```css
assets / scss / core /
```
The **layouts/** folder contains all the layouts by default. Now, for your project specific, you can choose the layout which fits into your need and can remove all the rest layouts.
Then inside this specific layout, you can find all the SCSS files available for the customization. Here is a path structure to access these layout specific files:
```css
assets / scss / layouts / {layout} /
```
#### Generate CSS files after customization
In order to generate the CSS files after the customization done in SCSS. You need to run the following Gulp commands:
```css
$ gulp style-{layout}-{theme_name}
/* For example: $ gulp style-crm-main */
```
To generate a minified version, use the following command
```css
$ gulp min-style-{layout}-{theme_name}
/* For example: $ gulp style-crm-main */
```
# RTL Version
Setup the right-to-left version
All the layouts have the pre-generated RTL CSS files at the following path:
```
assets / css / {layout} / {theme_name}-rtl.css
assets / css / {layout} / {theme_name}-rtl.min.css
```
To customize the styling in SCSS, follow the topic [Theme Customization](/stylesheets/theme-customization) and then to generate the RTL version, follow the instructions given in the below section.
#### Generate RTL files after customization
In order to generate the RTL files after the customization done in SCSS. You need to run the following Gulp commands:
```css
$ gulp style-rtl-{layout}-{theme_name}
/* For example: $ gulp style-rtl-crm-main */
```
To generate a minified version, use the following command
```css
$ gulp min-style-rtl-{layout}-{theme_name}
/* For example: $ gulp style-rtl-crm-main */
```
# Alerts
### Default Alert
{% tabs %}
{% tab title="Default Alert" %}
{% endtab %}
{% tab title="Source Code" %}
```markup
A simple primary alert—check it out!
```
{% endtab %}
{% endtabs %}
### Alert With Link
{% tabs %}
{% tab title="Alert with Link" %}
{% endtab %}
{% tab title="Source Code" %}
```markup
A simple primary alert with an
example link. Give it a click if you like.
Aww yeah, you successfully read this important
alert message. This example text is going to run
a bit longer so that you can see how spacing
within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep
things nice and tidy.
This is a wider card with supporting text below as a natural lead-in to
additional content. This
content
is a little bit longer.
Last updated 3 mins ago
Card title
Some quick example text to build on the
card title and make up the bulk of the
card's content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to
additional content. This
card
has even longer content than the first to show that equal height action.
This is a wider card with supporting text below as a natural lead-in to
additional content. This
content
is a little bit longer.
Last updated 3 mins ago
Card title
Some quick example text to build on the
card title and make up the bulk of the
card's content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to
additional content. This
card
has even longer content than the first to show that equal height action.
This is a longer card with supporting text below as a
natural lead-in to
additional
content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
a ante.
Card title
This card has supporting text below as a natural lead-in to
additional
content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat.
Card title
This card has supporting text below as a natural lead-in to
additional
content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
a ante.
Card title
This is a wider card with supporting text below as a
natural lead-in to
additional
content. This card has even longer content than the first to show that equal
height action.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid.
Nihil
anim
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea
proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea
proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid.
3
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
truck quinoa nesciunt
laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
squid single-origin coffee
nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft
beer
farm-to-table, raw denim aesthetic synth nesciunt you probably
haven't heard of them accusamus
labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid.
3
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
truck quinoa nesciunt
laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
squid single-origin coffee
nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft
beer
farm-to-table, raw denim aesthetic synth nesciunt you probably
haven't heard of them accusamus
labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid.
3
wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
truck quinoa nesciunt
laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
squid single-origin coffee
nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft
beer
farm-to-table, raw denim aesthetic synth nesciunt you probably
haven't heard of them accusamus
labore sustainable VHS.
A wonderful serenity has taken possession of my
entire soul,
like these sweet mornings of spring which I enjoy with my whole
heart. I am alone, and feel the charm of existence in this spot,
which was created for the bliss of souls like mine.
I am so happy, my dear friend, so absorbed in the exquisite
sense of mere tranquil existence, that I neglect my talents. I
should be incapable of drawing a single stroke at the present
moment; and yet I feel that I never was a greater artist than
now.
Thousand unknown plants are noticed by me: when I
hear the buzz
of the little world among the stalks, and grow familiar with the
countless indescribable forms of the insects and flies, then I
feel the presence of the Almighty, who formed us in his.
I am alone, and feel the charm of existence in this
spot, which
was created for the bliss of souls like mine. I am so happy, my
dear friend, so absorbed in the exquisite sense of mere tranquil
existence, that I neglect my talents. I should be incapable of
drawing.
A wonderful serenity has taken possession of my
entire soul,
like these sweet mornings of spring which I enjoy with my whole
heart. I am alone, and feel the charm of existence in this spot,
which was created for the bliss of souls like mine.
I am so happy, my dear friend, so absorbed in the
exquisite
sense of mere tranquil existence, that I neglect my talents. I
should be incapable of drawing a single stroke at the present
moment; and yet I feel that I never was a greater artist than
now.
Thousand unknown plants are noticed by me: when I
hear the buzz
of the little world among the stalks, and grow familiar with the
countless indescribable forms of the insects and flies, then I
feel the presence of the Almighty, who formed us in his.
I am alone, and feel the charm of existence in this
spot, which
was created for the bliss of souls like mine. I am so happy, my
dear friend, so absorbed in the exquisite sense of mere tranquil
existence, that I neglect my talents. I should be incapable of
drawing.
A wonderful serenity has taken possession of my
entire soul,
like these sweet mornings of spring which I enjoy with my whole
heart. I am alone, and feel the charm of existence in this spot,
which was created for the bliss of souls like mine.
I am so happy, my dear friend, so absorbed in the exquisite
sense of mere tranquil existence, that I neglect my talents. I
should be incapable of drawing a single stroke at the present
moment; and yet I feel that I never was a greater artist than
now.
Thousand unknown plants are noticed by me: when I
hear the buzz
of the little world among the stalks, and grow familiar with the
countless indescribable forms of the insects and flies, then I
feel the presence of the Almighty, who formed us in his.
I am alone, and feel the charm of existence in this
spot, which
was created for the bliss of souls like mine. I am so happy, my
dear friend, so absorbed in the exquisite sense of mere tranquil
existence, that I neglect my talents. I should be incapable of
drawing.
A wonderful serenity has taken possession of my
entire soul,
like these sweet mornings of spring which I enjoy with my whole
heart. I am alone, and feel the charm of existence in this spot,
which was created for the bliss of souls like mine.
I am so happy, my dear friend, so absorbed in the exquisite
sense of mere tranquil existence, that I neglect my talents. I
should be incapable of drawing a single stroke at the present
moment; and yet I feel that I never was a greater artist than
now.
Thousand unknown plants are noticed by me: when I
hear the buzz
of the little world among the stalks, and grow familiar with the
countless indescribable forms of the insects and flies, then I
feel the presence of the Almighty, who formed us in his.
I am alone, and feel the charm of existence in this
spot, which
was created for the bliss of souls like mine. I am so happy, my
dear friend, so absorbed in the exquisite sense of mere tranquil
existence, that I neglect my talents. I should be incapable of
drawing.
A wonderful serenity has taken possession of my
entire soul,
like these sweet mornings of spring which I enjoy with my whole
heart. I am alone, and feel the charm of existence in this spot,
which was created for the bliss of souls like mine.
I am so happy, my dear friend, so absorbed in the
exquisite
sense of mere tranquil existence, that I neglect my talents. I
should be incapable of drawing a single stroke at the present
moment; and yet I feel that I never was a greater artist than
now.
Thousand unknown plants are noticed by me: when I
hear the buzz
of the little world among the stalks, and grow familiar with the
countless indescribable forms of the insects and flies, then I
feel the presence of the Almighty, who formed us in his.
I am alone, and feel the charm of existence in this
spot, which
was created for the bliss of souls like mine. I am so happy, my
dear friend, so absorbed in the exquisite sense of mere tranquil
existence, that I neglect my talents. I should be incapable of
drawing.
A wonderful serenity has taken possession of my
entire soul,
like these sweet mornings of spring which I enjoy with my whole
heart. I am alone, and feel the charm of existence in this spot,
which was created for the bliss of souls like mine.
I am so happy, my dear friend, so absorbed in the exquisite
sense of mere tranquil existence, that I neglect my talents. I
should be incapable of drawing a single stroke at the present
moment; and yet I feel that I never was a greater artist than
now.
Thousand unknown plants are noticed by me: when I
hear the buzz
of the little world among the stalks, and grow familiar with the
countless indescribable forms of the insects and flies, then I
feel the presence of the Almighty, who formed us in his.
I am alone, and feel the charm of existence in this
spot, which
was created for the bliss of souls like mine. I am so happy, my
dear friend, so absorbed in the exquisite sense of mere tranquil
existence, that I neglect my talents. I should be incapable of
drawing.
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard
dummy
text ever since the 1500s, when an unknown printer took a galley
of
type
and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially
unchanged.
It
was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of
Lorem
Ipsum.
Card Title
Sub-heading text
Thousand unknown plants are noticed by me: when
I
hear
the buzz
of the little world among the stalks, and grow familiar with the
countless indescribable forms of the insects and flies, then I
feel the presence of the Almighty, who formed us in his.
I am alone, and feel the charm of existence in
this
spot, which
was created for the bliss of souls like mine. I am so happy, my
dear friend, so absorbed in the exquisite sense of mere tranquil
existence, that I neglect my talents. I should be incapable of
drawing.
Card Title Disabled
Sub-heading text Disabled
Small plates, salads & sandwiches in an intimate
setting with 12 indoor seats plus patio seating
Donec imperdiet enim et dignissim interdum.
Pellentesque in ortti tor elit. Curabitur consectetur.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim
lo-fi before they sold out
qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan.
Velit seitan
mcsweeney's
photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg
hoodie minim qui you
probably haven't heard of them et cardigan trust fund culpa biodiesel wes
anderson aesthetic. Nihil
tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
@mdo
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.
Freegan beard aliqua
cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla
carles. Tattooed cosby
sweater
food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1
sartorial. Carles non
aesthetic
exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar
deserunt.
one
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea.
Lomo bicycle rights
adipisicing
banh mi, velit ea sunt next level locavore single-origin coffee in magna
veniam. High life id vinyl,
echo park consequat quis aliquip banh mi pitchfork. Vero VHS est
adipisicing. Consectetur nisi DIY
minim
messenger bag. Cred ex in, sustainable delectus consectetur fanny pack
iphone.
two
In incididunt echo park, officia deserunt mcsweeney's proident master
cleanse thundercats sapiente
veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft
beer. Single-origin
coffee
wayfarers irure four loko, cupidatat terry richardson master cleanse.
Assumenda you probably haven't
heard of them art party fanny pack, tattooed nulla cardigan tempor ad.
Proident wolf nesciunt
sartorial
keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland
before they sold out four
loko.
Locavore enim nostrud mlkshk brooklyn nesciunt.
three
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim
lo-fi before they sold out
qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan.
Velit seitan
mcsweeney's
photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg
hoodie minim qui you
probably haven't heard of them et cardigan trust fund culpa biodiesel wes
anderson aesthetic. Nihil
tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck.
Sapiente synth id
assumenda.
Locavore sed helvetica cliche irony, thundercats you probably haven't heard
of them consequat hoodie
gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out,
terry richardson proident
brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan.
Cardigan craft beer
seitan
readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim
commodo ullamco thundercats.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr
enim lo-fi before they sold
out
qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles
cardigan. Velit seitan
mcsweeney's
photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts,
williamsburg hoodie minim qui you
probably haven't heard of them et cardigan trust fund culpa
biodiesel wes anderson aesthetic.
Nihil
tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco
consequat.
@mdo
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork
beard. Freegan beard aliqua
cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica
nulla carles. Tattooed cosby
sweater
food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson
+1 sartorial. Carles non
aesthetic
exercitation quis gentrify. Brooklyn adipisicing craft beer vice
keytar deserunt.
one
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard
ea. Lomo bicycle rights
adipisicing
banh mi, velit ea sunt next level locavore single-origin coffee in
magna veniam. High life id
vinyl,
echo park consequat quis aliquip banh mi pitchfork. Vero VHS est
adipisicing. Consectetur nisi
DIY
minim
messenger bag. Cred ex in, sustainable delectus consectetur fanny
pack iphone.
two
In incididunt echo park, officia deserunt mcsweeney's proident
master cleanse thundercats
sapiente
veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum
craft beer. Single-origin
coffee
wayfarers irure four loko, cupidatat terry richardson master
cleanse. Assumenda you probably
haven't
heard of them art party fanny pack, tattooed nulla cardigan tempor
ad. Proident wolf nesciunt
sartorial
keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea
portland before they sold out
four
loko.
Locavore enim nostrud mlkshk brooklyn nesciunt.
three
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr
enim lo-fi before they sold
out
qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles
cardigan. Velit seitan
mcsweeney's
photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts,
williamsburg hoodie minim qui you
probably haven't heard of them et cardigan trust fund culpa
biodiesel wes anderson aesthetic.
Nihil
tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco
consequat.
three
Keytar twee blog, culpa messenger bag marfa whatever delectus food
truck. Sapiente synth id
assumenda.
Locavore sed helvetica cliche irony, thundercats you probably
haven't heard of them consequat
hoodie
gluten-free lo-fi fap aliquip. Labore elit placeat before they sold
out, terry richardson
proident
brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica
artisan. Cardigan craft beer
seitan
readymade velit. VHS chambray laboris tempor veniam. Anim mollit
minim commodo ullamco
thundercats.
three
Keytar twee blog, culpa messenger bag marfa whatever delectus food
truck. Sapiente synth id
assumenda.
Locavore sed helvetica cliche irony, thundercats you probably
haven't heard of them consequat
hoodie
gluten-free lo-fi fap aliquip. Labore elit placeat before they sold
out, terry richardson
proident
brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica
artisan. Cardigan craft beer
seitan
readymade velit. VHS chambray laboris tempor veniam. Anim mollit
minim commodo ullamco
thundercats.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr
enim lo-fi before they sold
out
qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles
cardigan. Velit seitan
mcsweeney's
photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts,
williamsburg hoodie minim qui you
probably haven't heard of them et cardigan trust fund culpa
biodiesel wes anderson aesthetic.
Nihil
tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco
consequat.
two
In incididunt echo park, officia deserunt mcsweeney's proident
master cleanse thundercats
sapiente
veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum
craft beer. Single-origin
coffee
wayfarers irure four loko, cupidatat terry richardson master
cleanse. Assumenda you probably
haven't
heard of them art party fanny pack, tattooed nulla cardigan tempor
ad. Proident wolf nesciunt
sartorial
keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea
portland before they sold out
four
loko.
Locavore enim nostrud mlkshk brooklyn nesciunt.
three
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr
enim lo-fi before they sold
out
qui.
Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles
cardigan. Velit seitan
mcsweeney's
photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts,
williamsburg hoodie minim qui you
probably haven't heard of them et cardigan trust fund culpa
biodiesel wes anderson aesthetic.
Nihil
tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco
consequat.
three
Keytar twee blog, culpa messenger bag marfa whatever delectus food
truck. Sapiente synth id
assumenda.
Locavore sed helvetica cliche irony, thundercats you probably
haven't heard of them consequat
hoodie
gluten-free lo-fi fap aliquip. Labore elit placeat before they sold
out, terry richardson
proident
brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica
artisan. Cardigan craft beer
seitan
readymade velit. VHS chambray laboris tempor veniam. Anim mollit
minim commodo ullamco
thundercats.
Element for abbreviations and acronyms to show the expanded
version on hover. Abbreviations have a default underline and gain a
help cursor to provide additional context on hover and to users of
assistive technologies.
```
{% endtab %}
{% endtabs %}
# Setup
## Download From ThemeForest
First of all you will need to download the zip file from your ThemeForest account. For that, you can go to 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/
{% hint style="info" %}
Drift comes with two versions **classic-version** and **npm-version.** This step explains the installation of **classic-version** only as classic-version is very straight forwarded.
{% endhint %}
## Setup Your Project
In this step, you can copy the **classic-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/**
## Choose Layout
{% hint style="info" %}
Following folders and files are compulsory and must not be removed:
* assets/
* plugins/
{% endhint %}
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.
{% hint style="success" %}
Cheers! you have Drift Classic setup on your machine successfully with only things which you need specifically for your next generation project.
Happy Coding!
{% endhint %}
# Folders and Files Structure
Quick overview of folder structure
## Overview
The below image gives a quick overview of the folder and file structure Drift follows:
## assets/
The below image gives an insight of the assets/ folder:
# Theme Customizaton
About customization of theme for your project
Customizing theme for your own project is very straight forward in Drift Classic version.
You can start customizing the CSS files exist inside the **assets/css/{layout}/** folder.
You can also extend the CSS by adding your own .css file in this folder and including that in the HTML. Also, you are free to change any path locations as per your need.
# RTL Version
Setup right-to-left version
For Classic version, all the layouts have the pre-generated RTL file at the following path:
```
assets / css / {layout} / {theme_name}-rtl.css
assets / css / {layout} / {theme_name}-rtl.min.css
```
For further customization of RTL styling, we recommend you to create a separate custom RTL file and put all the RTL css related code of yours there.
