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.

Wie schon erwähnt solltest du dann diesen Styleguide an deine Bedürfnisse anpassen und neue Elemente hinzufügen. Die hier vorgegebenen sind nur kleine Beispiele.

Wie wir dir helfen können?

Lass uns über Styles sprechen

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.

Die Lösung? Globale Styles!

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.

Vermeide Style-Duplizierung um jeden Preis

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!

Eigene Komponenten erstellen

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:

1. Für den Bereich, aus dem die Kachel besteht
2. Für den Bereich, welcher das Bild hält
3. Für den Bereich, welcher den Text hält

Für globale Styles die mit Komponenten zu tun haben benutzen wir den Präfix "K-", so ist es ganz einfach nach relevanten Styles zu suchen.