CSS-Framework LSCSS
Die Themes von Merconis basieren auf dem CSS-Framework LSCSS, welches bei einer normalen Merconis-Installation automatisch mitinstalliert wird.
LSCSS ist ein SASS/SCSS-Framework, dessen Ziel es ist, den allgemeinen Arbeitsablauf zu standardisieren, der typischerweise in LS-Projekte anfällt. Daher kümmert sich LSCSS um die Integration von Bootstrap und Fontawesome und fungiert als zentraler Dreh- und Angelpunkt für alle Stylingzwecke, auf den sich andere LS-Komponenten (z.B. Merconis, LSJS etc.) stützen können.
Nach der Installation von LSCSS befinden sich die Framework-Dateien im Ordner assets/lscss. Aus Gründen der Updatesicherheit sollten Sie die Dateien in assets/lscss nicht verändern.
Um das bestehende Theme zu verändern bzw. anzupassen passen Sie nur die Dateien im Ordner files/merconisfiles/themes/theme10/lscss an.
Hierbei ist die Datei lscss-project.scss die zentrale Projekt-Datei, die alle Komponenten lädt die für das installierte Merconis-Theme notwendig sind.
lscss-project.scss
Nachfolgend eine kurze Übersicht der einzelnen scss-Dateien die importiert werden.
_variables.scss
Hier überschreiben Sie vorhandene Variablen der einzelnen Frameworks oder können eigene definieren. Die _variables.scss sollte immer als erstes geladen werden, um die Default-Einstellungen von LSCSS und Bootstrap zu überschreiben.
../../../../../assets/lscss/lscss.scss
Lädt alle Komponenten vom LSCSS-Framework und abhängige Frameworks.
lscss-icons-custom/style.scss
Bindet ein angepasstes Iconset ein, welches z.B. mit IcoMoon App erweitert werden kann. sollten Sie ein weiteres Iconset benötigen, dann binden Sie dieses bitte zusätzlich ein und ersetzen nicht das vorhandene.
_mixins.scss
Zum Erstellen von eigenen Templates, Presets oder auch Pseudofunktionen.
components/_components.scss
Bestimmte Komponenten im Merconis-Theme benötigen diese Einbindung. Diese werden aber Schritt für Schritt LS-Content-Elemente (kurz LSCE) ersetzt.
lsce/_lsce.scss
Stylings der einzelnen LSCEs welche mit dem Addon LSCE installiert werden. Die Datei _lsce.scss wiederum importiert die einzelnen Stylings für die entsprechenden LS-Custom-Elements.
_layout.scss
Das Styling von den Grundlayouts Ohne Sidebar (FullWith), Sidebar links, Sidebar rechts & Sidebar links und rechts.
_fonts.scss
Für die Einbindung der benötigten Schriftarten. Diese kann beliebig um weitere Schriftarten erweitert werden.
_breadcrumb.scss
Styling für die Brotkrumennavigation.
_forms.scss
Styling für die Formular-Eingabefelder. Diese ist aber nur ergänzend zum Grundstyling welches aus dem LSCSS-Framwork kommt.
_registration.scss
Styling für die Registrierungsformulare/-modul.
_login.scss
Styling für das Loginformular/-modul.
_search.scss
Styling der Off-Canvas Box für die Webseitensuche.
_newsletter.scss
Styling für das Anmelde- und Abmelde-Formular.
_header.scss
Styling für die Hauptnavigation, Logo und Shopnavigation (Warenkorb, Merkliste, etc.)
_language-selector.scss
Styling der Off-Canvas Box für die Sprachenauswahl.
_video.scss
CSS für Responsive Videos. Dem Inhaltselement Video, Youtube oder Vimeo muss die Klasse .ls_videoContainer vergeben werden.
_back-to-top.scss
Styling für den Back to top Button
../../../../../assets/lsjs/core/styles_core.scss
Diese Datei lädt wiederum die einzelnen notwendigen Stylings der JavaScript-Komponenten, damit diese sich richtig verhalten.
../../../../../vendor/leadingsystems/contao-merconis/src/Resources/contao/lscss/_merconis.scss
Diese Datei lädt wiederum die einzelnen notwendigen Stylings der Shop-Komponenten, damit diese sich richtig verhalten.