Amplify User Interface

The Amplify UI consists of a number of key areas, split over six tabs within the Amplify Section:

• Amplify Theme dashboard
• Gradients Manage theme background gradients
• Colors Manage theme color palettes
• Font Stacks Manage theme Font stacks
• Fonts Add Google fonts to your Amplify theme
• Sass Add custom Sass variables

#Theme Dashboard

The promotional and credits page for Amplify.

#Gradients

Manage the background gradients for your Amplify theme here. To create a gradient, set your gradient start color, set an end color, choose the degrees (direction of the gradient) and assign a name.

To keep all your changes, click Save Gradients, this saves your gradients to disk. Then (once you have made your theme changes) click the arrow next to Save Gradients and choose Build Sass. This will rebuild the Sass and your changes will be pulled through into the theme styling.

All gradients set in the Gradients section are used to populate the gradients property editor used when building out your content:

#Colors

Manage the theme colors for your Amplify theme here. Amplify is built using the Bulma CSS framework, Bulma lets you create your own theme via a simple set of variables. Bulma uses the following derived color variables:

• $primary
• $link
• $info
• $success
• $warning
• $danger
• $dark
• $text

Derived color variables are set via the Color Variables section (left hand side), pick from the available colors in the Colors section (right hand side).

To keep all your changes, click Save Colors, this saves your colors to disk. Click the arrow next to Save Colors and choose Build Sass. This will rebuild the Sass and your changes will be pulled through into the theme styling.

Colors set in this section are used to populate the colors property editor used when building out your content:

#Fontstacks

Manage the theme fontstacks for your Amplify theme here. Bulma (the framework Amplify is based on) uses the following derived font variables:

• $family-primary
• $family-secondary

Derived fontstack variables are set via the Fontstack Variables section (left hand side), pick from the available fontstacks in the Fontstacks section (right hand side).

To keep all your changes, click Save Fontstacks, this saves your fontstacks to disk. Click the arrow next to Save Fontstacks and choose Build Sass. This will rebuild the Sass and your changes will be pulled through into the theme styling.

#Fonts

Manage the Google fonts for your Amplify theme here. Fonts that are enabled are pulled into your master template and ready for use on your Umbraco website.

Search and import google via the built in searcher, select Choose Font to open the font picker:

Choose Add to add the font to your theme, and view a preview of the font style:

Ensure the font is enabled then click Save Google Fonts, to save your changes.

Then go to the Fontstack section and add your font to a font stack, for example here I set family-primary to have also use the Baloo Thambi 2 font:

$family-primary

Then set the value to:

'Baloo Thambi 2', BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif

#Sass

Manage Sass variables for your Amplify theme here. Amplify is built using the Bulma CSS framework Bulma uses the derived variables, for example:

$size-1 - 3rem

This is a size variable that controls text sizing, the default value is 3rem, you can override this value by entering the variable name and your new value in the Sass section. Here the value is set to 4.5rem:

To keep all your Sass variable changes, click Save Sass Variables, this saves your variables to disk. Click the arrow next to Save Sass Variables and choose Build Sass. This will rebuild the Sass and your changes will be pulled through into the theme styling.