...
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 a dfa prefix, so the likelihood of style collisions is also very low.
...
| Code Block |
|---|
margin-right: var(--gutter-width); |
→ More: Custom properties on MDN
There are many properties available with some properties and categories described here. A full list of properties can be found using your browser’s inspector.
...
Color properties
For each color in the brand palette, the following custom properties are available:
Property syntaxValue | What this is |
|---|---|
--color-[color name] | Hex value of the color. |
--hue-[color name] | Color hue value in degrees. |
--saturation-[color name] | Color saturation value as a percent. |
--lightness-[color name] | Color lightness value as a percent. |
...
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..
| Code Block |
|---|
/* Example: UCI Blue color */
--color-uci-blue |
→ 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
...
A palette of nine shades of gray is provided with shades named gray-100 through gray-900, lightest to darkest.
| Code Block |
|---|
/* Example: gray-500 color */
--color-gray-500 |
Social media
Brand colors for the following several social media platforms are named:
...
...
flickr
...
...
...
medium
...
...
podcast
...
...
snapchat
...
snapchat-alt
...
soundcloud
...
tiktok
...
tumblr
...
...
vimeo
...
vimeo-alt
...
included. Check your browser inspector for the full list.
| Code Block |
|---|
/* Example: Reddit color */
--color-reddit |
Font stuff
Property | What this is |
|---|---|
--font-color-dark | Standard dark font color. |
--font-color-light | Standard light font color. |
--font-size-base | Standard font size upon which all other font sizes are based. |
--font-size-[ xs | sm | lg | xl ] | Font size variations, extra small (xs) through extra large (xl). |
--font-size-[ h1 | h2 | h3 | h4 | h5 | h6 ] | Font sizes used in headings. |
--font-family-[ serif | sans-serif | slab ] | Font families used in the template. |
Overlays
Ensure sufficient contrast when text is displayed over an image by placing an overlay between the text and the image.
Property | What this is |
|---|---|
--overlay-dark-min | Ensures minimum contrast when light text (--font-color-lght) is placed over an image. |
--overlay-dark | Provides enhanced contrast for light text (--font-color-light) on images. |
--overlay-light-min | Ensures minimum contrast when dark text (--font-color-dark) is placed over an image. |
--overlay-light | Provides enhanced contrast for dark text (--font-color-dark) on images. |
Borders
These properties define the standard appearance for borders.
Property | What this is |
|---|---|
--layout-border-width | Specifies the standard border width. |
--layout-border-color | Specifies the standard border color. |
--layout-border | Complete border definition, using width and color properties listed above. |
Other handy properties
Property | What this is |
|---|---|
--border-radius | Specifies the standard border radius. |
--transition-duration | Specifies the standard duration for css transitions. |
--gutter-width | The gutter width applied between widgets. |