Marcel Deelen

Components

This page explains how SML components work and how they can be extended. Further down, you’ll find examples showing how they come together in real layouts.

Expanding components

Variations are implemented through small internal helper components that connect component properties to global variables.
‍

How It Works

A variation is implemented in three parts:

Values are defined in the variables
A helper component creates selectable variants
The global stylesheet maps those variants to the variables

Example: adding text color options

1. Create a Helper Component

Inside the component (e.g. Heading), add a div and give it the class name hidden.

Turn it into a new component and call it 🚫__dev — text color.
The name determines the data attribute used in custom CSS in step 4.

2. Define Variants

Inside the helper component, define variants such as:

Current color
Dark
Primary 500

Variant names become part of the attribute selector and is used in the custom CSS in step 4.

3. Add the Property

In the parent component’s properties panel, add the variants from the helper component and name the property “Text color”.

These three steps create the option to select text colors.

4. Applying the styling

In the global styles component, inside the site-specific CSS we style the three variants:
‍

[data-wf--dev-text-color--variant="primary-500"] ~ .heading { color: inherit; }

[data-wf--dev-text-color--variant="primary-500"] ~ .heading { color: var(--primary--500); }

[data-wf--dev-text-color--variant="primary-500"] ~ .heading { color: var(--base--dark); }

You can easliy extend the selector to affect multiple components.
For example:
‍

[data-wf--dev-text-color--variant="primary-500"] ~ .heading, [data-wf--dev-text-color--variant="primary-500"] ~ p { color: var(--base--dark); }

In this case we need to add to the single paragraph component the
🚫__dev — text color component and repeat step 3.

A woman in a green jacket standing by the ocean.

Components

On this page are a few example builds using the components system for snapping together full layout sections. Once a section is built, you can turn it into a locked component and hand it over to the marketing team.

See here below

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.