Repository navigation
Design Framework
Verantwortlicher: Patrick Puritscher
Dieses Dokument behandelt das Design Framework von GoHappy. Dazu gehört das Gridsystem, welches eine grundlegende Aufbaustruktur vorgibt und wichtig ist für die Positionierung und Skalierbarkeit der Applikation. Des Weiteren wird bezug auf die Helper-Klasse genommen, welche CSS-Klassen bietet, die die Entwicklung unterstützen und grundlegende Darstellungsoptionen sichert. Das Framework beinhaltet zudem verschiedene Elemente, welche flexibel eingesetzt werden können, ohne dass diese durch andere Container beeinflusst werden.
Aufbau
Das Gridsystem unterteilt den Viewport in 12 Spalten. Um das System zu nutzen muss der Elterncontainer die Klasse grid haben. Dieser Container stellt nun 100% dar, alle Kinderelemente richten die Spaltenbreite an dessen Gesamtbreite aus: Hat der Elterncontainer lediglich eine Breite 90% vom Viewport, sind die Kinderelemente mit der Klasse col-12 ebenfalls nur 90% des Viewports breit.
Visualisierung des Gridsystems von Simon Künnen
Das Gridsystem unterscheidet zwischen kleineren und größeren Geräten. Die kleineren Geräte beginnen ab einer Breite von < 350px. Für diese Breite existieren weitere Spalten: col-xs-2_5, col-xs-3, col-xs-3_5. Diese Klassen können zusätzlich zu den oben genannten hinzugefügt werden und greifen nur bei den kleineren Geräten.
Zum Einsatz kommt das Gridsystem unter Anderem bei der Titelleiste:
...
<div class="col-3 col-xs-2_5">
<label for="is__sidebar-open" class="i__hamburger e__btn">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</label>
</div>
...Die strikte Trennung von HTML und Style verbietet die Nutzung des style-Attributes. Folgende Helper-Klassen stehen zur Verfügung:
Werden Elemente mittels float:left bzw. float:right positioniert, muss dem Element diese zusätzliche Klasse hinzugefügt werden.
<div class="clearfix"></div>Hidden
Um Elemente korrekt zu verstecken wird diese Klasse benötigt. Dies bedeutet, dass dieses Element weder angezeigt wird, noch Einfluss auf andere Elemente nimmt.
<div class="hidden"></div>Um den Inhalt eines Elements bestimmt auszurichten, stehen diese Klassen zur Verfügung.
<div class="align-center"></div>
<div class="align-left"></div>
<div class="align-right"></div>Diese Klasse ergänzt das Element um einen Innenabstand.
<div class="padding-default"></div>Elements sind komplette Module, welche von keiner Klasse oder Containern abhängig sind. Siehe Icons, Navigationen, Listen, Barcard, Slider, Popup und weitere Elemente