Formular schließen

KONTAKT & FEEDBACK

Was können wir für Sie tun?

*Pflichtfelder

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Fill Colors

Primary

When choosing which color belongs to which class, try to assign the most important colors alphabetically. ie. A is the primery, B is the secondary, and so on.

u-colorA

u-colorB

u-colorC

u-colorD

Secondary

u-colorBlue{value}

u-colorTeal{value}

u-colorPink{value}

u-colorPurple{value}

u-colorBlueGray{value}

u-colorGrey{value}

u-colorBlack

u-colorWhite

Font-Color

u-pColorA

The quick brown fox

u-pColorB

The quick brown fox

u-pColorC

The quick brown fox

u-pColorD

The quick brown fox

Font-Family

To define the main font-famliy of the website, do it directly from the body . But make sure you don't do any other styling from there, neither size, color, spacing, etc. The font-family includes the font-weight (400 - Normal, 300 - Light, 700 - Bold, etc)

Define the font family with letters and the variable with numberical values

u-fontA200

The quick brown

u-fontA300

The quick brown

u-fontA400

The quick brown

u-fontA500

The quick brown

u-fontA600

The quick brown

u-fontA700

The quick brown

u-fontA800

The quick brown

u-fontB200

The quick brown

u-fontB300

The quick brown

u-fontB400

The quick brown

u-fontB500

The quick brown

u-fontB600

The quick brown

u-fontB700

The quick brown

u-fontB800

The quick brown

u-fontC400

The quick brown

Font-Style

To define the main font-famliy of the website, do it directly from the body . But make sure you don't do any other styling from there, neither size, color, spacing, etc.

u-pLeft

The quick brown fox

u-pCenter

The quick brown fox

u-pRight

The quick brown fox

Font-Size

Do not modify the font sizes or line-heigh, this are pre-defined and should be used for any project. If needed a custom style use u-pSize{size} (ie. u-pSize24)

Margins: Desktop

If bigger margins are needed, use the same class stucture: u-m{side}{size}. If you need to use margins on specific UI elements, continue with the base 8 numbers and make sure it is for specific purposes.

For negative margins use: u-m{side}{size}Neg

For percentage margins use: u-m{side}{size}Per

bottom, top, right, left (all)

u-m0

u-m8

u-m12

u-m16

u-m24

u-m32

u-m40

u-m48

top

u-mt0

u-mt8

u-mt12

u-mt16

u-mt24

u-mt32

u-mt40

u-mt48

right

u-mr0

u-mr8

u-mr12

u-mr16

u-mr24

u-mr32

u-mr40

u-mr48

bottom

u-mb0

u-mb8

u-mb12

u-mb16

u-mb24

u-mb32

u-mb40

u-mb48

left

u-ml0

u-ml8

u-ml12

u-ml16

u-ml24

u-ml32

u-ml40

u-ml48

Paddings

If bigger paddings are needed, continue with the same class stucture: u-p{side}{size}. If you need to use paddings on specific UI elements, continue with the base 8 numbers and make sure it is for specific purposes.

For negative paddings use: u-p{side}{size}Neg

For percentage paddings use: use: u-p{side}{size}Per

bottom, top, right, left (all)

u-p0

u-p8

u-p12

u-p16

u-p24

u-p32

u-p40

u-p48

top

u-pt0

u-pt8

u-pt12

u-pt16

u-pt24

u-pt32

u-pt40

u-pt48

right

u-pr0

u-pr8

u-pr12

u-pr16

u-pr24

u-pr32

u-pr40

u-pr48

bottom

u-pb0

u-pb8

u-pb12

u-pb16

u-pb24

u-pb32

u-pb40

u-pb48

left

u-pl0

u-pl8

u-pl12

u-pl16

u-pl24

u-pl32

u-pl40

u-pl48

Dropshadows

u-dsA

u-dsB

u-dsC

u-dsD

Floats

u-floatLeft

u-floatRight

u-floatNone

Display Settings

u-inlineBlock

u-block

u-inline

u-displayNone

Overflow

u-ovHidden

u-ovVisible

u-ovScroll

u-ovScrollAuto