5
New Styleguide page for "Loading"
Introduce CDN links to all images
Add Section with index-tiles to branding page
New Styleguide page for "Branding"
FC
Extend ".wui-bs-alert" with all fruit-color-variantes
Font-Awesome has been updated to version 5.12.0
Ut
"Utils" has been extended with opacity, heights and colors
1

Do you have any design-related questions or suggestions? We'd love to hear from you.

Please contact Wuiman to discuss your ideas.

John Doe

Utils

  • 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.

Stable

Feel free to use this component. It has been tested and is already live in production. Anyways – if you find a problem with this component let me know. You can contact me via slack, email (tjaeger@wescale.com) or personally.

Borders

Class
Property
.border-0border: 0px !important;
.border-t-0border-top: 0px !important;
.border-r-0border-right: 0px !important;
.border-b-0border-bottom: 0px !important;
.border-l-0border-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--transparentbackground-color: transparent !important;
.wui-bg-color--whitebackground-color: #fff !important;($color-white)
.wui-color--successcolor: #0F834B !important; ($font-color-success)
.wui-color--warningcolor: #C87A00 !important; ($font-color-warning)
.wui-color--dangercolor: #D61D1D !important; ($font-color-danger)
.wui-bg--successbackground-color: #25A342 !important; ($color-success)
.wui-bg-color--warningbackground-color: #FFB400 !important; ($color-warning)
.wui-bg-color--dangerbackground-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--inlinedisplay: inline !important;
.display--inline-blockdisplay: inline-block !important;
.display--blockdisplay: block !important;
.display--hiddendisplay: none !important;
.display--tabledisplay: table !important;
.display--table-rowdisplay: table-row !important;
.display--table-celldisplay: table-cell !important;

Float

Class
Property
.pull-leftfloat: left !important;
.pull-rightfloat: right!important;
.clearfixThe class contains several properties to automatically clear its floated child elements.

.clearfix

.pull-right

.pull-left

Height

Class
Property
.h-0height: 0;
.h-pxheight: 1px;
.h-fullheight: 100%;
.h-max-fullmax-height: 100% !important;
.h-autoheight: auto;
.h-1/4height: 25% !important;
.h-1/3height: 33.333% !important;
.h-1/2height: 50% !important;
.h-2/3height: 66.666% !important;
.h-3/4height: 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--noneopacity: 0 !important;
.opacity--1opacity: 0.1 !important;
.opacity--2opacity: 0.2 !important;
.opacity--3opacity: 0.3 !important;
.opacity--4opacity: 0.4 !important;
.opacity--5opacity: 0.5 !important;
.opacity--6opacity: 0.6 !important;
.opacity--7opacity: 0.7 !important;
.opacity--8opacity: 0.8 !important;
.opacity--9opacity: 0.9 !important;
.opacity--fullopacity: 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--absoluteposition: absolute !important;
.position--relativeposition: relative !important;
.position--fixedposition: fixed !important;
.position--toptop: 0 !important;
.position--rightright: 0 !important;
.position--bottombottom: 0 !important;
.position--leftleft: 0 !important;

.position--relative

.position--absolute .position--bottom .position--right

Text

Class
Property
.text--lefttext-align: left !important;
.text--righttext-align: right !important;
.text--centertext-align: center !important;
.text--whitecolor: #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-ellipsistext-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
.text--break-wordword-wrap: break-word;
.text--break-allword-break: break-all;
.text--no-wrapwhite-space: nowrap;

Vertical align

Class
Property
.v-align--baselinevertical-align: baseline !important;
.v-align--topvertical-align: top !important;
.v-align--bottomvertical-align: bottom !important;
.v-align--middlevertical-align: middle !important;

Width

Class
Property
.w-fullwidth: 100%;
.w-max-fullmax-width: 100% !important;
.w-autowidth: auto;
.w-pxwidth: 1px;
.w-1/5width: 20% !important;
.w-1/4width: 25% !important;
.w-1/3width: 33.3333% !important;
.w-1/2width: 50% !important;
.w-2/3width: 66.666% !important;
.w-3/4width: 75% !important;
.w-4/5width: 80% !important;