Guidelines¶

Development guidelines¶

Please have a look at our ⚙️ Technical Guidelines when contributing to this project.

Component styling guidelines¶

Translucent is all about consistency. Thus when you’re developing / maintaining Translucent, you’ve to follow certain component styling guidelines to keep that consistency.

Component attributes¶

Components can have attributes, for example:

<foo-bar example-attribute="value" disabled></foo-bar>

In this example, example-attribute & disabled are attributes. Attribute names must follow this naming scheme:

The name must self-explanatory (at least to a certain point)
The name must use the kebab case letter case style

Theme mode¶

The BaseComponent() class will automatically set the theme mode on the component itself via theme-mode attribute. This attribute is also updated when the theme mode is switched.

Hint

This is done, so that the theme mode can be queried within the component’s CSS like this:

:host([theme-mode="light"]) element {
    /* … */
}

:host([theme-mode="dark"]) element {
    /* … */
}

Full-width components¶

Components can either be rendered in a full-width (e.g. block) or non-full-width (e.g. inline) manner by design. The differences are:

Full-width components must always using the full width (i.e. 100%)
Non-full-width components must only use the required width (i.e. dynamic width)

While the behaviour of full-width components can’t be switched, non-full-width components should be able to be switched to full-width. This must be achieved by implementing the full-width component attribute.

Hint

The decision to render a component full-width or non-full-width by design is based on common sense or these simple questions:

Which is the common usecase for the component?
Will the user use the component mostly full-width or not?

As a rule of thumb, most components will be rendered full-width, except for the ones which are used as inline (text) elements (e.g. icons, links).