Discussion

Was bisher geschah

Referenzen

*

Einige Stichproben unserer Arbeit

Combine und Minify

CSS und JS

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.

Beispiel-Projekte

*

Wir lieben die Abwechslung.

Talking Tables

*

Branding für eine Möbelschreinerei

...

Dies ist nur ein sinnloser Dummy-Text … wobei, nicht ganz: Man könnte in der Projekt-Detailansicht, in der Du gerade liest, noch leicht weitere Optionen ergänzen, um z.B. Text in mehreren Spalten zu setzen, die Spaltenbreiten von Bild und Text zu modifizieren, das derzeit eine Bild zu einer Bildergalerie zu erweitern, und vieles mehr.

Wie wär’s?

Arctic Avalanche

*

Produktkatalog für ein Mode-Label

...

Dies ist nur ein sinnloser Dummy-Text … wobei, nicht ganz: Man könnte in der Projekt-Detailansicht, in der Du gerade liest, noch leicht weitere Optionen ergänzen, um z.B. Text in mehreren Spalten zu setzen, die Spaltenbreiten von Bild und Text zu modifizieren, das derzeit eine Bild zu einer Bildergalerie zu erweitern, und vieles mehr.

Wie wär’s?

The Flying Rabbits

*

Website für eine Rock-Band

...

Dies ist nur ein sinnloser Dummy-Text … wobei, nicht ganz: Man könnte in der Projekt-Detailansicht, in der Du gerade liest, noch leicht weitere Optionen ergänzen, um z.B. Text in mehreren Spalten zu setzen, die Spaltenbreiten von Bild und Text zu modifizieren, das derzeit eine Bild zu einer Bildergalerie zu erweitern, und vieles mehr.

Wie wär’s?

Cozy Retreat

*

Innenraum-Gestaltung einer Blockhütte

...

Dies ist nur ein sinnloser Dummy-Text … wobei, nicht ganz: Man könnte in der Projekt-Detailansicht, in der Du gerade liest, noch leicht weitere Optionen ergänzen, um z.B. Text in mehreren Spalten zu setzen, die Spaltenbreiten von Bild und Text zu modifizieren, das derzeit eine Bild zu einer Bildergalerie zu erweitern, und vieles mehr.

Wie wär’s?

Neugierig geworden?

Dann schreib uns …

… eine Mail!