# 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 `scss`folder 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.