Der Kern der Struktur ist das Verzeichnis Frontend. Dies ist wiederum unterteilt in bisher unbekannte Unterverzeichnisse, die im Folgenden genauer erklärt wird.
Der Kerngedanke bei der von Threeme angebotenen Organisation ist, den Fokus möglichst zu konzentrieren und trotz etlicher Verzeichnisse und Dateien, nicht ständig springen zu müssen und somit den Überblick zu wahren.
Aus diesem Grund versucht Threeme SASS sozusagen nach dem Verwendungszweck zu klassifizieren und einzuordnen und orientiert sich dabei am Atomic Design:
Components sind wiederkehrende SASS patterns, die in der gesamten Website vorkommen können und Atomen, Moleküle und ganze Organismen entsprechen.
Beinhaltet nur Variablen und Mixins, die nicht unmittelbar zu CSS kompiliert werden. Da Threeme Bibliotheken von Drittanbietern nicht verändern möchte, allerdings auf deren Variablen angewiesen ist, wird hier eine Kopie der Bibliothek-Variablen abgelegt. Threeme eigene Mixins und Variablen liegen hier.
Sections stellen das Gegenteil zu Components dar: Diese SASS kommen nur einmalig in der Website vor und bilden somit den gröberen Rahmen, indem sie beispielsweise den Header oder Footer der Site beschreiben.
Threeme verwendet unter anderen das CSS-Framework Bootstrap und liefert die SASS-Variante mit. SASS von Drittanbietern wird im Verzeichnis Vendor geführt und bleibt in der Regel unverändert. Es erhält ein eigenes Unterverzeichnis und eine dazugehörige SASS-Includes, die alle notwendigen Komponenten der Bibliothek beinhaltet (Abb.2).
Da viele Frameworks und Bibliotheken sehr gut über Variablen gesteuert werden können, ist die Kombination aus einer individuellen SASS-Include und den kopierten Variablen sehr zielgerichtet. Zudem bieten die unveränderten Source auch so manches Mal eine hilfreiche Referenz.
Adaptionen und individuelle Anpassungen der Komponenten erfolgen über die zugehörigen Variablen und ggf. über eine SASS im Verzeichnis Frontend.
Neben Bootstrap ist bereits Font Awesome, der HTML5-Player Plyr und die Lightbox Fancybox mit an Bord.
Drittanbieter-Erweiterungen legen ihr SASS analog zu den Fluid-Templates im Verzeichnis Extensions ab. Threeme liefert eine angepasste custom.scss je nach Erweiterung mit (Abb.3). Darüber hinaus kannst du selbstverständlich auch weitere, differenzierte SASS für deine Extensions anlegen.
Anhand der Extension Mask kannst du erkennen, dass es nicht immer möglich ist, haarscharf die Trennung nach Verwendungszweck und oder Extension aufrecht zu erhalten:
Mask stellt vorhandene oder erweiterte Inhaltselemente bereit, beispielsweise ein Akkordeon. Lege ich nun ein Akkordeon in Mask an und ordne das SASS entsprechend zu, wird der Aufbau aber auch in anderen Teilen der Website – wie beispielsweise einer Ansicht des News-Systems – verwendet, so ist meine Zuordnung der Akkordeon-SASS zu Mask nicht ganz richtig. Besser, die SASS läge in Components, ist allgemeingültig und kann bequem von mehreren Seiten verwendet werden.
Egal für welchen Weg der SASS-Kompilierung du dich entscheidest, die generierten CSS werden nach /Resources/Public/Css geschrieben und von hier in die Website eingebunden.
Wie in Abb.4 ersichtlich ist, werden nur drei CSS-Dateien erzeugt, die anhand ihrer Benennung klar den Einsatzzweck verraten. Die Styles für RTE und Print stellen im Grunde abgespeckte Varianten der Website-Styles dar.
Den Styles gemein ist, dass sie ein Subset aus den möglichen SASS-Partials inkludieren, die in den vorangegangenen Abschnitten besprochen worden sind. Für den schlanken Fuß der Website solltest du also – analog zum Vendor-SASS – überprüfen, welche Includes du wirklich benötigst.