Design Coding Standards

Coding Standards

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

Tags und Attribute

Anführungszeichen

Zeilen

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__
• CSS-Icons: .i__
• Icons mit Font: .i-f__

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