Repository navigation
Utility Classes
These classes are generated from the Design Tokens and are available in every output: app, editor, PDF, Word and XBRL. Use them in Vue templates, component HTML or the editor. The names below use the default prefix srl-.
For every color in colors:
| Class | Effect |
|---|---|
.srl-color-<name> |
color: <name> |
.srl-bg-<name> |
background-color: <name> (+ color: on-<name> if that color exists) |
.srl-bg-transparent |
background-color: transparent |
No bg class is created for on-* colors.
<section class="srl-bg-primary-1000">Text automatically uses on-primary-1000</section>
<span class="srl-color-secondary-1000">Highlighted</span>For every text style in typography:
| Class | Effect |
|---|---|
.srl-typo-<name> |
font family, size, line height, weight, style (+ color, letter spacing, text transform if defined), responsive |
<p class="srl-typo-lead">…</p>The class does not set margins. Use the mixin with true if you need them: @include srl.typography-lead(true).
For every step <n> in spacer.spacer (e.g. 100, 200, 400):
| Margin | Padding | Property |
|---|---|---|
.srl-ma-<n> |
.srl-pa-<n> |
all sides |
.srl-my-<n> |
.srl-py-<n> |
top + bottom (block) |
.srl-mx-<n> |
.srl-px-<n> |
left + right (inline) |
.srl-mt-<n> |
.srl-pt-<n> |
top |
.srl-mr-<n> |
.srl-pr-<n> |
right |
.srl-mb-<n> |
.srl-pb-<n> |
bottom |
.srl-ml-<n> |
.srl-pl-<n> |
left |
Gaps (flex/grid): .srl-gap-<n>, .srl-row-gap-<n>, .srl-column-gap-<n>.
Every class also exists with -none (value 0), e.g. .srl-mt-none, .srl-gap-none.
The values follow the breakpoints and print values of the spacer. In Word, physical properties are used (margin-top), elsewhere logical ones (margin-block-start).
<div class="srl-mt-400 srl-px-200">…</div>| Class | Effect |
|---|---|
.srl-list-reset |
Removes list style, margin and padding (including on li) |
.srl-trim-margins |
First child without top margin, last child without bottom margin |
.srl-clearfix |
Clears floats |
The classes set by the Livingdocs properties (e.g. srl-horizontal-center, srl-reverse, srl-hide-quote-characters) are listed in Component Properties.
All tokens are also available as CSS variables on :root, e.g. in inline styles or plain CSS:
| Variable | Source |
|---|---|
--srl-color-<name> |
colors |
--srl-typo-<name>-<property> |
typography |
--srl-spacer-<n> |
spacer |
--srl-container-max-width, --srl-container-padding
|
grid.containers |
--srl-gutter-columns, --srl-gutter-column-gap, --srl-gutter-row-gap
|
grid |
--srl-breakpoint-<name> |
grid.breakpoints |
You can register your own responsive variables with srl.system-add-root-style(). See SCSS Mixins and Functions.