Pali Muster

Saturday, August 1st, 2020

Die Bereitstellung eines Pattern kann auf unterschiedlichen Ebenen erfolgen: Bei der Verwendung einzelner Pattern reicht aber oft das Kopieren der entsprechenden Codebestandteile direkt aus der PaLi. Das bedeutet: Die Pattern Library ist die zentrale, vollständige Dokumentation aller globalen und lokalen Pattern, mit dem Ziel des Frontends von otto.de (und sekundär auch von Drittanwendungen) zu gewährleisten. Pattern sind wiederkehrende Bausteine und Komponenten im Frontend, die zentral mit dem Ziel bereitgestellt werden 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. 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. 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): Dabei sollen vor allem auch die strategischen Fähigkeiten von otto.de bestmöglich unterstützt werden, insbesondere 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”. 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..