Farben

Main
Accent DARK
Accent MEDIUM
Accent LIGHT
Text

Schriften (lt. Oxygen CSS Stylesheet)

h1 = 32 px, 700, 1.2 + padding-bottom 20px
h2 = 28 px, 700, 1.2 + padding-bottom 20px
h3 = 24 px, 700, 1.2 + padding-bottom 20px
h4 = 22 px, 700, 1.2 + padding-bottom 10px
h5 = 20 px, 700, 1.2 + padding-bottom 10px
h6 = 18 px, 700, 1.2 + padding-bottom 0px

Heading H1

This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it.

Heading H2

This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it.

Heading H3

This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it.

Heading H4

This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it.
Heading H5
This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it.
Heading H6
This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it. This is a block of text. Double-click this text to edit it.

Links

CSS Utility Klassen

Headings

ToDo bei Erst-Setup
=> Settings von H1-H6 lt. CSS Oxygen-Stylesheet auch in den CSS-Klassen genau gleich eingeben!
=> Überschrift H1 fat => zu Beginn nach Gefühl vergeben!  
h1 fat = 48px, 700, 1.2 + padding-bottom 0px

=> alle H!-H6 Definitionen => siehe oben in der grünen Box
Headings GRÖSSE
Headings FARBE
b-h1-fat-size
b-heading-color-main
b-h1-size
b-heading-color-light
b-h2-size
b-heading-color-medium
b-h3-size
b-heading-color-dark
b-h4-size
b-h5-size
b-h6-size

Text Body

default = 18 px, 300 /// xs = 10 px, 300 /// s = 13 px, 300 /// m = 16 px, 300 /// l = 18 px, 400 /// xl = 21 px, 500
Body-Text GRÖSSE
Body-Text FARBE
b-text-size-default
b-text-size-xs
b-text-color-light
b-text-size-s
b-text-color-medium
b-text-size-m
b-text-color-dark
b-text-size-l
b-text-size-xl

Margins

zero = 0 px /// xs = 5 px /// s = 15 px /// m = 25 px /// l = 50 px /// xl = 75 px
Margin TOP
Margin BOTTOM
Margin LEFT
Margin RIGHT
b-margin-top-zero
b-margin-bottom-zero
b-margin-left-zero
b-margin-right-zero
b-margin-top-xs
b-margin-bottom-xs
b-margin-left-xs
b-margin-right-xs
b-margin-top-s
b-margin-bottom-s
b-margin-left-s
b-margin-right-s
b-margin-top-m
b-margin-bottom-m
b-margin-left-m
b-margin-right-m
b-margin-top-l
b-margin-bottom-l
b-margin-left-l
b-margin-right-l
b-margin-top-xl
b-margin-bottom-xl
b-margin-left-xl
b-margin-right-xl

Paddings

zero = 0 px /// xs = 5 px /// s = 10 px /// m = 20 px /// l = 35 px /// xl = 75 px
Padding TOP
Padding BOTTOM
Padding LEFT
Padding RIGHT
Padding ÜBERALL
b-padding-top-zero
b-padding-bottom-zero
b-padding-left-zero
b-padding-right-zero
b-padding-all-zero
b-padding-top-xs
b-padding-bottom-xs
b-padding-left-xs
b-padding-right-xs
b-padding-all-xs
b-padding-top-s
b-padding-bottom-s
b-padding-left-s
b-padding-right-s
b-padding-all-s
b-padding-top-m
b-padding-bottom-m
b-padding-left-m
b-padding-right-m
b-padding-all-m
b-padding-top-l
b-padding-bottom-l
b-padding-left-l
b-padding-right-l
b-padding-all-l
b-padding-top-xl
b-padding-bottom-xl
b-padding-left-xl
b-padding-right-xl
b-padding-all-xl

Colors & Backgrounds

Farbe HAUPT
Farbe HELL
Farbe MITTEL
Farbe DUNKEL
Farbe VERLAUF
b-bg-color-main
b-bg-color-light
b-bg-color-medium
b-bg-color-dark
b-bg-color-gradient
b-bg-color-main-alt
b-bg-color-light-alt
b-bg-color-medium-alt
b-bg-color-dark-alt
b-bg-color-gradient-alt

Utility Diverse

Ecken => BORDER RADIUS
Schatten => BOX SHADOWS
Forms => FLUENT FORMS
b-shadow
b-form-fluent
b-shadow-alt
b-form-fluent-alt

Animationen & Transitions

Übergänge => TRANSITIONS
Effekte => HOVER
3D Tilting
b-transition
b-hover-scale
b-tilt-left
b-transition-alt
b-hover-scale-up
b-tilt-right
b-hover-move-up
b-tilt-up
b-hover-move-down
b-tilt-down
b-hover-move-left
b-hover-move-right
b-hover-3d-up
b-hover-3d-down
b-hover-3d-left
b-hover-3d-right
Image => Scale
Div => Overflow Hidden

Bilder

Background Imgae = Cover + 50 % 50 %
Bilder BACKGROUND
b-bg-image-50-50

Icons

Icons Farbe HAUPT
Icons Farbe HELL
Icons Farbe DUNKEL
b-icon-color-main-s
b-icon-color-light-s
b-icon-color-dark-s
b-icon-color-main-m
b-icon-color-light-m
b-icon-color-dark-m
b-icon-color-main-l
b-icon-color-light-l
b-icon-color-dark-l

Cards

Farbe HAUPT
Farbe HELL
Farbe DUNKEL
b-card-color-main
b-card-color-light
b-card-color-dark

Shape Dividers

xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx
xxx