The styling of standard website elements such as links, buttons & form inputs are all controlled using Root Variables to give a consistent appearance throughout the project.
Utility Classes
There are 2 button classes available in the Framework. Add these to any html button element and it will inherit the styling defined in the root variables.
.btn-1 linked to btn-1 root-variables.
.btn-2 linked to btn-2 root-variables.
Example usage:
<button class="btn-1">Example Button</button>
Additional Customisation
The default configuration of the Framework maintains a consistent appearance for common website elements. There may however be occasions where additional customisation is needed, for example to change the padding of a button for a given breakpoint.
This can be achieved by adding a custom media query to the style.css stylesheet to adjust the desired root variable.
Example usage:
@media only screen and (max-width: 501px) {
:root {
--btn-1-padding: 0.25rem 1rem;
}
}