Design Coding Standards

Coding Standards

Verschiedenes

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;
}

Ordnerstruktur

Die Ordnerstruktur des gesamten Templates gliedert sich folgendermaßen:

GoHappy
├── 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

Anführungszeichen

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;
}