Referenzen

Die in dieser Demo verwendeten CSS- und Javascript-Dateien liegen jeweils in eigenen Unterordnern innerhalb des Ordners resources. Dies ist aber kein Muss, sondern kann auch anders organisiert werden.

CSS

In der Datei plugins.min.scss werden folgende Scripts zusammengefasst, minifiziert und dann in einer neuen Datei plugins.min.css gespeichert:

• bootstrap.css
• fonts.css
• jquery.bxslider.css
• prettify.css
• pe-icon-7-stroke.css

Das für diese Demo individuelle CSS wird in der Datei website.scss verwaltet. Da die Demo verschiedene Farbschema bereithält, das über ein Kategorie-Metafeld zugwiesen werden kann, gibt es für jede Farbe eine weitere scss-Datei, die Primärfarbe definiert und mittels der website.scss dann die einzelnen CSS-Dateien kompiliert:

            $primary: #c5a47e;
@import "website.scss";

Eigene CSS-Änderungen sollten also am besten in der website.scss durchgeführt; weitere Farbvarianten lassen sich leicht erstellen, indem man eine der Farb-scss-Dateien kopiert.

Javascript

Auch die Javascripte werden in eine Datei zusammengefasst und minifiziert. In plugins.js werden folgende JS-Datei eingebunden und in die Datei plugins.min.js geschrieben:

• bootstrap.js
• gsdk-bootstrapswitch.js
• jquery.bxslider.js
• jquery.waypoints.min.js
• modernizr.js
• prettify.js

Die eigenen Javascripte für diese Demo finden sich in demo.js – diese wurde nicht mit kompliliert, weil man so einzelne Aufrufe leichter analysieren und weitere ergänzen kann.

Hinweis: Bei der Erstellung der Demo wurde zum Zusammenfassen, Minifizieren und Kompilieren die App Codekit verwendet, es kann aber natürlich jeder beliebige andere SCSS-Compiler genutzt werden.