Mein Style­guide

Hier findest du eine Übersicht deiner globalen Styles und kannst diese bequem anpassen.

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.

H1 Überschrift weiß

H1 Überschrift schwarz

H2 Überschrift weiß

H2 Überschrift schwarz

H2 Überschrift orange

H3 Überschrift orange

H3 Überschrift schwarz

H3 Überschrift weiß

H4 Überschrift schwarz

H4 Überschrift orange

H4 Überschrift weiß

Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim.
Text-Link HeaderText-LinkButton orange / darkButton dark / orange
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.

Eine Übersicht der Input-Elemente

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.

Wow dieser Styleguide!

Globale Styles sind der Hammer, erfordern aber Aufmerksamkeit!
Globale Styles ersparen mir viel Frust und Zeit wenn Ich das Design einer Seite ändern oder neue Inhalte einfügen möchte.
Daniel Biegler
Web-Entwickler bei Inboundly

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.

Kachel mit Styles

Lorem Ipsum Beitrag, ja!

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.

Weiterlesen

Kachel ohne Styles

Lorem Ipsum Beitrag, ja!

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.

Weiterlesen

Nun bist du an der Reihe!

Bearbeite nun diese Seite und füge deine eigenen Komponenten hinzu.

Globale Styles in diesem Theme

  • 'Bereich Text Links'
  • 'Bereich Text Mitte'
  • 'Bereich Text Rechts'
  • 'Bereich Zentriert Max Breit'


  • 'Button Primär Groß Leer'
  • 'Button Primär Groß Voll'
  • 'Button Primär Leer'
  • 'Button Sekundär Groß Leer'
  • 'Button Sekundär Groß Voll'
  • 'Button Sekundär Leer'
  • 'Button Sekundär Voll'


  • 'Container'
  • 'Container Hero'
  • 'Container Hero Quote'
  • 'Icon Primär'
  • 'Icon Sekundär'
  • 'Icon Zitat Hintergrund Links'
  • 'Icon Zitat Hintergrund Rechts'


  • 'K-Kachel-1 Bereich Bild'
  • 'K-Kachel-1 Bereich Container'
  • 'K-Kachel-1 Bereich Text'


  • 'Text Bild Beschreibung'
  • 'Text Hero'
  • 'Text Randnotiz'
  • 'Text Zitat Autor'
  • 'Text Zitat Text'


  • 'Bild Rund Schatten'
  • 'Spalten Abstand'
  • 'Sektion Rand Oben'

Erstellt von inboundly.de

Wir wollen den Mehrwert und die Inhalte in den Mittelpunkt stellen, über welche Unternehmen und Unternehmer nachhaltig neue Kunden im Internet gewinnen. 
Inboundly.de Logo