Skins

Create custom skins and adapt Purpose to your brand’s needs.

Introduction

We want Purpose to be more than a theme. And we managed to do so by following the same principles and techniques Bootstrap developed over the year. This is why, now we can offer you a great product built as a framework from the ground-up, meaning:

  • modular Sass and HTML components
  • consistent variables
  • clean and robust code

But now, we took this a step further. We are happy to be the first on Bootstrap Theme to introduce Skins. A beautiful and easy process to adapt Purpose to your brand’s visual necessities. You can change almost anything in terms of styleguide and components. Change a few variables and Purpose will adapt: from colors and fonts to component and advanced plugins, everything will look amazing.

File structure

purpose-website-ui-kit/
├── resources/
  └── scss/
  │   ├── skins/
  │   ├──├── default/
  │   ├──├── blue/
  │   ├── custom/
  │   ├──├── _variables.scss
  └── ├──├── styles.scss

Create new skin

As you can see, all skin files are stored in the scss/skins folder. Each skin should be stored in its own folder. Also, the filenames are give by their color scheme: _light.scss or _dark.scss.

For example, if you want to create Red Skin you will create the scss/skins/red folder. Let’s say you choose a dark color scheme you will create the scss/skins/red/_dark.scss file. Within this file you will place all the variables you want to override. Make sure you keep the !default flag on. This way we make sure any other custom variable applied in the custom/_variables.scss will still take effect.

Any of the pre-built skins can be a great start for your own one. Copy and paste a skin folder and start changing variables.

Usage

Here are the steps you must follow to activate a Skin:

  • open scss/custom/_variables.scss
  • you will see there are some commented lines that contain @import statement for various skins
  • uncomment the one you want to use or import the one you just created
  • use the build tools to compile the new sass and preview changes

Considerations

There are some things you should know when using Skins, especially the ones with dark color schemes.

Depending on the color scheme’s type, light/dark, you will need to change the .navbar's tag modifier classes directly in the HTML markup:

  • when using light mode you will need to use the .navbar-light .bg-white modifier classes (it is used by default)
  • when using dark mode you will need to use the .navbar-dark .bg-dark modifier classes.

Same thing goes for the footer, excepting the situations where you use the .bg-primary color or any pre-defined colors. Apply these directly on the .footer tag from the HTML markup:

  • when using light mode you will need to use the .footer-light .bg-section-secondary modifier classes (it is used by default)
  • when using dark mode you will need to use the .footer-dark .bg-dark modifier classes.