Use ID and class selectors whenever possible
Provide meaningful IDs and classes to your pages, content groups, rows, and widgets. Use these IDs and classes for your css selectors.
...
Avoid template IDs, classes, and elements in selectors
IDs, classes, and elements generated by the template may change as the template evolves, increasing the risk that your customizations will break over time.
Namespace your classes
When you create custom classes, there is a chance that the class names you use will match class names used by the template. In such a case, styling collisions will occur, resulting in unexpected results. To guard against this, it is best to namespace your classes by prefixing them with something unique. For example, customizations created by the Division of Finance and Administration can use the prefix “dfa-” to create class names such as “dfa-wrapper”. There is a very low chance that the template will define any classes with at dfa prefix, so the likelihood of style collisions is also very low.
Use the provided CSS custom properties
You can utilize the provided CSS custom properties to access various values used in the template.
| Code Block |
|---|
margin-right: var(--gutter-width); |
Color properties
For each color in the brand palette, the following custom properties are available:
...
| Info |
|---|
Using the hsl (hue / saturation / lightness) values is handy when you need to adjust the color or add an alpha channel (opacity). In some cases, a particular foreground-background color combo doesn’t provide sufficient color contrast, requiring the brand color to be lightened or darkened. This can be done by combining the hsl() css function with calc() to multiply the lightness by a desired factor. |
Brand colors
Brand color names here are based on how they are named in the UCI Brand Guideline. For example, UCI Blue (as listed in the guidelines) is reflected in the CSS property as uci-blue. The full color property name here is..
...
→ More: Color Palette on UCI Brand
Gray palette
In addition to UCI brand colors, a gray pallet is also provided. In order from lightest to darkest, the following are named:
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
Social media
Brand colors for the following social media platforms are named:
...