Installation

Die Nutshell euf_nutshell ist eine Contao-Erweiterung und kann über Composer bzw. den Contao Manager installiert werden.

Es gibt aktuell 2 Pakete aus denen du auswählen kannst. Das Paket euf_nutshell enthält nur die Dateien, die unmittelbar zur Nutshell gehören. Das Paket euf_nutshell_kit enthält zusätzlich ein Starterkit mit weiteren Dateien, um die Nutshell zu betreiben. Wenn du das erste Mal mit der Nutshell arbeitest, empfehle ich dir das Starterkit zu installieren.

# Installationsmöglichkeiten:

1. Über Composer

Folgenden Befehl ausführen:

composer create-project erdmannfreunde/euf_nutshell_kit [path] [version]

also zum Beispiel:

composer create-project erdmannfreunde/euf_nutshell_kit contao 4.4

oder

composer create-project erdmannfreunde/euf_nutshell_kit contao 4.8

2. Manuelle Installation

Alternativ kannst du dir auch die beiden Erweiterungen als Zip-Dateien von Github herunterladen und im Ordner /files ablegen. Allerdings profitierst du dann nicht von den Updates, die wir ab und an veröffentlichen.

euf_nutshell auf github

euf_nutshell_kit auf github

Nach der Installation befinden sich im Ordner files zwei Ordner: nutshell und starterkit.

Die Idee der Nutshell ist, dass eine komplette Kopie aller in der Nutshell verwendeten Dateien in dem Projekt-/Theme-Ordner vorliegt und die jeweiligen Dateien per @import referenziert werden. Im Starterkit sind diese Referenzen bereits angelegt. Du kannst den Ordner umbenennen, z.B. in theme oder projektname oder direkt darin arbeiten. Er wird von Composer / dem Contao Manager nicht überschrieben.

# 2. Ordnerstruktur im Überblick

files
|-- theme (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
        |-- _links.scss
        |-- _media.scss
        |-- _navs.scss
        |-- _news.scss
        |-- _newsletter.scss
        |-- _search.scss
        |-- _slider.scss
        |-- _tables.scss
      |-- mixins
        |-- _general.scss
        |-- _responsive.scss
      |-- trumps (Ordner für eigene, zusätzliche SCSS-Anweisungen) 
      |-- default.scss

Jede Datei muss dann noch ihr Pendant aus der Nutshell per @import referenzieren, siehe auch Generelle Datei-Struktur.