Inhalt

  • Abstände
    • Innere (padding) und äußere (margin) Abstände von Elementen einstellen
    • Elemente nach oben über andere Elemente setzen
  • Farben
    • Elemente Einfärben (Text & Hintergrund)
  • Bilder

    • Bildgrößen

    • Bilder verdunkeln

    • Radius an den Ecken von Bildern (& Text-Elementen) hinzufügen

    • Weiße Kontur um Bilder hinzufügen

  • Schlagschatten

    • Hinzufügen von Schlagschatten auf Bilder um Akzente zu setzen

  • Slider/Header Bausteine

    • Spaltenbreite mit CSS Klasse steuern

    • HTML Tags ausblenden (vorsicht!)

    • Inhalte horizontal & vertikal mittig ausrichten

    • Slider Markup korrigieren, wenn es bei einem Slide keine Navigations-Punkte gibt

    • Vertikaler Strich im Slider

  • CSS Klassen für Text-Elemente

    • Listen schmaler machen

    • Vibrant orange Unterstrich

    • Alle die Funktion klickbaren Elemente unterbinden

    • H1 oder H2 Überschriften als einstellen

  • CSS Klassen für Spalten-Elemente
    • Spaltenreihenfolge auf mobilen Devices umkehren
    • Zeilen im Container nebeneinander darstellen

Abstände

Innere (padding) und äußere (margin) Abstände von Elementen einstellen.

Diese Helferklassen sind auch bei der Gestaltung von Slidern oder das Setzen von Buttons sehr hilfreich.

Logik: 
Innerer-/äußerer Abstand = p (padding), m (margin),
Richtung = t (top), r (right), b (bottom), l (left)
Verfügbare Werte:

  • zero (0px)
  • xxs (4px)
  • xs (8px)
  • sm (16px)
  • base (32px)
  • xl (64px)

Zusammensetzung:
Innerer-/äußererabstand + Richtung + __ + Werte

Beispiel CSS Klassen:
mt__sm = margin-top: 16px
pr__zero = padding-right: 0;
ml__base = margin-left: 32px;

Anwendungsbeispiele:

  • Infoboxen: hier wurde padding auf das Text-Bild Element gesetzt
  • Diverse andere stellen

Elemente nach oben über andere Elemente setzen.

CSS Klassen:
mt__-100 (Resultat: schiebt das Element nach oben (margin-top: -100%;)

Anwendungsbeispiele:

  • Danke-Seite: hiermit werden die Icons über die Bilder gesetzt

Farben

Elemente Einfärben (Text & Hintergrund).

Logik: 
keyword = color
tatsächliche Farbe = farbname (siehe Reiter "Farben" ohne $-Zeichen)
css background-color = background

Farbe Zusammensetzung:
keyword + - + Farbenname

Background-Color Zusammensetzung:
keyword + - + Farbenname + __ + background-color

Beispiel CSS Klassen:
color-white = color: #ffffff
color-primary-base = color: #383434
color-pale-teal = color: #ABB7AF
color-vibrant-orange = color: #FF601E
color-vibrant-orange__background = background-color: #FF601E

Verfügbare Farben:

  • color-white
  • color-primary-base
  • color-primary-light
  • color-primary-dark
  • color-vibrant-orange
  • color-vibrant-orange-light
  • color-dreamy-blue
  • color-dreamy-blue-light
  • color-pale-teal
  • color-cta-green
  • color-cta-green-black
  • color-recommandation
  • color-gray
  • color-gray-light
  • color-gray-lighter
  • color-gray-dark

Anwendungsbeispiele:

Konkretes Bespiel welches ein paar Farb- Schrift und weitere Klassen in Kombination nutzt:

Mit der Kombination aus folgenden Klassen kann man im Fließtext ein BIO Label erzeugen:

b6 color-recommandation__background color-white lgw-borderradius-2 pb__xxxs pl__xxs pr__xxs pt__xxxs

Im HTML Markup sieht das dann so aus:

<span class="b6 color-recommandation__background color-white lgw-borderradius-2 pb__xxxs pl__xxs pr__xxs pt__xxxs">BIO</span>

Bilder

Bildgrößen.

Durch die Anwendung dieser Klasse passieren 2 Dinge, der Text wird dadurch automatisch absolute und zentriert auf das Bild positioniert, die Höhe des Bild-Elements wird entsprechend eingestellt.

Logik:
keyword: height
Verfügbare Höhen:

  • 200 (Resultat: eine Höhe von 200px für Desktop und 240px für Mobile)
  • 350 (Resultat: eine Höhe von 350px für Desktop und 250px für Mobile)

Zusammensetzung:
keyword + - + Höhe

Beispiel CSS Klassen:

  • height-200
  • height-350

Anwendungsbeispiele:

Bilder verdunkeln.

Jedes Bild innerhalb des Containers wird bei der Anwendung der Klasse durch die CSS Eigenschaft "filter" verdunkelt. Je kleiner der Wert, desto dunkler. Hinweis: Bei der Anwendung auf Slidern mit mehr als einem Slide werden durch eine Verdunklungsstufe alle Bilder von allen Slides verdunkelt. Leider kam mir bisher noch nicht die Idee, wie man das pro Slide machen kann.

Logik:
keyword: darken
Verfügbare Werte:

  • 25 bis 95 in 5er Schritten


Zusammensetzung:
keyword + - + Wert

Beispiele:
darken-25, darken-65, darken-80

Anwendungsbeispiele:

Radius an den Ecken von Bildern (& Text-Elementen) hinzufügen.

CSS Klassen:
lgw-borderradius-2 (Resultat: 2px Borderradius an jeder Ecke)
lgw-borderradius-100 (Resultat: 100% Borderradius an jeder Ecke)

Anwendung:

  • die Klasse lgw-borderradius-100 soll nur auf quadratische Bilder angewendet werden, beim Rechteck wird das Ergebnis oval.
  • es ist generell besser, Runde Bilder mit dieser CSS Klasse zu erstellen, da die Kanten unscharf werden, wenn man Bilder per Photoshop rund ausschneidet.
  • die Klasse lgw-borderradius-2 soll nur auf Elemente angewendet werden, die sich von der Funktionalität oder Erscheinung von normalen Bildelementen unterscheiden, z.B. bei Slidern und Zitat-Slidern, Portraitbildern im Fließtext oder Infoboxen usw.
  • die Klasse lgw-borderradius-2 kann auch auf Text-Elemente angewendet werden, die Kein Bild, sondern eine Hintergrundfarbe haben. Wenn sie Bild und Hintergrundfarbe haben, werden beide Elemente abgerundet, das führt zu ungewollten Ergebnissen.

Anwendungsbeispiele:

 

Radius an den Ecken von Bildern (& Text-Elementen) hinzufügen.

CSS Klassen:
lgw-border-4-white (Resultat: legt eine 4px Breite, weiße Kontur auf Bildelemente)

Anwendung:
Die Klasse wird im Text-Bild Element bei auw Erweitert eingetragen.

Anwendungsbeispiele:

  • Danke Seite: die Icons könne so von den anderen Bilder abgesetzt werden

Schlagschatten

Hinzufügen von Schlagschatten auf Bilder um Akzente zu setzen.

CSS Klassen:
lgw-tile-elevation (Resultat: Setzt unseren CI Schlagschatten, der auch bei allen Teaser angewendet wird, auf das Bild im Element)
lgw-tile-elevation-no_desktop (Resultat: Setzt unseren CI Schlagschatten auf das Bild im Element, wenn der Browser eine Breite von 1023px unterschreitet)

Anwendung:

Diese Klassen sollten nur auf Elemente angewendet werden, die Akzente brauchen oder von der Funktionalität den Teasern ähneln.

Anwendungsbeispiele:

Slider/Header Bausteine

Spaltenbreite mit CSS Klasse steuern.

Kurze Erklärung:
Unser Shop basiert auf Bootstrap, einem Framework mit einem Grid-System. Im Typo3 Backend kann man über Spalten-Elemente das Layout von Seiten beeinflussen. Wenn man dort eine Spalten-Konfiguration einstellt, hinterlegt Typo bei den entsprechenden Elementen CSS Klassen, welche die Breite der Elemente mit Prozent-Weiten einstellen. Die CSS Klassen dafür kann man auch im Markup von Slides benutzen, um zu steuern, wie breit ein Text-Element sein soll.

Logik: 
Keyword = col
Breite = 1 bis 12 (12 ist 100%, 1 ist 8,3333%)

Prozent-Werte der Optionen für die Breite:
1 = 8,3333%
2 = 16.66667%
3 = 25%
4 = 33.33333%
5 = 41.66667%
6 = 50%
7 = 58.33333%
8 = 66.66667%
9 = 75%
10 = 83.33333%
11 = 91.66667%
12 = 100%

Zusammensetzung:
Keyword + - + Breite

Beispiel CSS Klassen:
col-6 = das Element hat eine Breite von 50% des Slide-Markps
col-8 = das Element hat eine Breite von 66,66667% des Slide-Markps

Anwendung:
Im Markup des Slides ist ein <div class="col-6"> um den eigentlichen Text des Slides eingebaut. Wenn man die Nummer in der Klasse ändert, dann ändert sich die Breite des Textfeldes.

Erweiterte Anwendung:
Man kann die CSS Klassen auch kombinieren, um einem Element verschiedene Breiten auf verschiedenen Devices zu geben, dafür gibt es Präfixe, die zwischen dem Keyword und der Breite eingesetzt werden können (sm, md, lg und xl). Wer darüber mehr erfahren will kann das hier nachlesen oder fragen :)

Anwendungsbeispiel:

HTML Tags ausblenden.

Bitte vorsichtig einsetzen! Es ist aus SEO Sicht bedenklich, hiermit Inhalte auszublenden. Mit dieser Klasse können HTML Tags Mobil ausgeblendet werden. Um ganze Elemente auszublenden bietet Typo3 eine entsprechende Funktion, daher soll diese Klasse nur dazu eingesetzt werden, HTML Tags auszublenden um das Layout oder den Satz fine zu tunen, zum Beispiel <br> Elemente.

CSS Klassen:
lgw-no_mobile (Resultat: Blendet das entsprechende Element vor einer Bildschirmbreite von 769px aus)

Anwendung:

So setzt man das Element ein: <br class="lgw-no_mobile"/>

Anwendungsbeispiele:

  • Fine Wine Slider: da der Umbruch in der Subheadline auf mobilen Geräten zu schlecht gesetztem Text führt ist das hier angewendet.

Inhalte horizontal & vertikal mittig ausrichten.

CSS Klassen:
lgw-content-flexcenter (Resultat: s.o.)

Anwendung:

Ein <div class="lgw-content-flexcenter"> wird um den eigentlichen Content gesetzt, damit der Content in der mitte ist.

Anwendungsbeispiele:

  • Inspiration Slider

Slider Markup korrigieren, wenn es bei einem Slide keine Navigations-Punkte gibt.

Der Bereich, der im Slider bespielt werden kann, reserviert unten einen Teil des Slides für die Navigations-Punkte. Wenn nur ein Slide gesetzt wird, dann ist der Content (sollte er vertikal & horizontal mittig gesetzt werden) nicht 100% in der Mitte. Das fällt eher bei Slidern der größe Medium und Small auf.

CSS Klassen:
lgw-slider-nodots-markup (Resultat: das zusätzliche Padding für das Freihalten der Navigations-Punkte wird gelöscht)

Anwendung:

In den Slider Einstellungen bei auw Erweitert die CSS Klasse eintragen.

Anwendungsbeispiele:

Vertikaler Strich im Slider.

Mit einem <span> Element und der Klasse im Markup einen Strich zwischen 2 Elementen einbauen.

CSS Klassen:
lgw-strich (Resultat: erzeugt einen Strich der eine Höhe von 15% des Parent Elements hat)

Anwendung:

In den Slider Einstellungen unter auw Erweitert die CSS Klasse eintragen und im Markup ein <span></span> Element an der gewünschten Stelle einfügen. Hinweis: Es macht Sinn, das <span> Element mit der Klasse lgw-no_mobile auszublenden, da es auf Handys nicht so viel Platz zum Anzeigen des Stichs gibt.

Anwendungsbeispiele:

  • Wein-Abo Slider
  • Inspiration Slider

CSS Klassen für Text-Elemente

Listen schmaler machen.

Auf einigen Seiten werden bereits Inhaltsangaben Platziert, so zum Beispiel auf langen Regionsseiten oder langen Blogbeiträgen. In der üblichen Darstellung wird die Inhaltsangabe in eine Spalte der größe 3/12 gesetzt, damit sie neben dem Text unter der Headline platziert ist. Da Listen per Default eingerückt sind, bleibt nur noch wenig platz für den Text der Listenpunkte, was auf einigen Mobilgeräten nicht gut aussieht. Der Tabulatur-Schritt der Liste kann hiermit gelöscht werden. Hinweis: Funktioniert bisher nur mit unordert List (ul). Gebt bescheid, wenn die ordered List gebraucht wird.

CSS Klassen:
lgw-ulfix (Resultat: Löscht das Tabulatur-Margin und stellt Links mit hover Effekt ein)

Anwendung:

Die Klasse wird im Text-Bild Element unter auw Erweitert eingetragen und ändert somit alle im Text-Bild Element erstellten Listen.

Anwendungsbeispiele:

Vibrant orange Unterstrich.

Erzeugt einen Unterstrich in CI Farbe, zum Akzente setzen. Hinweis: Funktioniert nur mit H1 und H2 Headlines, da die Unterstriche bei kleineren Headlines sehr dünn sind und es dadruch nicht ganz so gut aussieht.

CSS Klassen:
lgw-underline-red (Resultat: Löscht das Tabulatur-Margin und stellt Links mit hover Effekt ein)

Anwendung:

Die Klasse muss in ein <span class="lgw-underline-red"> Element um den Text gelegt werden.

Anwendungsbeispiele:

Alle die Funktion klickbaren Elemente unterbinden (pointer-events).

Hinweis: Das wird in der normalen Content-Pflege wahrscheinlich nicht gebraucht, aber ich will es hier trotzdem auflisten.

CSS Klassen:
lgw-no-pointer-events (Resultat: unterbindet alle Link-Funktionen im Element)

Anwendung:

Die Klasse muss in ein <span class="lgw-underline-red"> Element um den Text gelegt werden.

Anwendungsbeispiele:

H1 oder H2 Überschriften als einstellen.

Wenn man eine H1 baut, die wie eine H3 gestyled sein soll, wird die Überschirft zwar von der Größe her als H3 ausgegeben, allerdings als Roslindale Text. Um sie auf Proxima Nove umzustellen, kann diese Klasse in das betroffene Element im Tab auw Erweitert eingegeben werden. Das wird nicht häufig gebraucht, aber ist hier enthalten falls es doch mal nötig ist.

CSS Klassen:
lgw-force-proxima (Resultat: stellt die Font-Family für H1 & H2 Headlines auf Proxima Nova um)

Anwendung:

Die Klasse muss dem betroffenen Element im Tab auw Erweitert hinzugefügt werden.

Anwendungsbeispiele:

CSS Klassen für Spalten-Elemente

Spaltenreihenfolge auf mobilen Devices umkehren.

Es gibt ein paar Seiten im Shop, auf denen ein abwechselndes Layout benutzt wird, d.h. es gibt eine Zeile mit einem Bild rechts und Text links und in der nächsten Zeile umgekehrt usw. Im Standard werden solche Einstellungen in mobilen Darstellungen so dargestellt, dass das Muster nicht mehr abwechselnd ist, d.h. auf dem Handy wäre die Reihenfolge dann: Bild Text Text Bild Bild Text Text usw. Um das zu ändern, können den Spalten-Elementen folgende CSS Klassen zugewiesen werden:

CSS Klassen:
lgw-flipcolumn-mobile (Resultat: unter einer Bildschirmbreite von 767px werden die Spalten vertauscht)
lgw-noflipcolumn-mobile (die Klasse ist für Spalten-Elemente innerhalb von Spalten-Elementen, die vertausch werden sollen (weil die vorherige Klasse alle Spaltenelemente im Parent vertauscht.)

Anwendung:

Die Klasse wird im Spalten-Element unter auw Erweitert eingetragen. 

Anwendungsbeispiele:

  • Wein-Archiv: hier wird nur lgw-flipcolumn-mobile angewendet
  • Weinpakete: hier werden beide angewendet, das Spalten-Element im Spalten-Element justiert die Bildgrößen etwas feiner

Zeilen im Container nebeneinander darstellen.

Normalerweise werden Elemente in einem Container untereinander dargestellt. Wenn sie nebeneinander darstellen möchte, dann können folgende CSS Klassen angewand werden.

Drei CSS Klassen in Kombination:
flex__wrp flex__jc--c flex__ai--fs (Resultat: stellt die Elemente im Container nebeneinander dar und richtet sie mittig aus)

Kurze Erklärung zu den 3 Klassen einzeln:
flex__jc--c: CSS Flexbox Attribut welches einstellt, dass sich alle Elemente darin horizontal mittig ausrichten
flex__ai--fs: CSS Flexbox Attribut welches einstellt, die sich die Elemente untereinander oben ausrichten (falls sie nicht gleich hoch sind)
flex__wrp: CSS Flexbox Attribut welches einstellt, dass Elemente, die nicht in eine Zeile passen, in die nächste Zeile rutschen

Anwendung:

Um das anzuwenden, muss ein Container (Spaltenelement ohne Spalten) erstellt werden, welches alle Elemente beinhaltet. Die 3 oben genannten Klassen müssen dann bei auw Erweitert im Container-Element eingetragen werden. Um zu steuern, wie breit die enthaltenen Elemente sind, werden dann die CSS-Klassen für die Spaltenbreite benutzt (zB. col-lg-4 col-md-5 col-sm-6 col-9 — die Kombination sorgt dafür, dass das Element auf dem Desktop die Breite 4 hat, auf dem iPad queer die Breite 5, auf dem Handy queer die Breite 6 und auf dem Handy hoch die Breite 9).

Anwendungsbeispiele: