First Steps

Die ersten Schritte zur Verwendung des Styleguide Berlin.de sind für jedes Vertical gleich und ermöglichen so ein schnelles und einfaches Wechseln zwischen den Verticals. Ein Wechsel zwischen den Verticals sollte bei korrekter Auswahl jedoch nicht nötig sein. Die Verticals unterscheiden sich grundlegend nur im Aussehen, das Markup bleibt in den meisten Fällen gleich. Um ein besseres Verständnis für den Styleguide und dessen Aufbau zu erlangen folgt eine kurze Erläuterung der Grundlagen.

Ein Vertical ist eine Variation des Stils und beeinflusst insbesondere Farben, Schriftstile und Anordnungen von Einheiten. Hierbei bleibt jedoch das Markup weitestgehend gleich und die Änderungen werden mittels CSS getätigt. In seltenen Fällen gibt es auch Anpassungen im Verhalten von Einheiten wodurch es auch leichte Anpassungen im Bereich des Javascripts geben kann. Außerdem gibt es Verticalspezifische Einheiten, die nur im vorgesehenen Vertical verwendet werden können oder sollen, diese sind entsprechend in den Verticals ein- oder ausgeblendet.

Der Styleguide ist strukturiert nach Global, Elements, Modules und Samplepages. Im Bereich Global finden sich die kleinsten Einheiten. Die hier aufgeführten Seiten sollten zu Beginn sorgfältig gelesen werden um ein Gefühl für die Basis der Verwendung zu erhalten. Insbesondere betrifft dies die Einbindung der CSS- und JS-Dateien, den Header und Footer, aber auch Möglichkeiten für Fonts, Colors und Imagesizes, die in jedem Fall beachtet werden müssen. Diese Einheiten stellen die Grundlage der weiteren Verwendung dar und alle nachfolgenden Einheiten basieren auf der Annahme, dass diese Grundlagen Beachtung finden. Eine Nichtbeachtung dieser Grundlagen kann nachfolgend zu unschönen Darstellungsfehlern führen.

Unter Elements finden sich rudimentäre Einheiten, die beliebig eingesetzt werden können um neue Elemente hinzuzufügen oder der Seite eine Struktur zu geben. Diese Einheiten finden sich teilweise in den Modules wieder, sind aber auch alleinstehend oder in Kombination verwendbar. In vielen Fällen ist es notwendig Elemente zu kombinieren um ein stimmiges Gesamtbild zu erzeugen. Beispielsweise ist eine zusammengehörige Kombination von Einheiten aus Elements möglichst im Element mit der Klasse block zu verwenden, da die Klasse block Abstände zur nachfolgenden Einheit festlegt.

Modules sind vorgefertigte Kombinationen aus dem Bereich Elements, die zusätzlich noch eigenes Markup oder Verhalten mitbringen können. Die hier vorgestellten Einheiten sind ohne weitere Anpassungen oder Kombinationen mit anderen Einheiten einsetzbar und bilden jeweils ein geschlossenes System. Aus diesen Einheiten lässt sich ohne weiteres Zutun eine Seite im Sinne des Styleguides erstellen.

Unter Samplepages werden spezielle Kombinationen von Modulen nach Verwendungszweck veranschaulicht. Außerdem gibt es zu jedem Vertical eine Seite, die alle Module beinhaltet. So kann sich ein Überblick über die möglichen Module und Verwendungsmöglichkeiten verschafft werden ohne jede einzelne Modulseite öffnen zu müssen.

Alle Einheiten können verwendet werden indem auf der entsprechenden Seite das HTML-Snippet herauskopiert und in den eigenen Code eingefügt wird. In den weiteren Kapiteln unter Global werden die notwendigen Schritte für die korrekte Darstellung der Einheiten und des Seitenlayouts erläutert.

The first steps in using the Berlin.de style guide are the same for every vertical, so it’s easy to switch quickly between verticals. However, there should be no need to switch between verticals if the selection was correct. The appearance may differ a lot between verticals in some cases, but the mark-up usually remains the same. A brief explanation of the basics is given below to help you understand the style guide and how it is structured.

A vertical is a variation of the style and especially influences the colors, font styles and arrangements of units. However, the mark-up basically remains the same; changes are made using CSS. In rare cases the behaviour of the units is also adapted, and there may also be slight adaptations in the JavaScript section as a result. There are also vertical-specific units that can or should only be used in specific verticals and are accordingly shown or hidden in the verticals.

The style guide is divided up into the sections Global, Elements, Modules and Sample Pages. The Global section contains the most highly differentiated units; the pages in this section should be read carefully first because they provide basic insights into the usage logic. This applies especially to the integration of the CSS and JS files, the header and the footer, but also options for fonts, colors and image sizes, which must be observed down to the last detail because these units form the basis for further use: all of the subsequent units assume that these basics have been taken into consideration; if not, serious display errors may later occur.

Basic units that can be used as desired to add new elements or give the web page a structure can be found under Elements. These units can be found in part in the modules, but can also be used independently of them as individual units or combinations of units. In many cases it is necessary to combine elements to create a harmonious overall picture. A coherent combination of element units should be used in the element with the class block if possible because the class block defines distances to the next unit.

Modules are ready-made combinations of elements which may additionally have their own mark-up or behaviour. Each of the units presented under ‘Modules’ forms a closed system and can be used without any further adaptation or combination with other units. A web page complying with the style guide can easily be generated from these units.

Special combinations of modules used for different purposes are presented under Sample Pages. Additionally, for each vertical there is a page that contains all modules. Thus, you have an overview of all possible modules and usage options and don’t need to open each module page individually.

All units can be used through copying of the HTML snippet on the corresponding page and pasting into the respective code. The necessary steps for correctly displaying the units and the web page layout are described in the further sections under Global.