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.
Jacker.io is a trading name of Newmarket Technology Ltd, Company no. 09175857.
Registered VAT no. 194409584. Copyright © 2018-2020 Jacker.io, All rights reserved.
Site based on Vendr docs from Outfield Digital Ltd | Licenced under MIT.