Design System
Utilities
The Computacenter Design System provides a set of CSS utility classes that can be used on any element in order to modify anything from colour to padding or margins.
Layout
Syntax example: .flow: + inline = <div class=“flow:inline“>
.measure
restricts element width to one measure token
.flow:+block|inline
applies the formatting context to all direct children and adds a small gap between each
.margin:+block|inline
adds a standard unit of margin in the specified direction
.padding:+block|inline
adds a standard unit of margin in the specified direction
.height:+xsmall|small|medium|large|xlarge
sets the element height
.width:+xsmall|small|medium|large|xlarge
sets the element width
.flex:+block|inline
sets the element display value to the specified flex direction
.justify:+end|start|center|between|around
sets justify-content to the specified value
.align:+end|start|center|baseline
sets align-items to the specified value
.place:+end|start|center
sets place-self to the specified value
.text-align:+left|center|right
sets text-align to the specified value
Colour
For general information see tokens/colour.
Colour tokens:
dark light lighter white
darkblue lightblue green red orange
.color:+ colour token
sets element text color
.bg:+ colour token
sets element background-color
.dark.light.lighter.white.darkblue.lightblue.green.red.orange
used in component variants to indicate the main color
Functional
.hidden
used to toggle the visibility of an element, specifically in widgets like Modal
[data-*]
We use data attributes for certain style exceptions like component states (e.g the number of columns in a section). This is primarily to separate style exceptions from regular utility classes but has the added benefit of being a very efficient mechanism of interaction via JavaScript.