Boomerang UI Kit

Customization

Learn how to create your own style without changing the theme’s core files so you can take advantage of future updates.

SCSS method

Is highly recommended that all the customized styles to be stored only within the user’s files from the scssfolder so you can update this theme everytime with no effort. When you update Boomerang, make sure you backup your files and not to ovveride the user’s custom file, that may contain styles you have created already.

In assets/scss directory you will find two files dedicated for custom edit and additions:

  • _custom-variables.scss will contain each variable you want to edit. Simply copy the variables you need to edit from the main _variables.scss and paste it in this file. It will automatically override the default values with the new ones.
  • _custom.scss will contain styles you want to add or edit.

Optional components

You can choose what components to be included in the stylesheet that will be used in the production mode. This will help decreasing the file’s size which will conduct to a faster page loading speed. You can re-include those compoenents any time you want.

For choosing the components you have to comment by adding a // at the start of the line or remove the line entirely from theme.scss and _components.scss from the scss. This will remove the Bootstrap components and the theme’s custom ones as well.

Compile to CSS

If you chose the SCSS method, after you make the modifications, you will need to save and compile the changes into a CSS file. It is useful if you want to change primary colors, fonts and so on. Follow the next steps in order to do that:

  • Download and install the app from this link - http://scout-app.io/ - or any other app you prefer
  • Open the _variables.scss file located in assets/scss
  • Copy and paste the variables you want to edit in the _custom-variables.scss file
  • Replace the variable values with the one you need and save the changes
  • Open the installed app, import your project, look for theme.scss and compile it
  • That’s it!

CSS method

If you need to create/edit some styles we recommend you to use the custom.css from the assets folder. This way you will keep the theme core files untouched and be able to get all the future updates without having to make any modifications.

You can rename the custom file whatever you want, but make sure to include that after the theme’s main style.

We do not recommend using this method to override default values or blocks of code. Use this only if you want to add additional styles that could add or improve some elements. For modifying default values we recommend using the SCSS method.