The brand guide utilizes bootstrap 4 so all the bootstrap classes is readily available to you. It also lets you override bootstrap variables and add your own custom css. You will never have to do inline styles ever.
The brand guide customizations take advantage of Sass: Syntactically Awesome Style Sheets and is automatically compiled every time you save. Using this approach, all elements you create will inherit the style you set and would make building websites faster and more efficient.
The Brand guide can be accessed through Project > Project Options > Brand Guide
There are three (3) main sections of the brand guide:
The builder section lets you customize your default bootstrap 4 variables. This is the easiest way to customize your site’s look and feel without having to code any css. The bootstrap variables are grouped according to use for faster navigation.
The builder section also allows you to import and export the changes so you can save a copy of it and use it on another project.
The template section is basically an editor for your site’s scss. This is where you can add additional fonts, classes, and bootstrap overrides. Below are examples of useful snippets of code you can use:
For adding additonal fonts to the system
// 1. import the font
// eg. adding 'sofia-pro' @import url("<https://use.typekit.net/chc4siz.css>");
// 2. update the base font variables
// stylelint-disable value-keyword-case
$font-family-sans-serif: sofia-pro, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif;
$headings-font-family: $font-family-monospace;
$input-btn-font-family: null;
$btn-font-family: $input-btn-font-family;
$input-font-family: $input-btn-font-family;
$custom-select-font-family: $input-font-family;
$custom-file-font-family: $input-font-family;
// stylelint-enable value-keyword-case
For mapping additional colors to theme
// eg. adding maroon and gold
$maroon: #660000;
$gold: #f6ce05;
$colors: map-merge( (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800,
"maroon": $maroon,
"gold": $gold ),
());