How to modify Bender theme

From Osclass
Jump to: navigation, search

Bender's CSS style is done with SASS (Syntactically Awesome Stylesheets). Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS), which makes it easier to work with styles on your website.


SASS require to be compiled. This is done with a Grunt task and Grunt runs on NodeJS.

First, install NodeJS form the official website.

Later, you need to install Grunt and all its dependencies, on your Osclass root folder. Use this command:

npm install

Hoorray! You have Grunt installed and working (Once you have nodeJS and grunt installed, you don't need to do this again)

Doing some CSS work

The main file (main.css) is located on bender/css folder and is minified (your page will load faster). Modifying main.css is possible, but can be really hard to do. Instead, it's better to modify and work with the sass files (.scss) located in bender/sass.

Once you modify the files, you need to "compile" and minify them. We have to set up a Grunt task, go to your Osclass root folder and use the following command:

grunt sass