Design Coding Standards

← zurück zum Design Wiki

Verantwortlicher: Patrick Puritscher

Im Dokument Coding-Standards werden grundsätzliche Anforderungen an die Programmierweise mit den verschiedenen Sprachen gestellt. Des Weiteren wird die Ordnerstruktur dargelegt, in welcher die verschiedenen Dateien eingebettet werden.

Aufbau

• Ordnerstruktur
• HTML
• CSS
• Verschiedenes

---

Ordnerstruktur

Die Ordnerstruktur des gesamten Templates gliedert sich folgendermaßen:

GoHappy-Template
├── css
│   ├── elements.css
│   ├── fonts.css
│   ├── grid.css
│   ├── helper.css
│   ├── normalize.css
│   └── style.css
├── fonts
│   ├── gohappy.eot
│   ├── gohappy.svg
│   ├── gohappy.ttf
│   └── gohappy.woff
├── images
├── js
│   ├── main.js
│   └── demo.js
├── lib
│   ├── ion-rangeslider
│   │   ├── css
│   │   │   ├── ion.rangeslider.css
│   │   │   └── ion.rangeslider.skinhtml5.css
│   │   └── js
│   │   │   └── ion.rangeslider.min.js
│   ├── fastclick.js
│   └── jquery-1.11.1.min.js
└── index.html

---

HTML

Formatierung

• Jedes Element bekommt eine eigene Zeile. Diese wird mit einem Tab eingerückt == 4 Leerzeichen

Tags und Attribute

• Tags und deren Attribute werden klein geschrieben
• Attribute werden über doppelte Anführungszeichen definiert

Meta-Elemente für Web App

Viewport Der Viewport sorgt für die richtige Darstellung und die korrekte Skalierung beim ersten Aufruf der Website.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">?

Verstecken von Browser Elementen Um ein natives App Feeling zu erzeugen können Browser Elemente wie die URL Suchleiste und Menüs ausgeblendet werden. Dieser Modus wird als Standalone Mode bezeichnet. Außerdem kann so auch die Farbe der Statusleiste verändert werden.

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Web App Icons Speichert man eine Website auf dem Startbildschirm seines mobilen Gerätes, so muss ein Icon angezeigt werden. Dieses wird für Android, iOS und Windows unterschiedlich definiert.

Android:

<link rel="shortcut icon" href="apple-touch-icon-196x196.png" sizes="196x196">

iOS:

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png">

Windows:

<meta name="msapplication-TileImage" content="apple-touch-icon-tile.png">
<meta name="msapplication-TileColor" content="#3f51b5">

Start Up Image Das Start Up Bild kann aktuell nur auf iOS Geräten verwendet werden und wird beim ersten Laden der Webseite kurz angezeigt.

<link rel="apple-touch-startup-image"  href="apple-touch-startup-image-640x1096.png">

---

CSS

Dateistruktur

Als Basis dient das GoHappy-Framework. Alle Dateien, welche das Framework betreffen müssen den dortigen Dateien zugeordnet werden. Alle individuellen Angaben werden in der style.css definiert.

Beispiel
Das Icon i__hamburger wird in der Frameworkdatei elements.css definiert. Da dieses Icon bei geöffneter Sidebar weitere, konkretere Definitionen benötigt, stehen diese in der style.css.

Namenskonventionen

Die Elemente kennzeichnen sich durch bestimmte Präfixes:

• Allgemeine Elemente, wie Listen oder Navigationen: .e__[barcard]
• CSS-Icons: .i__[star]
• Icons mit Font: .i-f__[gohappy-logo]

Verschiedene Zustände werden mit dem Präfix .is__[sidebar-open] deklariert.

Formatierung

• Angaben innerhalb einer Klasse, werden mit einem Tab eingerückt == 4 Leerzeichen
• Auf jeden : folgt zunächst ein Leerzeichen
• Eine { wird über ein Leerzeichen angeschlossen
• Die schließende } steht in einer neuen Zeile
• Jeder Selektor kommt in eine eigene Zeile
• Jede Eigenschaft wird mit einem ; abgeschlossen
• Shorthands sollten vermieden werden

Beispiele

/* Einzelne Selektoren bekommen eine eigene Zeile */
.e__list-big-element-frontside-head,
.e__list-big-element-frontside-body,
.e__list-big-element-frontside-footer {
    float: left;
    width: 100%;
}

/* Vermeidung von Shorthands */
.e__barcard {
    background: #452e2e;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}

---

Verschiedenes

Einsatz von JavaScript

Der Einsatz von JavaScript beschränkt sich auf das nötigste, dies ist Aufgabe des Frontend-Teams. Animationen sollten, wenn möglich, mithilfe von transitions umgesetzt werden. Generell ist dieser Regel jedoch ein sauberes Markup vorzuziehen. Eine Grenze stellt hier die Sidebar dar: Der Status der Sidebar wird über eine verstecke Checkbox mit Label geregelt.

...
<input type="checkbox" id="is__sidebar-open" class="hidden" aria-hidden="true"/>
...
<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>
...

Das Problem erschließt sich aus der style.css. Wird ein Teil des Markups verändert, kann die Funktionalität nicht mehr sichergestellt werden - Solche Situation sind zu vermeiden!

#is__sidebar-open[type=checkbox]:checked + #main #sidebar {
    z-index: 0;
}
#is__sidebar-open[type=checkbox]:checked + #main > #theatre,
#is__sidebar-open[type=checkbox]:checked + #main > #theatre-head {
    -webkit-transform: translate3d(80%, 0px, 0);
    transform: translate3d(80%, 0px, 0);
}

#is__sidebar-open[type=checkbox]:checked + #main #theatre-head-topbar .i__hamburger > .icon-bar:nth-last-of-type(2) {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
#is__sidebar-open[type=checkbox]:checked + #main #theatre-head-topbar .i__hamburger > .icon-bar:first-of-type,
#is__sidebar-open[type=checkbox]:checked + #main #theatre-head-topbar .i__hamburger > .icon-bar:last-of-type {
    width: 20px;
    margin-left: -2px;
}
#is__sidebar-open[type=checkbox]:checked + #main #theatre-head-topbar .i__hamburger > .icon-bar:first-of-type {
    -webkit-transform: rotate(140deg);
    transform: rotate(140deg);
    margin-bottom: -1px;
}
#is__sidebar-open[type=checkbox]:checked + #main #theatre-head-topbar .i__hamburger > .icon-bar:last-of-type {
    -webkit-transform: rotate(220deg);
    transform: rotate(220deg);
    margin-top: -1px;
}

Generell sollte dies über Klassen mit dem Präfix .is__ geregelt werden, welche via JavaScript gesetzt wird. So zum Beispiel das PopUp:

.e__popup-overlay {
    background: rgba(40,41,41,.6);
    width: 100%;
    height: 100%;
    z-index:999;
    position: absolute;
    top:-100%;
}
.e__popup-overlay.is__open {
    top:0;
}
.e__popup-overlay.is__open .e__popup-window {
    top:40%;
    transition: top 1s ease-out;
}