The style guide is implemented by through CSS - meaning that the HTML provides the structure of the content but does not contain information about how the content is displayed. This clear separation of content from presentation means that ultimately what is developed is more future proof and adaptable at scale. If for example CSU changed it’s corporate colours then instead of finding every instance of the colour being applied to the content - backgrounds, text colours, borders - it can be changed in one location, the CSS file.
The Base section of this site shows you what the raw HTML tags show - plus a few modifying classes that change how an element is displayed. These can then be further augmented by adding additional classes.
To add styles to content you add a class to a HTML element. For example:
<h2 class="underline csu-red">Heres is a Heading</h2>
<p class="csu-green-text">Here is a paragraph with green text</p>Which would display a heading with a red underline and some green paragraph text.
The Colours section shows the colour palettes that are available to use in the style guide.
The Modifiers section displays a range of modifiers that can be applied to HTML tags to change their visual styling. For example the Colours section demonstrates how to apply colours to different elements.
The Blocks section shows a variety of prebuilt and styled elements that can be used in sites and help simplify the display of different content for different purposes.
The Templates section has a variety of prebuilt templates that can be used as starting points for sites and landing pages.