Customizing CSS

SCSS Method

The most flexible way to edit the theme CSS or to add your own code and components is to use SCSS. As mentioned before, there are two files already prepared for your changes - user/_user-variables.scss and user/_user.scss.

Configure

To configure the theme, e.g. to change colours for some elements, to change font sizes, etc., use _user-variables.scss. Any variable from scss/bootstrap/_variables.scss or scss/modules/_variables.scss can be overridden here with your own value. Just copy the line from the theme's/Bootstrap's _variables.scss config files, paste it here and replace the value with your own.

Your own code

To add your own CSS code, declare it in the _user.scss file.

Compile

To compile the SCSS, you can use the gulpfile.js included in this theme (recommended) or you can download an app for your OS and compile it that way. In case you would be using an app, don’t forget to add vendor prefixes to your code too (done by Autoprefixer in Gulp ).

Recommended
CSS Method

If you prefer to work with Varkala as a static source and not to use Gulp or Sass, you will need to add your custom CSS through a separate CSS file. For this use, there is a blank custom.css file in the CSS folder.

Editing theme's CSS files directly is not recommended as it makes all the future updates really difficult.