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

Namenskonventionen

Die Elemente kennzeichnen sich durch bestimmte Präfixes:

• Allgemeine Elemente, wie Listen oder Navigationen: .e__
• CSS-Icons: .i__
• Icons mit Font: .i-f__

Spacing

• 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

.e__list-big-element-frontside-head,
.e__list-big-element-frontside-body,
.e__list-big-element-frontside-footer {
    float: left;
    width: 100%;
}

Formatierung