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.