Einleitung

Das SOLO Theme basiert auf unserem Contao Basis-Framework Nutshell und setzt auf einen SASS und gulp.js Workflow. Durch eine Vielzahl von SASS-Variablen lässt es sich sehr gut individualisieren. Wir haben versucht, so wenig Contao Templates wie möglich anzupassen, um den Einstieg in das Theme und Anpassungen bei Contao-Updates so gering wie möglich zu halten. Eine Übersicht über die Template-Anpassungen findest du bei Layout/Templates.

Aufbau des Themes

Das Theme besteht aus 2 Teilen:

  1. Demo-Ansicht
  2. Dokumentation (dieser Bereich)

Während dir die Demo ein Gefühl dafür geben soll, wie das Theme im Einsatz aussehen kann, beinhaltet die Dokumentation eine Darstellung aller verwendeten Elemente und Module sowie Erklärungen, während das Design eher eine untergeordnete Rolle spielt. Auf themes.erdmann-freunde.de/solo/ kannst du dir ebenfalls die Demo noch einmal ansehen.

Tipp:

Behalte den Startseitenpunkt Dokumentation, um ihn als Style Guide für das Theme und das Projekt zu nutzen.

Aufbau der Ordner- und Dateistruktur

Nach der vollständigen Installation sollte bei dir im Ordner files folgende Ordnerstruktur zu finden sein:

  • /demo - hier sind alle im Theme verwendeten Ressourcen (Bilder, Videos, Audio) enthalten
  • /nutshell - dies ist der Ordner unseres Contao Basis-Frameworks
  • /solo - hier findest du in src alle SCSS-, Bild- und JS-Dateien und im Ordner dist alle von gulp.js erstellten Dateien
  • tinymce.css - zusätzliche Klassen zur Verwendung im Texteditor, z.B. .text--attention
  • /tiny_templates - fertige Vorlagen mit der empfohlenen Syntax, z.B. für Zitate 

Der Ordner solo ist also dein Arbeitsverzeichnis (den du bei Bedarf auch umbenennen kannst). Für deine finalen Bilder, Videos etc. empfehle ich dir, einen neuen Ordner content o.ä. anzulegen. Dann kannst du den Ordner demo vor dem Launch auch löschen.

Im Ordner nutshell solltest du unter gar keinen Umständen arbeiten, da er über Composer aktualisiert wird und deine Änderungen dann verloren gehen können!

Hier eine vollständige Übersicht der Dateien und Ordner:

files
|-- solo (bzw. dein Projektname)
  |-- src
    |-- img
    |-- js
    |-- scss
      |-- _variables.scss
      |-- base
        |-- _grid.scss
        |-- _layout.scss
        |-- _page.scss
        |-- _shared.scss
        |-- _type.scss
      |-- components (eigene Komponenten wie z.B. _modal.scss kommen hier ebenfalls rein)
        |-- _accordion.scss
        |-- _comments.scss
        |-- _downloads.scss
        |-- _events.scss
        |-- _faq.scss
        |-- _forms.scss
        |-- _hero.scss
        |-- _links.scss
        |-- _logo.scss
        |-- _media.scss
        |-- _navs.scss
        |-- _news.scss
        |-- _newsletter.scss
        |-- _notes.scss
        |-- _search.scss
        |-- _slider.scss
        |-- _social.scss
        |-- _tables.scss
        |-- _testimonials.scss
      |-- mixins
        |-- _general.scss
        |-- _responsive.scss
      |-- trumps (Ordner für zusätzliche SCSS-Anweisungen, die nicht überschrieben werden sollen)
        |-- _documentation.scss
        |-- _helper.scss
        |-- _print.scss
      |-- default.scss