Looper comes with
scss directory in
src/assets. In the
scss directory you will look file structure that looks like this:
scss/ ├── custom/ │ ├── _variables-custom-dark.scss │ └── _variables-custom.scss ├── dark/ │ ├── bootstrap/ │ ├── components/ │ ├── _mixins.scss │ ├── _variable-bs-overrides.scss │ └── _variables.scss ├── default/ │ ├── bootstrap/ │ ├── components/ │ ├── _mixins.scss │ ├── _variable-bs-overrides.scss │ └── _variables.scss ├── custom-dark.scss ├── custom.scss ├── theme-dark.scss └── theme.scss
Looper comes with `default` and `dark` skin which are separated in their own folders, see the folder structure above. Whenever possible, avoid modifying Looper core files. You can use
custom.scss instead if you want to modify or creating new components. This is the best strategy to make it easier for you to update Looper when a new version is released.
This folder is where custom bootstrap styles lives. With some effort, you can modify the look of Bootstrap components by override Bootstrap variables using
_variable-custom.scss file. If you want to go deeper, you can use our
custom.scss file to write your own styles.
The components directory contains all new components that included in Looper. Each components separated in their own files in this directory. You can edit the look of each components by override looper components variables using
_variable-custom.scss file, as well as
custom.scss if you want to write your own styles.