Willkommen in der

Pattern Library (PaLi) von OTTO

Willkommen in der

Pattern Library (PaLi) von OTTO

Die Pattern Library ist die zentrale, vollständige Dokumentation aller globalen und lokalen Pattern, mit dem Ziel

  • eine strukturierte Übersicht über alle Pattern zu geben,
  • Einsatzmöglichkeiten und -grenzen von Pattern aufzuzeigen,
  • Hilfestellung bei der Verwendung zu geben.

Pattern-Changelog

18.11.2021 Release für Sliding Carousel und Slider

Dieses Update markiert die offizielle Freigabe des Sliding Carousels und des Sliders zum Einsatz im produktiven Umfeld.
Dazu werden diverse Pattern aktualisiert, Dokumentationen glattgezogen sowie in bestimmten Browsern Bugs behoben.

21.10.2021 Sheet Release

Dieses Update markiert die offizielle Freigabe des Sheets zum Einsatz im produktiven Umfeld.
Dazu werden diverse Pattern aktualisiert, Dokumentationen glattgezogen sowie in bestimmten Browsern Bugs behoben.
  • Sheet ist nun live und freigegeben. Bitte Dokumentation beachten!

25.08.2021 Harmonisierung Teil 7

Dieses Update beinhaltet hauptsächlich Ergänzungen zu bereits vorhandenen, harmonisierten Pattern.
Dazu werden diverse Dokumentationen glattgezogen sowie in bestimmten Browsern Bugs behoben.
  • Tooltip unterstützt nun das Tracking von hover Events
  • Disabled states für alle Formular Material Inputs hinzugefügt
    Ich bin ein Hinweis
  • Inputfeld mit Platzhalter hinzugefügt
  • Grid Pattern 🚀 hinzugefügt

03.08.2021 Harmonisierung Teil 6

Dieses Update beinhaltet hauptsächlich Ergänzungen zu bereits vorhandenen, harmonisierten Pattern.
Dazu werden diverse Dokumentationen glattgezogen sowie in bestimmten Browsern Bugs behoben.

06.07.2021 Harmonisierung Teil 5

Dieses Update beinhaltet hauptsächlich Ergänzungen zu bereits vorhandenen, harmonisierten Pattern.
Dazu werden diverse Dokumentationen glattgezogen sowie in bestimmten Browsern Bugs behoben.
  • Table View um neue Varianten ergänzt (ohne Trenner, Expander & Accordion)
  • Cards neu hinzugefügt
  • Expander neu hinzugefügt
    Label
    EcoSilence Drive Abgesehen von seiner hohen Leistung ist der EcoSilence Drive in jeder Beziehung äußerst zurückhaltend. Der bürstenlose Motor reduziert Reibungsgeräusche optimal und läuft daher besonders leise. Sie können sogar Wäsche waschen, wenn Ihr Baby schläft oder Sie mit Ihrer Familie gemütlich zu Abend essen. Er ist besonders energieeffizient, was sich gerade bei vielen Wäschen lohnt. Schön, dass die intelligente Technologie auch für eine besonders hohe Lebensdauer sorgt.
    AllergiePlus AllergiePlus ist das ideale Programm für ein hygienisches Waschergebnis. Bestens geeignet für alle direkt auf der Haut getragenen Kleidungsstücke, und zwar insbesondere für Menschen mit empfindlicher, leicht gereizter Haut. Ein speziell gestalteter Waschzyklus bei definierter Wassertemperatur, höherem Wasserstand und zusätzlichen Spülgängen reduziert allergene Rückstände auf ein Minimum. Das heißt: weniger Pollen, Partikel, Tierhaare und Staubmilben. Für höchste hygienische Ansprüche wählen Sie mindestens 60 °C Waschtemperatur.
  • Accordion neu hinzugefügt
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur similique error maiores soluta veritatis, alias illum temporibus labore perferendis officiis ratione quo repellat delectus magnam cupiditate incidunt blanditiis, nihil et quisquam quod neque quam dolores pariatur quidem? Amet, aperiam voluptate, rem temporibus excepturi ducimus omnis laboriosam eaque laudantium adipisci deserunt.
    Lorem ipsum dolor sit amet
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur similique error maiores soluta veritatis, alias illum temporibus labore perferendis officiis ratione quo repellat delectus magnam cupiditate incidunt blanditiis, nihil et quisquam quod neque quam dolores pariatur quidem? Amet, aperiam voluptate, rem temporibus excepturi ducimus omnis laboriosam eaque laudantium adipisci deserunt.
  • Block neu hinzugefügt
  • Fokussierter Dialog aktualisiert

21.06.2021 Harmonisierung Teil 4

Dieses Update beinhaltet hauptsächlich Ergänzungen zu bereits vorhandenen, harmonisierten Pattern.
Dazu werden diverse Dokumentationen glattgezogen sowie in bestimmten Browsern Bugs behoben.

10.06.2021 Harmonisierung Teil 3

Dieses Update beinhaltet hauptsächlich Ergänzungen zu bereits vorhandenen, harmonisierten Pattern.
Dazu werden diverse Dokumentationen glattgezogen sowie in bestimmten Browsern Bugs behoben.

19.05.2021 Harmonisierung Teil 2

Im Zuge der Hamonisierung wurden weitere neue Pattern entworfen.
Alle Pattern, die neu sind, wurden mit einem ⭐️ markiert.
Alle neuen CSS-Klassen und SCSS-Variablen fangen mit dem Prefix "pl_" an.
  • Textarea: Nun mit maximaler und minimaler Länge verfügbar
    Ich bin ein Hinweis
  • Tags neu hinzugefügt -54%
  • Chips neu hinzugefügt Type something
  • Badges neu hinzugefügt 1
  • Sonderfarben: Neue Nachhaltigkeitsfarbe Nachhaltig
  • Auswahlkachel: Neue Farbe Beige hinzugefügt
  • Border-Radius: Dokumentation hinzugefügt
  • Listen: Neue Listen hinzugefügt

27.04.2021 Harmonisierung

Im Zuge der Hamonisierung wurden neue Pattern entworfen.
Alle Pattern, die neu sind, wurden mit einem ⭐️ markiert.
Alle neuen CSS-Klassen und SCSS-Variablen fangen mit dem Prefix "pl_" an.

18.12.2020

  • Neue UI-Elemente im Bereich Formular Material
    Ich bin ein Erfolgshinweis
    Hinweis
    invalider Hinweis

23.06.2020

15.04.2020

  • Neu: QR-Code Icon in Icon-Font

11.03.2020

  • Neu: Der Select-Button mit Animation

19.12.2019

  • neue badge200 Variante 1 ! 1 3000

22.01.2019

  • neuer Symbol-Button 10 in ThirdOrder

03.08.2017

  • neue Icons im Icon-Font

05.07.2017

14.06.2017

  • Neue Option für das Eingabefeld-Pattern zur Anzeige eines X zum Leeren des Feldes.

12.06.2017

  • Neue Tooltip-Variante "als Hinweiskommunikation"

12.06.2017

  • Neue Tooltip-Variante "mit Klick auch auf Non-Touch-Devices"

30.05.2017

  • Überarbeitung des Symbol-Buttons 5. Ordnung.

18.05.2017

  • Neue Icons in der Iconfont für Löschen () und Ausschneiden (c).

28.07.2016

  • Neue Icons in der Iconfont für das Bewerten von Lieferungen und Zahlungen

25.05.2016

  • Entfernen der deprecated Pattern p_copy350, p_copy250, p_copy225, p_copy200, p_copy175, p_copy150, p_copy125, p_copy50, p_expander--text und js_hasTooltip

12.05.2016

  • Entfernen aller alter, nicht-responsiver Pattern ("c_")

02.05.2016

  • Überarbeitung des Layer-Pattern: Keine absolute Positionierung und kein Scrolling mehr innerhalb des Layers

14.04.2016

  • Änderung der Loader-Position innerhalb des DropButton-Patterns

22.03.2016

  • Neues Icon in der Iconfont für Editieren

21.03.2016

  • Neues Pattern für Notizen

09.03.2016

  • Austausch der Icons in der Iconfont für Sharing, Preisalarm und Testurteil

02.03.2016

  • Neue Größenvariante für das Kundenbewertungs-Pattern: rating200
  • Neue Variante für das Tabellen-Pattern: table100 ohne responsive Umsortierung
  • Neue Option für das Tabellen-Pattern, mit der eine horizontale "Trennlinie" unter einer Zeile angezeigt werden kann

03.02.2016

  • Neue Icons in der Iconfont für Sharing, Preisalarm und Testurteil
  • Änderung des z-index des DropButton-Inhalts

09.12.2015

  • Entfernen des Nach-oben Button aus der PaLi
  • Neues Icon "Sprechblase" in der Iconfont

27.11.2015

  • Begrenzung der Maximalbreite des Dropbutton-Inhalts im Fehlerfall auf 260px

20.11.2015

  • Neues Tooltip-Attribut "data-tooltip-ref-clone", mit dem in der ID-Referenz-Variante das Referenzelement bei Aufruf des Tooltip nicht gelöscht wird

17.11.2015

  • Änderung der Schriftfarbe von deaktivierten Eingabfeldern

Was ist ein Pattern?

Pattern sind wiederkehrende Bausteine und Komponenten im Frontend, die zentral mit dem Ziel bereitgestellt werden

  • Konsistenz in Visualität,
  • Konsistenz in Funktionalität und
  • minimale Code-Komplexität

des Frontends von otto.de (und sekundär auch von Drittanwendungen) zu gewährleisten.

Dabei sollen vor allem auch die strategischen Fähigkeiten von otto.de bestmöglich unterstützt werden, insbesondere

  • die Umsetzungsgeschwindigkeit durch die Wiederverwendbarkeit von Bausteinen,
  • die Flexibilität und Agilität durch zentrale Pflegbarkeit von Änderungen,
  • die Lade-Performance und damit maßgeblich auch die Multi-Device-Fähigkeit durch weniger komplexen Frontend-Code sowie
  • die Plattform- und Produktqualität und insbesondere die Usability durch visuelle und funktionale Konsistenz.

Worin unterscheiden sich globale und lokale Pattern?

Die Bereitstellung eines Pattern kann auf unterschiedlichen Ebenen erfolgen:

  • lokale Pattern werden in einem Funktionalen Team entwickelt und bereitgestellt
  • globale Pattern werden vom Team Assets entwickelt und für alle Teams bereitgestellt

Wofür stehen die Pattern-Nummern?

Jedes Pattern besitzt einen numerischen Suffix, das für die jeweilige Größen- bzw. Intensitätsvariante steht (z.B. "button100"). "100" ist dabei stets die Standardgröße. Eine höhere Zahl steht dann für eine größere, eine niedrigere für eine kleinere Variante. Der genaue Wert steht dabei aber nicht im direkten Zusammenhang zur Größe. So ist z.B der "button200" nicht zwangsläufig doppelt so hoch wie der "button100".

Der Vorteil dieser Skala im Vergleich zu anderen Skalen wie beispielsweise den T- Shirt-Größen (S, M, L, XL) ist, dass sich immer problemlos Zwischenstufen hinzufügen lassen. So kann z.B zwischen den Größen 50 und 100 die Größe 75 eingeführt werden.

Was bedeuten die Ordnungen der Pattern?

Manche Pattern besitzen neben der Nummer einen weiteren Suffix, der die Ordnung einer Patternvariante wiedergibt. Hierbei wird stets von der 1. Ordnung (1st) aus abwärts gezählt (2nd, 3rd, 4th, ...). Diese Ordnungszahlen geben die visuelle Rangfolge von Pattern-Varianten innerhalb eines Pattern wieder. Die Variante mit der höchsten Ordnungszahl ist die visuell prägnanteste, die niedrigerer Ordnung ordnen sich entsprechend unter.

Hinweis für externe Dienstleister

Um ein Pattern zu verwenden, müssen unbedingt alle entsprechenden Inhalte kopiert und nicht direkt auf otto.de referenziert werden. Das betrifft insbesondere die CSS- und JavaScript-Bibliotheken sowie die Webfonts, da wir nicht dafür garantieren, dass die angegebenen Sourcen dauerhaft unter den aktuellen URLs bestehen bleiben. Bei Bedarf können einzelne Dateien aus dem Shop heruntergeladen und selbst gehostet werden.

Bei der Verwendung einzelner Pattern reicht aber oft das Kopieren der entsprechenden Codebestandteile direkt aus der PaLi. Das bedeutet:

  • Ein Pattern aussuchen und den blauen "Code"-Button anklicken
  • Den HTML-Code an die entsprechende Stelle der externen Seite kopieren
  • Das CSS und ggf. das JavaScript aus den Tabs in die CSS-/JavaScript-Files der externen Seite kopieren

Das responsive Grid-System

Das Grid- und Breakpoint-System von otto.de besteht aus den folgenden Werten (alle Pixelangaben verstehen sich als CSS-Pixel und nicht als Device-Pixel):

  • Minimum von 320px: Unterhalb dieser Grenze muss die Seite nicht mehr funktionieren
  • Maximum von 1152px: Oberhalb von dieser Grenze hört das Grid auf, sich proportional anzupassen. Stattdessen wird links und rechts der Rand vergrößert
  • Major Breakpoint bei 768px: An diesem Punkt ändert sich das Grid von 6 Spalten auf 12 Spalten, ebenso können grundlegendere Änderungen am Verhalten der Seite vorgenommen werden
  • Zwei Minor Breakpoints bei 448px und 992px: Das Grid bleibt hier unverändert, aber das Layout kann an dieser Stelle angepasst werden (z.B. Wechsel von zweispaltig auf dreispaltig)

Für dieses Pattern ist kein Konfigurator verfügbar!

Technische Hinweise

Für dieses Pattern sind keine technischen Hinweise vorhanden!