Drift BootStrap 4, HTML, jQuery
  • Overview
  • Installation and Setup
    • Setup
    • Folders and Files Structure
  • Stylesheets
    • Overview
    • Sass Variables
    • Layouts & Theme
    • Fonts
    • Colors
    • Margin & Paddings
    • Theme Customization
    • RTL Version
  • Components
    • Alerts
    • Badges
    • Breadcrumbs
    • Buttons
    • Button Group
    • Cards
    • Card Group
    • Collapse
    • Dropdowns
    • Input Group
    • Jumbotron
    • List Group
    • Navbar
    • Navs & Tabs
    • Pagination
    • Progress Bar
    • Scrollspy
    • Typography
  • Classic Version
    • Setup
    • Folders and Files Structure
    • Theme Customizaton
    • RTL Version
Powered by GitBook
On this page

Was this helpful?

  1. Stylesheets

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:

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:

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:

$ gulp style-{layout}-{theme_name}

/* For example: $ gulp style-crm-main */

To generate a minified version, use the following command

$ gulp min-style-{layout}-{theme_name}

/* For example: $ gulp style-crm-main */
PreviousMargin & PaddingsNextRTL Version

Last updated 5 years ago

Was this helpful?