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

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: 
h2

Überschrift 3 - 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: 
h3

Überschrift 4 - 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: 
h4

Überschrift 5 - 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: 
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

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-copy

Fließtext 3 - Mini-Copy

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

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

t-weight-300

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

t-weight-300 t-italic

Auszeichnung - regular

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

t-weight-400

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

t-weight-400 t-italic

Auszeichnung - bold

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

t-weight-700

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

t-weight-700 t-italic

Hier werden alle Links auf hellem Hintergrund definiert.

Primär

link link-main link1-main
link link-main link2-main
link link-main link3-main
link link-main link4-main

Sekundär

link link-second link1-second
link link-second link2-second
link link-second link3-second

Tertiär

link link-third link1-third
link link-third link2-third
link link-third link3-third

Buttons

Hier werden alle Buttons definiert.

Primär

btn btn-main btn1-main
btn btn-main btn2-main
btn btn-main btn3-main
btn btn-main btn-main-disabled
btn btn-main btn-main--small btn1-main

Sekundär

btn btn-second btn1-second
btn btn-second btn2-second
btn btn-second-disabled
btn btn-second btn-second--small btn1-second

Tertiär

btn btn-third btn1-third
btn btn-third btn2-third
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

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

Select

Checkbox | Radio

Form Elements CF7

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