Make Ranpariya Theme works in your machine

Here below is step by step guide to setup RTDL Theme in your machine.
1. Pre Requestigation
You should have NPM (Node Package Manager) installed in your computer in order to run grunt and gulp commands.
2. Install Bower

Bower is a command line utility to install front-end dependency. Install it with npm using following command.

$ npm install -g bower

If you are using multiple packages within your project it’s often a good idea to list these packages in a bower.json file. This will allow you to install and update multiple packages with a single command.

3. Install Gulp

Gulp is command utility for CSS preprocessor and compile project in minified Javascript and CSS files. Here is command to install Gulp.

npm install --global gulp-cli
4. Setup the Ranpariya Theme

Now all software pre-requestigation is done, Now set Ranpariya Theme at desire location in your computer.

5. Install NPM packages

Install all required NPM packages that are listed in package.json. All you need to do here is,

  • Open terminal and move your terminal cursor to Ranpariya Theme root. (package.json must be exists here)
  • Fire following command to install npm packages.
$ npm install

NOTE: You may need to fire above command from root user.

6. Generate CSS from LESS

Generating CSS from LESS is easy in Ranpariya Theme. You just need to fire following command from root of the theme directory.

$ gulp

Above "gulp" command will generate CSS files from less and minified all script files.

You are all done now and open any HTML files in your browser and start working for your new aim :)

EXTRA: Generate SCSS files from LESS

Generating SCSS files from LESS files is easy. All you need to do is, Fire following command from root of the RTDL Theme directory and SCSS files will be generated automatically in "sass" directory.

$ gulp lessToScss

Once SCSS files are generated from LESS, Now you can generate minified CSS files from SCSS files, Fire following command to generate minified CSS from SCSS.

$ gulp sassToCSS
Theme Configurations
Theme Name Class name to add in body tag Color schemes
Strawberry
Strawberry Light
.strawberry-theme
.strawberry-light-theme
Teal
Teal Light
.teal-theme
.teal-light-theme
Fresh Apple
Fresh Apple Light
.fresh-apple-theme
.fresh-apple-light-theme
Blueberry
Blueberry Light
.blueberry-theme
.blueberry-light-theme
Orange
Orange Light
.orange-theme
.orange-light-theme
Almond
Almond Light
.almond-theme
.almond-light-theme
Lime
Lime Light
.lime-theme
.lime-light-theme
Elderberry
Elderberry Light
.elderberry-theme
.elderberry-light-theme