Was ist das?
Der Frame Styleguide dient als digitale Markenrichtlinie für die Erstellung von Websites und Erlebnissen. Das Ziel eines Styleguides ist es, die Konsistenz, Qualität und Kommunikation über die gesamte Benutzeroberfläche hinweg zu verbessern und den Design- und Entwicklungsprozess effizienter und fokussierter zu gestalten.
Dieser Styleguide dient dazu, ein gemeinsames Vokabular zwischen Designern und Entwicklern zu etablieren und klare, leicht auffindbare Leitlinien zu Best Practices im Bereich Design und Entwicklung bereitzustellen.
Weitere Informationen zur Bedeutung von Designsystemen.
Für wen ist dies bestimmt?
Für alle, die eine neue Website mit Frame entwerfen oder entwickeln. Selbst wenn Sie diese Komponenten nicht direkt verwenden müssen, sollten das Basis-Styling und die Dokumentation eine nützliche Referenz dafür sein, wie wir Dinge an anderer Stelle umgesetzt haben, und dazu beitragen, Doppelarbeit und eine Verunreinigung der Stylesheets zu vermeiden.
Wie verwende ich es?
Bitte lesen Sie die Anleitung „Erste Schritte mit Slite“, um zu erfahren, wie Sie dies in Ihr Projekt integrieren und das grundlegende Design Ihres Themes bearbeiten können.
Farbe erweckt ein Design zum Leben. Farbe ist vielseitig einsetzbar; sie wird verwendet, um Emotionen und Stimmungen auszudrücken, Akzente zu setzen und Assoziationen zu wecken.
rgb(0, 0, 0)
$COLOR_PRIMARY
rgb(99, 115, 129)
$COLOR_SECONDARY
rgb(244, 241, 232)
$COLOR_SAND
rgb(139, 0, 0)
$COLOR_RED
rgb(79, 44, 29)
$COLOR_DARK_BROWN
rgb(0, 0, 0)
$COLOR_TEXT_PRIMARY
rgb(81, 81, 81)
$COLOR_TEXT_SECONDARY
rgb(148, 148, 148)
$COLOR_TEXT_LIGHT
rgb(255, 255, 255)
$COLOR_TEXT_INVERSE
rgb(0, 0, 0)
$COLOR_BACKGROUND_DARK
rgb(249, 248, 243)
$COLOR_BACKGROUND_LIGHT
rgb(255, 255, 255)
$COLOR_BACKGROUND_WHITE
rgb(245, 245, 245)
$COLOR_BACKGROUND_GREY
rgb(229, 229, 229)
$COLOR_BORDER_LIGHT
rgb(204, 204, 204)
$COLOR_BORDER_DARK
rgb(127, 85, 28)
$COLOR_LINK
rgb(0, 0, 0)
$COLOR_LINK_HOVER
rgb(127, 85, 28)
$COLOR_BUTTON
rgb(0, 0, 0)
$COLOR_BUTTON_HOVER
rgb(0, 0, 0)
$COLOR_SUPPORT_INFO
rgb(0, 170, 0)
$COLOR_SUPPORT_SUCCESS
rgb(230, 87, 34)
$COLOR_SUPPORT_WARNING
rgb(139, 0, 0);
$COLOR_SUPPORT_ERROR
rgb(94, 158, 214)
$COLOR_SUPPORT_FOCUS
Benutzerdefinierte Schaltflächenstile für Aktionen in Formularen, Dialogen und mehr, mit Unterstützung für verschiedene Größen, Zustände und weitere Optionen.
.button--primary.button--outlined
.button--outlined,
.button--secondary.button--secondary-light
Beispiele und Anwendungsrichtlinien für Formularsteuerungsstile, Layoutoptionen und benutzerdefinierte Komponenten zur Erstellung einer Vielzahl von Formularen.
Das Frame-Rastersystem bietet ein flexibles, mobiloptimiertes und geräteunabhängiges Layout-System. Es verfügt über Funktionen zur Steuerung von Ausrichtung, Reihenfolge, Fluss und Abständen.
Das Rastersystem basiert auf materialize.css.
Standard-Spalten
Desktop 12 / Tablet 6 / Mobil 4
Desktop 12 / Tablet 6 / Mobil 4 (Keine Spalten)
Symbole sind so gestaltet, dass sie einfach, modern, freundlich und manchmal auch originell sind. Jedes Symbol ist auf seine minimalistische Form reduziert und drückt wesentliche Eigenschaften aus, um Beschriftungen zu ersetzen oder zu ergänzen.
Abstands-Variablen werden verwendet, um Abstände und Polsterungen konsistent auf Komponenten und Benutzeroberflächen anzuwenden. Eine festgelegte Abstandsskala verleiht dem Produkt einen Rhythmus und schafft einen natürlichen und vertrauten Fluss von Seite zu Seite.
$SPACING_3XS
$SPACING_2XS
$SPACING_XS
$SPACING_S
$SPACING_M
$SPACING_L
$SPACING_XL
$SPACING_2XL
$SPACING_3XL
$LAYOUT_2XS
$LAYOUT_XS
$LAYOUT_S
$LAYOUT_M
$LAYOUT_L
$LAYOUT_XL
$LAYOUT_2XL
Typografie wird verwendet, um klare Hierarchien, nützliche Strukturen und zielgerichtete Ausrichtungen zu schaffen, die den Benutzer durch das Produkt und die Benutzererfahrung führen. Sie ist die Kernstruktur jeder gut gestalteten Benutzeroberfläche.
Anzeige 1
Anzeige 2
Anzeige 3
Überschrift 1
Überschrift 2
Überschrift 3
Überschrift 4
Überschrift 5
Überschrift 6
Untertitel 1
Untertitel 2
Körper 1
Körper 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- Geordnete Liste Ebene 1
- Geordnete Liste Ebene 2
- Geordnete Liste Ebene 2
- Geordnete Liste Ebene 1
- Geordnete Liste Ebene 1
- Ungeordnete Liste Ebene 1
- Ungeordnete Liste Ebene 2
- Ungeordnete Liste Ebene 2
- Ungeordnete Liste Ebene 1
- Ungeordnete Liste Ebene 1
Sie können das Mark-Tag verwenden, um hervorheben Text.
Diese Textzeile ist als gelöschter Text zu betrachten.
Dieser Textabschnitt ist nicht mehr aktuell.
Diese Textzeile ist als Ergänzung zum Dokument zu betrachten.
Diese Textzeile wird unterstrichen dargestellt.
Diese Textzeile ist als Kleingedrucktes zu betrachten.
Diese Zeile wird als fettgedruckter Text dargestellt.
Diese Zeile wird als kursiver Text dargestellt.
Die Darstellung von Zahlungssymbolen trägt dazu bei, das Gefühl der Sicherheit auf der Website zu verstärken. Dies sind die derzeit aktivierten Zahlungsoptionen, die in den Shop-Einstellungen definiert sind.
Produktkarten sind mittelgroße Komponenten, die wichtige Produktinformationen wie eine Miniaturansicht, einen Titel und einen Preis enthalten. Diese Produktkarten werden im gesamten Theme verwendet und gehören zu den am häufigsten wiederverwendbaren Komponenten.
