- Cross-component. Utils are classes that often have only one property. They apply to all components and help to keep the number of modifiers within a manageable range.
- Util-components. Very simple and rare components can be built using utils.
- Naming. General purpose utils are not prefixed with "wui-" e.g. .display--inline-block or .v-align--middle. If the value range of utils contains wescale-specific values (e.g. colors), all util classes are prefixed with "wui-" like .wui-color--highlight
There are some Utils we took from Bootstrap. These do not correspond to the BEM model, which we normally use in wui.
wui is based on the CSS BEM model. This component-first approach leads to components that have to be abstracted at a rather early stage. In order to be able to react as flexibly as possible to various use cases, we use utils.
But the use of utils remains the exception. In the Happy-Case all necessary CSS properties are anchored to the component.
Borders
Class | Property |
|---|---|
| .border-0 | border: 0px !important; |
| .border-t-0 | border-top: 0px !important; |
| .border-r-0 | border-right: 0px !important; |
| .border-b-0 | border-bottom: 0px !important; |
| .border-l-0 | border-left: 0px !important; |
Bordered component
Another bordered component
.border-t-0
The border util is basically for resetting borders of existing components.
Example: If you have a use-case where you want to combine several components you can use this util to avoid double borders.
Colors
Before using the respective color-util, please check also the color definitions to see if you are using it correctly.
Class | Property |
|---|---|
| .wui(-bg)-color--primary | (background-)color: #6E5ABF !important; ($color-primary) |
| .wui(-bg)-color--active | (background-)color: #2D77C9 !important; ($color-active) |
| .wui(-bg)-color--highlight | (background-)color: #078390 !important; ($color-highlight) |
| .wui-bg-color--transparent | background-color: transparent !important; |
| .wui-bg-color--white | background-color: #fff !important;($color-white) |
| .wui-color--success | color: #0F834B !important; ($font-color-success) |
| .wui-color--warning | color: #C87A00 !important; ($font-color-warning) |
| .wui-color--danger | color: #D61D1D !important; ($font-color-danger) |
| .wui-bg--success | background-color: #25A342 !important; ($color-success) |
| .wui-bg-color--warning | background-color: #FFB400 !important; ($color-warning) |
| .wui-bg-color--danger | background-color: #DC3545 !important; ($color-danger) |
| These are the most commonly used colors in wescale. You can find a more detailed insight into our colors with the corresponding guidelines, classes and variables under colors. | |
Display
Class | Property |
|---|---|
| .display--inline | display: inline !important; |
| .display--inline-block | display: inline-block !important; |
| .display--block | display: block !important; |
| .display--hidden | display: none !important; |
| .display--table | display: table !important; |
| .display--table-row | display: table-row !important; |
| .display--table-cell | display: table-cell !important; |
Float
Class | Property |
|---|---|
| .pull-left | float: left !important; |
| .pull-right | float: right!important; |
| .clearfix | The class contains several properties to automatically clear its floated child elements. |
.clearfix
.pull-right
.pull-left
Height
Class | Property |
|---|---|
| .h-0 | height: 0; |
| .h-px | height: 1px; |
| .h-full | height: 100%; |
| .h-max-full | max-height: 100% !important; |
| .h-auto | height: auto; |
| .h-1/4 | height: 25% !important; |
| .h-1/3 | height: 33.333% !important; |
| .h-1/2 | height: 50% !important; |
| .h-2/3 | height: 66.666% !important; |
| .h-3/4 | height: 75% !important; |
Margin
You can replace by the following numbers:
-5 | 0 | 5 | 10 | 15 | 20 | 25 | 30
Because of the order within the stylesheet, higher numbers will always overwrite lower numbers. See the following example.
Class | Property |
|---|---|
| .m- | margin: px !important; |
| .m-x- | margin-left: px !important; margin-right: px !important; |
| .m-y- | margin-top: px !important; margin-bottom: px !important; |
| .m-t- | margin-top: px !important; |
| .m-r- | margin-right: px !important; |
| .m-b- | margin-bottom: px !important; |
| .m-l- | margin-left: px !important; |
.m-10 .m-y-30
.m-30 .m-b-10
Utils with high numbers overwrite utils with low numbers, since they are further down the stylesheet.
Example: If you set a margin of 10 pixels to all sides, you can additionally set the margin for bottom and top (e.g.) as long as it is larger than 10 pixels. In the second example the margin of 30 pixels will overwrite any other margin util, because there's no margin-util greater than 30.
Opacity
Class | Property |
|---|---|
| .opacity--none | opacity: 0 !important; |
| .opacity--1 | opacity: 0.1 !important; |
| .opacity--2 | opacity: 0.2 !important; |
| .opacity--3 | opacity: 0.3 !important; |
| .opacity--4 | opacity: 0.4 !important; |
| .opacity--5 | opacity: 0.5 !important; |
| .opacity--6 | opacity: 0.6 !important; |
| .opacity--7 | opacity: 0.7 !important; |
| .opacity--8 | opacity: 0.8 !important; |
| .opacity--9 | opacity: 0.9 !important; |
| .opacity--full | opacity: 1 !important; |
| Note: To avoid ambiguities, the first and last opacity-value are not represented as numbers, unlike all others. To display a disabled status of an item with a util we use "opacity--6". | |
Padding
You can replace by the following numbers:
0 | 5 | 10 | 15 | 20 | 25 | 30
Because of the order within the stylesheet, higher numbers will always overwrite lower numbers. See the following example.
Class | Property |
|---|---|
| .p- | padding: px !important; |
| .p-x- | padding-left: px !important; padding-right: px !important; |
| .p-y- | padding-top: px !important; padding-bottom: px !important; |
| .p-t- | padding-top: px !important; |
| .p-r- | padding-right: px !important; |
| .p-b- | padding-bottom: px !important; |
| .p-l- | padding-left: px !important; |
.p-30 .p-b-10
.p-10 .p-b-30
Utils with high numbers overwrite utils with low numbers, since they are further down the stylesheet.
Example: If you give the inner box a padding of 30 pixels, the padding of 10 pixels will be overwritten. In contrast, you can overwrite a padding of 10 pixels by a higher padding - like in this case 30 pixels.
Position
Class | Property |
|---|---|
| .position--absolute | position: absolute !important; |
| .position--relative | position: relative !important; |
| .position--fixed | position: fixed !important; |
| .position--top | top: 0 !important; |
| .position--right | right: 0 !important; |
| .position--bottom | bottom: 0 !important; |
| .position--left | left: 0 !important; |
.position--relative
.position--absolute .position--bottom .position--right
Text
Class | Property |
|---|---|
| .text--left | text-align: left !important; |
| .text--right | text-align: right !important; |
| .text--center | text-align: center !important; |
| .text--white | color: #ffffff !important; text-shadow: 1px 1px 2px rgba(1, 1, 1, 0.2) !important; |
| .text--high-legibility e.g. for editorial texts | font-size: 16px; line-height: 1.7; |
| .text--overflow-ellipsis | text-overflow: ellipsis; white-space: nowrap; overflow: hidden; |
| .text--break-word | word-wrap: break-word; |
| .text--break-all | word-break: break-all; |
| .text--no-wrap | white-space: nowrap; |
Vertical align
Class | Property |
|---|---|
| .v-align--baseline | vertical-align: baseline !important; |
| .v-align--top | vertical-align: top !important; |
| .v-align--bottom | vertical-align: bottom !important; |
| .v-align--middle | vertical-align: middle !important; |
Width
Class | Property |
|---|---|
| .w-full | width: 100%; |
| .w-max-full | max-width: 100% !important; |
| .w-auto | width: auto; |
| .w-px | width: 1px; |
| .w-1/5 | width: 20% !important; |
| .w-1/4 | width: 25% !important; |
| .w-1/3 | width: 33.3333% !important; |
| .w-1/2 | width: 50% !important; |
| .w-2/3 | width: 66.666% !important; |
| .w-3/4 | width: 75% !important; |
| .w-4/5 | width: 80% !important; |