Apply styling to the core components
There are two recommended methods available to style core components.
- Simple method
-
-
Uses global CSS variables for global styling across all core components.
-
Variables are simple to change and are applied across all components.
-
Change basic colors and have limited control over the font and font sizes used.
-
Newly released components inherit these color configurations automatically upon release.
-
- Advanced method
-
-
Overrides an individual component’s CSS.
-
Fine control over what you can change in a component.
-
Requires greater knowledge of web development.
-
Needs to be written for every component.
-
Can not be applied globally.
-
Simple method
A component’s CSS allows overriding some basic styling using CSS variables.
These common variables allow you to set basic, globally-defined starting colors, which all components will use based on their configuration properties.
To discover what variables apply to a component, you can experiment by changing the values and observing its effect on the page. You can also use your browser’s development mode to inspect the elements of the page and determine if they are deriving a value from a specific CSS variable.
Fonts
You can control the basic font sizes used or the primary font for most components. The style values in this section are the general defaults used across all components. These can be changed to allow you to set a smaller or larger font size or an alternative font family.
--squiz-global-font-family: 'IBM Plex Sans', sans-serif;
--squiz-global-font-size-xss: 0.75rem;
--squiz-global-font-size-xs: 1rem;
--squiz-global-font-size-s: 1.25rem;
--squiz-global-font-size-m: 1.5rem;
--squiz-global-font-size-l: 2rem;
--squiz-global-font-size-xl: 3rem;
--squiz-global-font-size-xxl: 4rem;
--squiz-global-line-height-xss: 1rem;
--squiz-global-line-height-xs: 1.5rem;
--squiz-global-line-height-s: 1.625rem;
--squiz-global-line-height-m: 2rem;
--squiz-global-line-height-l: 2.75rem;
--squiz-global-line-height-xl: 4rem;
--squiz-global-line-height-xxl: 5.25rem;Light and dark themes
Most components allow you to apply a dark or light theme. The styling for these themes is controlled using variables that let you specify the colors used by each theme. These variables require a valid CSS color name or color hex value. For example:
-
white; or -
#ffffff.
/* Light theme */
--squiz-global-theme-light-color: <css colour code or name>;
--squiz-global-theme-light-background: <css colour code or name>;
--squiz-global-theme-light-button-color: <css colour code or name>;
--squiz-global-theme-light-button-background: <css colour code or name>;
--squiz-global-theme-light-button-hover-color: <css colour code or name>;
--squiz-global-theme-light-button-hover-background: <css colour code or name>;
/* Dark theme */
--squiz-global-theme-dark-color: <css colour code or name>;
--squiz-global-theme-dark-background: <css colour code or name>;
--squiz-global-theme-dark-button-color: <css colour code or name>;
--squiz-global-theme-dark-button-background: <css colour code or name>;
--squiz-global-theme-dark-button-hover-color: <css colour code or name>;
--squiz-global-theme-dark-button-hover-background: <css colour code or name>;Non-theme colours
Not all components use the themes, and some use additional styles.
These variables require a valid CSS color name or color hex value. For example:
-
white; or -
#ffffff.
--squiz-global-default-link-color: <css colour code or name>;
--squiz-global-default-color: <css colour code or name>;
--squiz-global-default-background: <css colour code or name>;
--squiz-global-default-background-hover: <css colour code or name>;
--squiz-global-default-border: <css colour code or name>;
--squiz-global-default-button-color: <css colour code or name>;
--squiz-global-default-button-background: <css colour code or name>;
--squiz-global-default-button-color-hover: <css colour code or name>;
--squiz-global-default-button-background-hover: <css colour code or name>;Advanced method
Squiz components use a CSS framework called CSS modules to scope all the class names used locally for components. This scoping prevents the styles from affecting other classes already applied to your website.
| The CSS modules framework dynamically generates the class names based on the styling contents of the class. The exact class names will change over time as changes are made to components. You should not override or attach styles directly to the classes because these will likely change over time. |
How to style components
Dynamically generated class names do not prevent you from applying your styling. A different approach is needed when making the changes.
Normally, for a drop-down, you would have a simple class (like dropdown) applied to the element, which you could use when defining your custom styling.
The CSS classes for Squiz components are similar to _dropdown_ct70p_2 because they are generated.
In updated versions of the components, the ct70p_2 part of the class can change.
CSS has a useful feature called attribute selectors that allow these dynamic class names to be styled.
These selectors can include a special * character, which matches one occurrence of a value in an attribute, allowing you to style an element with a class starting with a given pattern.
This pattern matching means we can style our drop-down element using the css selector [class*="_dropdown_"].
[class*="_dropdown_"]{
background-color: red;
}._dropdown_ct70p_2{
background-color: red;
}Shared classes in components
Some CSS classes are shared among Squiz components.
For example, _modal_1f8g2_1.
Some shared class information centralizes logic to make testing and updates easier.
CSS Modules generates the hash portion of the class name from the contents of the styling, which makes these classes safe to share among components.
However, two components might use two different versions of the underlying logic. This approach works because each component has a self-contained copy of the logic. If there are styling differences between these two versions, the components might share some classes, but others might differ in the hash value.
You can add styling to these classes as a shortcut to apply styling across these shared features. Version differences might cause clashes in the CSS that could require you to maintain the styling on the shared classes when components are updated.