Aldrich: Tips for creating custom css
- Todd McGill
- Meredith Ehrenberg
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 a 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.
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 | 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. |
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.
/* Example: UCI Blue color */
--color-uci-blue→ More: Color Palette on UCI Brand
Gray palette
A palette of nine shades of gray is provided with shades named gray-100 through gray-900, lightest to darkest.
/* Example: gray-500 color */
--color-gray-500Social media
Brand colors for several social media platforms are included. Check your browser inspector for the full list.
/* Example: Reddit color */
--color-redditFont 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. |