Da dieser Styleguide eine ganz normale Seite ist, hast du die Möglichkeit ihn vollkommen zu bearbeiten. Genau so wie du auch deine eigenen Seiten bearbeitest. Du kannst hier alles verschieben und auch löschen.
Der Styleguide ist in verschiedene Sektionen eingeteilt die dir praktische Elemente und oder Bereiche zeigen. Das erleichtert dir ein besseres Gefühl für Größen, Abstände und Farben auf deiner Live Seite zu kriegen.
Nachdem du dich mit unserem Styleguide Konzept vertraut gemacht hast, kannst du es ganz leicht an deine eigenen Bedürfnisse anpassen. Füge neue Elemente zu, verschiebe die Reihenfolge, lösche diese Intro-Sektion, etc.
Vor dem Bearbeiten von Standard-Elementen solltest du immer sicherstellen, ob du den Standard-Style ausgewählt hast.
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Meistens genügt ein Style für die Inputs, fühl dich aber nicht eingeengt, du kannst z.B. dunkle und helle Inputs gestalten! Kopiere dazu den folgenden Bereich mit den Input-Elementen und versiehe sie mit neuen globalen Styles.
Bitte beachte, dass momentan (2020-05-26) der Formular-Button und der normale Button den selben Style haben. Wenn der Formular-Button anders aussehen soll empfehlen wir dafür einen separaten Style zu erstellen.
Wer kennt es nicht, die Website ist online und erst im Nachhinein merkt man, dass die Schrift auf mobilen Geräten einen Tick zu groß ist. Wenn man nur eine Seite hat ist das schnell behoben, aber wenn nun sichergestellt werden muss dass die Schrift korrekt auf 20 Unter-Seiten angezeigt wird rupft man sich die Haare aus.
Nachdem alle Schriften wieder gut aussehen, merkst du dass du die Zeilenhöhe nicht angepasst hast und das Unkraut zupfen beginnt von Neuem.
Dieses Problem gibt es nicht nur bei Schriften sondern ganz allgemein für Abstände, Farben, Ränder, Höhen, Breiten und so weiter und so fort.
Verpacke deine Styles als wiederverwendbare Komponenten! Das bedeutet du baust eine eigene kohärente Design-Sprache für deine Seite wo du Abstände, Größen, Farben und andere Eigenschaften durchgängig gleich hältst. Das vermittelt einen professionellen und durchdachten Eindruck!
Wir bei Inboundly bauen viele Websites. In puncto Design haben wir also alle möglichen Schmerzstellen schon erlebt und möchten unser Wissen teilen.
Weniger ist wirklich mehr. Das soll jetzt aber auf keinen Fall bedeuten, dass jede Seite gleich aussehen muss. Ganz im Gegenteil! Lass deiner Fantasie freien lauf und erstelle unterschiedliche Komponenten aber beachte immer folgendes:
Setze keine* Schriftgrößen, Farben oder Abstände manuell. Benutze wiederverwendbare globale Styles.
* Ab und zu ist das unumgänglich aber in den meisten Fällen empfehlen wir sehr streng auf globale Styles zu achten!
Kacheln braucht eigentlich fast jede Seite daher möchten wir dir an folgendem Beispiel zeigen wie du deine eigenen Komponenten sauber planen, strukturieren und ordnen kannst.
Schau dir die folgende Beispiel-Kachel an. Im Anschluss siehst du die einzelnen Elemente ohne Styles.
Probier die Kachel nachzubilden ohne selber manuell zu stylen, benutze nur die schon vorhandenen globalen Styles!
Diese Beispiel-Kachel braucht drei globale Styles:
Vitae tempus quam pellentesque nec nam aliquam sem et tortor. Erat velit scelerisque in dictum non consectetur a erat nam. Lobortis mattis aliquam faucibus purus in massa tempor. Tortor consequat id porta nibh venenatis cras sed felis.
Vitae tempus quam pellentesque nec nam aliquam sem et tortor. Erat velit scelerisque in dictum non consectetur a erat nam. Lobortis mattis aliquam faucibus purus in massa tempor. Tortor consequat id porta nibh venenatis cras sed felis.
