Purpose Website 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.

Sass

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 anytime with no effort. When you update Purpose, 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/user directory you will find two files dedicated for custom edit and additions:

  • _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.
  • _styles.scss will contain styles you want to add or edit.
Compiling changes
In order to see the changes, running Gulp comand is required. To learn more about Gulp go the dedicated page that can be found in the left menu.

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 file. This will remove the Bootstrap components and the theme’s custom ones as well.

Colors

Many of Purpose’s various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets.

All colors available in Purpose, are available as Sass variables and a Sass map in scss/purpose/_variables.scss file.

For example, if you need to change the primary color, all you need to do is to add a $primary variable to the user’s variables file and add the color’s value you want:

$primary: #ff3b00

The same procedure applies to all other components or utilities.

Typography

Changing the typeface is easy. First, find the font you like. The more convinient and popular way is to choose from one of the options that Google Fonts provides and then:

  • Include the font family link in the <head> section of your page.

<link href="//fonts.googleapis.com/css?family=Nunito:400,600,700,800" rel="stylesheet">

  • Edit the variable corresponding to the typeface from user’s variables file

$font-family-base: 'Nunito', sans-serif;
$font-family-alt: 'Nunito', sans-serif;