Quick Start

1. Requirements

Before proceeding, you need to have the latest stable node.js
Recommended environment:
  • node js 20+
  • npm js 10+

2. Installation

Open package folder and install its dependencies. We recommended yarn or npm.
Script Project Folder
Install npm
 
                          
cd project-folder/package/demos
npm install
Install Gulp
 
                          
npm install --global gulp-cli
Start
 
                          
gulp
Build
 
                          
gulp build

3. Color Themes

By default, Modernize applies the default theme using the data-color-theme attribute to define the skin option. You can modify it or add your custom skin as needed.

By Default we are giving 6 color themes :

Blue_Theme Aqua_Theme Purple_Theme Green_Theme Cyan_Theme Orange_Theme 
                
<html lang="en" dir="ltr" data-bs-theme="light" data-color-theme="Blue_Theme" data-layout="vertical">

4. Theming

Modernize offers both light and dark style options, with the light style set as the default.

By Default we are giving 2 color themes, you just need to change attribute of data-bs-theme :

light dark 
                
<html lang="en" dir="ltr" data-bs-theme="dark" data-color-theme="Blue_Theme" data-layout="vertical">

5. RTL Supported

Modernize comes with built-in RTL support by default.

To enable RTL direction, add dir="rtl" attribute to the html element.

ltr rtl 
                
<html lang="en" dir="rtl" data-bs-theme="dark" data-color-theme="Blue_Theme" data-layout="vertical">