Styleguide

Farben

Die hier definierten Farben können alle über Utility-Classes sowohl für Text, als auch für Hintegründe vergeben werden.

Text-Colors

Schriftfarben müssen als Standard im CSS definiert werden. Wird von dem Standard abgewichen, wird dieser mit Hilfe der gewünschten Utility-Classes überschrieben.

Beispiel Utility-Class: t-c1-main

Background-Colors

Background-Colors können als Standard im CSS definiert werden. Wird von dem Standard abgewichen, wird dieser mit Hilfe der gewünschten Utility-Classes überschrieben.

Beispiel Utility-Class: bg-c1-main

Farbpalette 1

#E2001A

$c1-main

#b60d20

$c2-main

Farbpalette 2

#FFC700

$c1-second

Farbpalette 3

#00A5FF

$c1-third

Sonderfarben

#27AE60

$c1-success

#E2001A

$c1-error

Grauskala

#333333

$c1-gray

#979797

$c2-gray

#DDDDDD

$c3-gray

#F6F6F6

$c4-gray

#ffffff

$c-white

Schriftvarianten

Die hier definierten Schriftvarianten können alle über Utility-Classes vergeben werden. Eine Schriftvariante besteht dabei aus der Schriftfamilie (z.B. Futura, Officina, etc.), der Schriftgröße, der Schriftauszeichnung (z.B. bold, italic, etc.), etc.

Schriftvarianten müssen als Standard im CSS definiert werden. Wird von dem Standard abgewichen, wird dieser mit Hilfe der gewünschten Utility-Classes überschrieben (z.B. eine h1 soll weiß anstatt schwarz sein).

Die Abstände von Schriften sind ebenfalls in den Schriftvarianten definiert und sind relativ zur Schriftgröße und werden in "em" angegeben. Nur in absoluten Ausnahmen dürfen die Abstände bei Schriftvarianten via Utility-Classes überschrieben werden.

Allgemeine Utility-Classes

Text-Alignment: t-left t-center t-right t-justify t-nowrap t-truncate

Text-Weight/Style: t-weight-normal t-weight-300 t-weight-400 t-weight-700 t-italic

Text-Transformation: t-lowercase t-uppercase t-capitalize

Überschrift 1 - Lato

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. Monotonectally enable proactive sources for bleeding-edge benefits. Phosfluorescently scale goal-oriented applications and cross functional web services. Continually architect value-added interfaces whereas scalable e-business.

Utility-Class: h1

Überschrift 2 - Lato

Utility-Class: h2

Überschrift 3 - Lato

Utility-Class: h3

Überschrift 4 - Lato

Utility-Class: h4

Überschrift 5 - Lato

Utility-Class: h5

Fließtext 1 - Intro

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog

Utility-Class: p-intro

Fließtext 2 - Copy

Utility-Class: p-copy

Fließtext 3 - Mini-Copy

Utility-Class: p-mini-copy

Schriftschnitte

Der Schriftschnitt ist für die verschiedenen Schriftvarianten vordefiniert. Muss eine Schriftvariante überschrieben werden wird dies über CSS-Properties getätigt.

Beispiel Utility-Classes (CSS-Properties): t-weight-700 t-italic

Font-Family - Lato

Auszeichnung - light

t-weight-300

t-weight-300 t-italic

Auszeichnung - regular

t-weight-400

t-weight-400 t-italic

Auszeichnung - bold

t-weight-700

t-weight-700 t-italic

Buttons

Hier werden alle Buttons definiert.

Primär

button text

btn btn-main btn1-main

button text

btn btn-main btn2-main

button text

btn btn-main btn3-main

button text

btn btn-main btn-main-disabled

button small

btn btn-main btn-main--small btn1-main

Sekundär

button text

btn btn-second btn1-second

button text

btn btn-second btn2-second

button text

btn btn-second-disabled

button small

btn btn-second btn-second--small btn1-second

Tertiär

button text

btn btn-third btn1-third

button text

btn btn-third btn2-third

button text

btn btn-third btn-third-disabled

Icons

btn btn-icon btn1-icon

btn btn-icon btn-icon-disabled

btn btn-icon btn2-icon

Labels

Hier werden alle Labels definiert.

Primär

label text

label label-main label1-main

label text

label label-main label2-main

label text

label label-main label3-main

Sekundär

Neu: 100 x 7.500€ Urlaubsgeld extra!

HTML-Code:

               
               <div class="label1-second-wrapper">
                  <span class="label label-second label1-second">Neu: 100 x 7.500€ Urlaubsgeld extra!</span>
                  <span class="label1-second-flag"></span>
               </div>

Icons

Alle Icons im Überblick

SVG-Icons

Wenn es möglich ist müssen immer SVG-Icons verwendet werden. Das Icon kann in unterschiedlichen Größen verwendet werden. Ein Überblick über alle Icon-Namen kann in der Datei icon.scss eingesehen werden.

HTML-Code:


<i class="icon-wrapper">
   <svg class="icon icon--xsmall">
      <use href="#icon-gloeckle-logo" xlink:href="#icon-gloeckle-logo"/>
   </svg>
</i>

Größen: icon--xsmall icon--small icon--medium icon--large icon--xlarge

Icon-Font

Die Iconfont darf nur in Ausnahmen und für die Icon-Darstellung im WordPress-Backend verwendet werden. Eine Ausnahme im Frontend ist z.B. das Icon einer Checkbox, dass nur über ein Pseudo-Element definiert werden kann. Ein Überblick über alle Icon-Unicodes kann in der Datei icon.scss eingesehen werden.

Icon via Pseudo-Element


&:before {
   content: "\ea11";
   font: normal normal normal 1em/1 'Nucleo';
   speak: none;
   text-transform: none;
   /* Better Font Rendering */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 1rem;
}

Form Elements

Input - Standard

Text

E-Mail

Telefon

Nummer

Select

Checkbox | Radio

Option 1 Option 2 Option 3

Radio 1 Radio 2 Radio 3

Form Elements CF7

Error: Contact form not found.

Grid

Das Grid basiert grundlegend auf dem Bootstrap Grid und kann mit allen hier definierten Breakpoints verwendet werden. Im folgendem einige Beispiele der wichtigsten Klassen

Struktur

Beispiel Grid-Klassen: container-wrapper container row col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 offset-1 offset-sm-1 offset-md-1 offset-lg-2 offset-xl-3

Breakpoints

In der Regel werden die Breakpoints nach dem Mobile-First Ansatz verwendet. Das bedeutet, dass die Basis des Codes auf dem kleinsten Breakpoint definiert ist und für alle Breakpoints gültig ist. Abweichungen des Codes können mit Hilfe der größeren Breakpoints überschrieben werden. In Ausnahmefällen können die hier gelisteten anderen Breakpointvarianten verwendet werden.

Standard - Mobile First:
@include media-breakpoint-up(sm) {} @include media-breakpoint-up(md) {} @include media-breakpoint-up(lg) {} @include media-breakpoint-up(xl) {}

Abweichung - Graceful Degradation:

Der Code betrifft den definierten Breakpoint und alle kleineren Breakpoints. Mit Hilfe der kleineren Breakpoints kann der weiter oben definierte Code überschrieben werden.

@include media-breakpoint-down(sm) {} @include media-breakpoint-down(md) {} @include media-breakpoint-down(lg) {} @include media-breakpoint-down(xl) {}

Abweichung - Dazwischen:

Es kann Code für bestimmte Breakpoints definiert werden in dem ein unterer und oberer Breakpoint definiert wird. Der Code betrifft in diesem Fall den Breakpoint dazwichen (lg).

@include media-breakpoint-between(md, xl) {}

Spacer

Alle definierten Abstandsklassen können für "margins" und "paddings" in Abhängigkeit der Breakpoints verwendet werden. Der grundlegende Aufbau basiert auf den Bootstrap Abstandsklassen. Der hier verwendete Wert 200 entspricht dabei der Einheit "2rem". Eine Übersicht aller Abstände ist in der SCSS-Datei set_variables.scss zu finden.

Layout-Abstände werden via "margins" und immer nach unten und rechts vergeben. Innenabstände werden via "paddings" vergeben.

Allgemeine Abstandsklassen

Abstandsklassen Horizontal

Abstäne links: ml-200 pl-200

Abstäne rechts: mr-200 pr-200

Abstäne links und rechts: mx-200 px-200

Abstandsklassen Vertikal

Abstäne oben: mt-200 pt-200

Abstäne unten: mb-200 pb-200

Abstäne oben und unten: my-200 py-200

Spezielle Abstandsklassen

m-auto my-auto mx-auto mt-auto mr-auto mb-auto ml-auto

Abstandsklassen Breakpoints

Beispiel: mb-25 mb-sm-50 mb-md-75 mb-lg-100 mb-xl-200

Grid Abstandsklassen

Horizontal - Micro-Offsets

Diese Abstände sind eine Ergänzung zu den Grid-Offsets und für kleinere innere Abstände in Layouts und Modulen einsetzbar.

Innerhalb eines Layouts oder Modules müssen die horizontalen äußeren "Paddings" mit Hilfe dieser Micro-Offsets umgesetzt werden.

Klein

px-small

Mittel

px-medium

Groß

px-large

Vertikal - Template-Abstände

Diese Abstände werden zwischen Layout-Parts und Modulen eingesetzt und werden immer nach unten definiert.

Klein

mb-small

Klein

mb-medium

Klein

mb-large

Hilfsklassen

Hier folgt eine Übersicht aller Utility-Classes, die benutzbar sind und bisher noch nicht aufgelistet wurden.

Border

Das Zahlen-Suffix ist der Border-Radius in "px"

Border-Radius: bd-radius-4 bd-radius-rounded bd-radius-round

Es können alle Projektfarben verwendet werden.

Border-Color Beispiel: bd-c1-main

Das Zahlen-Suffix ist die Border-Width in "px". Damit die Border-Width verwendet werden kann muss eine Border-Color vergeben werden.

Border-Width: bd-c1-main bd-all-1 bd-c1-main bd-top-1 bd-c1-main bd-right-1 bd-c1-main bd-bottom-1 bd-c1-main bd-left-1

Position

Position-Klassen: position-static position-relative position-absolute position-fixed position-sticky

Display

Die Display-Klassen können mit allen Breakpoints verwendet werden z.B. d-md-block

Display-Klassen: d-none d-inline d-inline-block d-block d-flex d-inline-flex d-table d-table-row d-table-cell

Flexbox

Die Flexbox-Klassen können mit allen Breakpoints verwendet werden z.B. align-items-md-center

Flex-Direction: flex-row flex-column flex-row-reverse flex-column-reverse

Flex-Wrap: flex-wrap flex-nowrap flex-wrap-reverse

Justify-Content: justify-content-start justify-content-end justify-content-center justify-content-between justify-content-around

Align-Items: align-items-start align-items-end align-items-center align-items-baseline align-items-stretch

Align-Content: align-content-start align-content-end align-content-center align-content-between align-content-around align-content-stretch

Align-Self: align-self-auto align-self-start align-self-end align-self-center align-self-baseline align-self-stretch

Float

Display-Klassen: float-left float-right float-none

Visibility

visible invisible

Clearfix

Clearfix

Farben

Text-Colors

Background-Colors

Farbpalette 1

Farbpalette 2

Farbpalette 3

Sonderfarben

Grauskala

Schriftvarianten

Allgemeine Utility-Classes

Überschrift 1 - Lato

Überschrift 2 - Lato

Überschrift 3 - Lato

Überschrift 4 - Lato

Überschrift 5 - Lato

Fließtext 1 - Intro

Fließtext 2 - Copy

Fließtext 3 - Mini-Copy

Schriftschnitte

Font-Family - Lato

Auszeichnung - light

Auszeichnung - regular

Auszeichnung - bold

Links

Primär

Sekundär

Tertiär

Buttons

Primär

Sekundär

Tertiär

Icons

Labels

Primär

Sekundär

Icons

SVG-Icons

Icon-Font

Form Elements

Input - Standard

Select

Checkbox | Radio

Form Elements CF7

Grid

Struktur

Breakpoints

Spacer

Allgemeine Abstandsklassen

Abstandsklassen Horizontal

Abstandsklassen Vertikal

Spezielle Abstandsklassen

Abstandsklassen Breakpoints

Grid Abstandsklassen

Horizontal - Micro-Offsets

Klein

Mittel

Groß

Vertikal - Template-Abstände

Klein

Klein

Klein

Hilfsklassen

Border

Position

Display

Flexbox

Float

Visibility

Clearfix