Video Overview
Setting Variables
Root variables are located at the top of the colony-structure.css and colony-style.css stylesheets. You can set the variables using the same acceptable values and CSS syntax as the elements they are controlling.
Example usage:
:root {
--grey: #202020;
--grey: rgba(20,20,20,1);
--grey: grey;
--space: 25px;
--border: 1px 1px var(--grey);
}
Variable Usage
Once set the variables will automatically be applied to the html elements and utility classes that they are controlling. You can also utilise them in your custom code by using the variable name in place of an absolute value
Example usage:
.example { background: var(--grey); }
.example { margin-top: var(--space-xlrg); }
.example { border: var(--border); }
Responsive
To handle responsive effectively the value of some spacing & font-size variables can be changed at different breakpoints. The colony-structure.css and colony-style.css stylesheets have pre-defined media queries containing these variables so you can adjust the values according to the screen size.
Example usage:
@media only screen and (max-width: 1350px) {
:root {
--html-font-size: 17.5px;
}
}
@media only screen and (max-width: 1100px) {
:root {
--html-font-size: 17px;
}
}
@media only screen and (max-width: 800px) {
:root {
--html-font-size: 16.5px;
}
}
@media only screen and (max-width: 501px) {
:root {
--html-font-size: 16px;
}
}
Available Variables
A walkthrough of all the available variables in the colony-style.css file and their common usage.