Apply styling to the core components

There are two methods that we recommend to style our core components.

The simple method uses the global CSS variables for global styling across all core components. These variables are simple to change and are applied across all components. They are, however, more limited in what they can do. You can change basic colors and have limited control over the font and font sizes used. Styling your components using these variables has the advantage that newly released components will inherit these color configurations automatically when new components are released.

The advanced method is by overriding an individual component’s CSS. This allows finer control of what you can change but requires greater knowledge of web development and needs to be written for each component.

We have configured our components CSS to allow overriding some basic styling via CSS variables These variable allow you to set a basic starting colours which all components will make use of in some way, not all components make use of all variables but most do in some way.

To find out what variables effect what in a component you can experiment by changing the values and observing what effect it has on the page or you can make use of your browsers development mode to inspect the elements of the page and determine if they are deriving a value from a specific CSS variable or not.

Squiz core components use standard CSS and the BEM methodology to control how each component is presented to the user.

Styling components using BEM (Block Element Modifier) involves naming CSS classes with a specific structure that clearly identifies a component as a block, its internal parts as elements, and any variations of the component as modifiers allowing for highly organized and reusable styles within your project by clearly defining the relationships between different parts of a component.

Key points about BEM:

Naming convention: Class names follow the pattern: block__element—​modifier.

Block: Represents the main component itself, like a "header" or "button."

Element: A part of the block, like a "title" within a "header" or an "icon" within a "button."

Modifier: A flag that changes the appearance of a block or element, like "large" or "active".

where:

card: The block, representing the entire card component.

card__title: An element within the card, specifically the title.

card__button—​primary: A button element within the card, with a "primary" modifier class.

To make changes to the presentation of each component, simply add new rules where the selector targets the component you wish to change.

Add the styles created following the guidelines above to you Matrix site along with the rest of your site styles.