With the introduction of Sass compilation, as a core feature of the Studio module, you can now make use of Sass variables to develop the global styles for your build.
These global styles will serve as the base of your branding and, in combination, with Blocks and Pages provided in Layout Library and Visual Page Builder, you can build websites faster.
These can found with Code Editor > "assets" > "css" > "modules" > "module_19 (Studio)" > "_custom-variables.scss"
Customising With Studio
Upon initial installation of the Studio module, you will be provided with your own _custom-variables.scss file, which includes the latest variables we offer. From here, you have freedom to do any of the following actions:
- Edit the values of variables already provided, or
- Create new variables to take your customisation further.
Note: Since Bootstrap 4 is included as part of the offering from Studio module, you also have the freedom to copy variables from the Bootstrap source code and overwrite their default values.
Basics to get you started:
You have complete freedom to change any values you see fit. If there is something you do not like and wish to revert, you can always copy the latest variables from our Studio - Latest Studio Variables.
"$color-primary:" is the variable name.
"#1e94e6;" is the value.
Note: If a variable name is changed, then all references to that variable, will need to be changed too.
"Resets" are offered as a means to quickly reset a style back to its barest state. These are particularly useful if you want to quickly overwrite a style, for a layout, that is part of Studio module or Bootstrap.
"1.1 Colors" represent the main colour palette for Studio layouts. These will typically be used to represent your branding or unique colour scheme.
The variable name is followed by a colour value, with the colour value being represented as a HEX value.
To avoid confusion, if you change the colour value, it is recommended that you change the variable name to something similar.
Directly below "1.1 Colours", you have the primary, secondary, tertiary, accent, greyscale, and background colour variables.
You can change the value of these to be a colour value or a variable name from above, this will reflect in your Pages where a primary colour is used, for example, your branding colours.
These contain the location of the fonts used, as well as the fonts for where they are applied, and text formatting.
Here, you can add your own fonts used for your Site; and you can change the sizes used for each format of text by changing the number or percent value after the variable name.
These contain the colours used for text on your Pages.
The variable name is followed by a colour value. A new variable (e.g. color-text-primary or color-text-secondary) which can be changed; using variables used in "1.1 Colors" or custom colours.
This contains one line of code, referring to headings.
$header-font-family: "Montserrat", sans-serif;
This allows for consistency by utilising the same font-family across all header elements. However, if multiple fonts are added above, then extra variables can be added to differentiate the font-family between different headings.
Hero headers are utilised within hero layouts and are normally H1's that are customised specifically for said layouts. These customisations are normally larger font sizes and line heights.
This section contains the variables needed for customising different aspects of the hero headers, such as: font-size, font-weight, font-weight-bold, font-weight-light, line-height, margin, and text-color.
These contain the variables for completely customising the native heading elements that can be found on pages (e.g H1, H2, H3, H4, H5, H6). The variables present to enable customisation for these headings include: font-size, font-weight, font-weight-bold, font-weight-light, line-height, margin, and text-color.
This contains two lines of code, referring to the body text.
$body-font-family: "Montserrat", sans-serif;
$font-awesome-font-family: "Font Awesome 5 Free";
This enables you to change the font-family used for the body text, and font-awesome enables you to include icons.
We also include font-awesome as a variable so users can use icons within your styling.
This contains variables that enable you to modify the font-size, font-weight, line-height, and margins of basic paragraph text.
This section contains variables that enable you to customise all aspects of blockquotes and their associated citations. Variables included enable you to modify the font-size, font-weight, line-height, margins, and font-style of these elements.
This contains variables that enable you to modify the font-size, font-weight, line-height, and margins of caption text.
This section contains variables that enable you to customise all aspects of basic anchor links. Variables included enable you to modify the text colour, the cursor when hovering over a link, font-size, font-weight, the text colour when hovering over or clicking a link, and line-height.
"Bullet and Ordered List"
This section contains variables that enable you to customise all aspects of different types of lists. Variables included enable you to modify the font-size, font-weight, line-height, margin, and position of the list item markers (style-position).
This section contains variables that enable you to customise the font sizes of the three different defined sizes of icons (normal, medium, large).
This contains one line of code which enables you to change the border-radius of an image.
"2.2 Buttons and States"
This section contains variables that enable you to customise different aspects of the various button types used in layouts.
For consistency purposes, certain variables are shared globally across all button types. Variables included enable you to modify the border-radius, border-width, font-size, font-weight, line-height and text-decoration.
There are also variables related to the specified size of the button, like those reflected in the Figma community file (small and large), such as: font-size, line-height, and padding inside the button.
Button Specific Styling
Directly below "Global Buttons", you have the variables that are specific to each button type such as: primary, primary outline, secondary, secondary outline, tertiary, tertiary outline, danger, danger outline, warning, warning outline, success, and success outline.
These variables enable you to modify the background-color, border, text-color, focus-background-color, focus-border-color, focus-text-color, hover-background-color, hover-border-color, and hover-text-color.
"2.3 Form Inputs"
This section contains variables that enable you to customise different aspects of native form elements and their associated labels.
Variables included enable you to modify the border-radius, font-size, font-weight, height, line-height, and padding inside input fields; and modify the font-size, font-weight, line-height, margin, and text-color of their associated labels.
"2.4 Item Layouts"
Items layouts include Bootstrap cards and Studio Forms that are included in Blocks from the layout library. Some aspects of their styling are not tied to their individual blocks and are considered global styling.
Variables included enable you to modify the border-radius, padding inside the card body, and padding inside the card header; and modify the border-radius of Studio Forms, padding inside of Forms, and margin below form groups.
This section contains two lines of code which enable you to modify the padding of the top and bottom of all of our Blocks, except special cases, like Headers.
Block-padding refers to the value of padding spacing starting on mobile viewports, and block-lg-padding refers to the value of padding spacing starting on desktop viewports.
$block-padding: 50px 0;
$block-lg-padding: 100px 0;
These are the different viewport sizes that nearly all devices adhere to, and these are where the design of a page can drastically change.
For example: desktop view to tablet view, or tablet view to mobile view.
You shouldn't need to edit these, although you can do if you would prefer to. These values are set at Bootstrap default.