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
$c1-main
$c2-main
Farbpalette 2
$c1-second
Farbpalette 3
$c1-third
Sonderfarben
$c1-success
$c1-error
Grauskala
$c1-gray
$c2-gray
$c3-gray
$c4-gray
$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
t-left
t-center
t-right
t-justify
t-nowrap
t-truncate
t-weight-normal
t-weight-300
t-weight-400
t-weight-700
t-italic
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.
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
Links
Hier werden alle Links auf hellem Hintergrund definiert.
Primär
Sekundär
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
Labels
Hier werden alle Labels definiert.
Primär
label label-main label1-main
label label-main label2-main
label label-main label3-main
Sekundär
<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.
<i class="icon-wrapper">
<svg class="icon icon--xsmall">
<use href="#icon-gloeckle-logo" xlink:href="#icon-gloeckle-logo"/>
</svg>
</i>
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.
&: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
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
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.
@include media-breakpoint-up(sm) {}
@include media-breakpoint-up(md) {}
@include media-breakpoint-up(lg) {}
@include media-breakpoint-up(xl) {}
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) {}
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
ml-200
pl-200
mr-200
pr-200
mx-200
px-200
Abstandsklassen Vertikal
mt-200
pt-200
mb-200
pb-200
my-200
py-200
Spezielle Abstandsklassen
m-auto
my-auto
mx-auto
mt-auto
mr-auto
mb-auto
ml-auto
Abstandsklassen Breakpoints
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
px-small
Mittel
px-medium
px-medium
Groß
px-large
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
mb-small
Klein
mb-medium
mb-medium
Klein
mb-large
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-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
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-row
flex-column
flex-row-reverse
flex-column-reverse
flex-wrap
flex-nowrap
flex-wrap-reverse
justify-content-start
justify-content-end
justify-content-center
justify-content-between
justify-content-around
align-items-start
align-items-end
align-items-center
align-items-baseline
align-items-stretch
align-content-start
align-content-end
align-content-center
align-content-between
align-content-around
align-content-stretch
align-self-auto
align-self-start
align-self-end
align-self-center
align-self-baseline
align-self-stretch
Float
float-left
float-right
float-none
Visibility
visible
invisible
Clearfix
Clearfix