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. Als Schnittstelle kommen CSS-Klassen zum Einsatz. Damit ist es möglich, die gesamte Darstellung via CSS zu kontrollieren. Beispielsweise kann so festgelegt werden, wie die Sidebar angezeigt werden soll, ohne nachträgliche Anpassung der JavaScript-Funktion. Auch können Animation problemlos via transitions durchgeführt werden.

Als Beispiel dient die bereits angesprochene Sidebar: Via JavaScript wird dem Container #main die Klasse .sidebar-is-open hinzugefügt und damit die Darstellung der Kinderelemente beeinflusst.

...
<!-- .sidebar-is-open -->
<div id="main" class="clearfix">
...
 <span id="trigger-sidebar" class="i__hamburger e__btn">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
 </span>
...
</div>

Die Auswirkungen auf die betreffenden Elemente werden anschließend in der style.css definiert.

/**
 * Sidebar open if checkbox is set
 */
#main.sidebar-is-open #sidebar {
    z-index: 0;
}
#main.sidebar-is-open > #theatre,
#main.sidebar-is-open > #theatre-head {
    -webkit-transform: translate3d(80%, 0px, 0);
    transform: translate3d(80%, 0px, 0);
}
#main.sidebar-is-open #theatre-head-topbar .i__hamburger > .icon-bar:nth-last-of-type(2) {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
#main.sidebar-is-open #theatre-head-topbar .i__hamburger > .icon-bar:first-of-type,
#main.sidebar-is-open #theatre-head-topbar .i__hamburger > .icon-bar:last-of-type {
    width: 20px;
    margin-left: -2px;
}
#main.sidebar-is-open #theatre-head-topbar .i__hamburger > .icon-bar:first-of-type {
    -webkit-transform: rotate(140deg);
    transform: rotate(140deg);
    margin-bottom: -1px;
}
#main.sidebar-is-open #theatre-head-topbar .i__hamburger > .icon-bar:last-of-type {
    -webkit-transform: rotate(220deg);
    transform: rotate(220deg);
    margin-

Elemente welche zur beschrieben Manipulation gedacht sind, werden über eine Klasse mit dem Präfix .is__ ergänzt. So zum Beispiel die Anzeige des Popups:

...
.e__overlay.is__open .e__overlay-window {
    top: 40%;
    transition: top 1s ease-out;
}
...