Neue Erweiterung: SuperTheme

[Comolo]

Hallo zusammen,

ich wollte euch mal meine Erweiterung SuperTheme vorstellen. Damit könnt Ihr ganz einfach scss, js und coffeescript Dateien in ein Seitenlayout oder eine einzelne Seite einbinden.

Der große Vorteil gegenüber der schon vorhandenen Scss-Funktion ist, dass SuperTheme auch prüft ob Dateien verändert wurden, die per @import eingebunden sind,
und dann automatisch neu kompiliert. Das spart beim Layout entwickeln sehr viel Arbeit. Ebenso ist compass direkt mit dabei. Ein einfaches @import "compass"; reicht aus ;-)

SuperTheme ist kompatibel mit Contao 3 und Contao 4.
Die Erweiterung existiert eigentlich schon seit 2 Jahren und wird seit dem permanent weiterentwickelt und läuft absolut solide.

Probiert es doch mal aus
Ich freue mich über Feedback.

Link zu github: https://github.com/comolo/contao-supertheme

[Samuell]

Wie passend.
Dieses Verhalten des Cores stellt bei einem laufenden Projekt gerade die Frusttolleranz auf eine harte Probe.
Ich schau mir Deine Ext. mal an :-)

[swinde]

Hallo guten Abend,

ich habe heute die Erweiterung installiert, nach anfänglichen Hängern, funktioniert jetzt alles.
Und die Systemwartung ist endlich Geschichte.

Allerdings sind jetzt auch alle Hintergrundbild-Pfade falsch.

Vorher: files/themes/images/bild.jpg
Jetzt: assets/images/bild.jpg

Dort liegen aber meine Hg Bilder nicht.

Über Erleuchtung würde ich mich freuen!

[Spooky]

Wo liegen deine Bilder, wo liegt die SCSS Datei und was genau hast du dort hinein geschrieben?

[swinde]

Hallo Spooky

die scss-Dateien liegen unter /files/theme_ordner/themes/scss/theme-styles.min.scss.
Die Datei bindet alle Styles an. Ich habe mich dabei an die neue Contao Demo gehalten.

Die Bilder liegen unter /files/theme_ordner/themes/images und sind in der _variables.scss über
$path-css-to-img-folder: '../images';

eingebunden.

Die Hintergründe sind so eingebunden.

html{
  background-image: url('#{$path-css-to-img-folder}/html_bg.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-color: #BBD53B;
}

Vg Steffen Winde

[swinde]

Hier gibt es weitere Infos:

Mit dieser Pfadvariable:
$url_0: url(../images/btn-navbar.png);

background: $url_0 0 10px no-repeat;

werden die Bilder jetzt richtig eingebunden!

Vielen Dank, die Erweiterung erleichtert die Entwicklung sehr. Jetzt macht SCSS noch mehr Spaß.


Und als Dreingabe noch ein Converter um CSS Dateien in SCSS zu konvertieren. CSStoSCSS

[Samuell]

@swinde: Ich weis nicht wie diese Erweiterung das löst mit der Pfadanpassung.
Ggf. ist es als Schnelllösung für Dich sinnig den Pfad absolut zu setzen.
Also "/files/themes/...../file.jgp".

[Spooky]

Hab mir den Code nicht im Detail angesehen, aber wahrscheinlich sucht die Extension, genau so wie Contao oder Theme+, nach url(...) Angaben und konvertiert diese. Daher funktioniert auch deine ursprüngliche Variante nicht, weil du darin eine Variable verwendet hast. Die zweite Variante funktioniert, weil einfach die url(...) Angabe der Variable konvertiert wird.

Um das zu lösen sollte die Extension nach dem compile die Pfade anpassen, statt davor.

[Samuell]

Hier gibt es weitere Infos:
Mit dieser Pfadvariable:
$url_0: url(../images/btn-navbar.png);

Diese Version halte ich für nicht so gut, da Du dann ja für jedes Bild eine Variable erstellen müßtest.

[swinde]

Ich habe gerade erst gemerkt, dass seit heute Morgen, beide Varianten kompiliert werden.
Wer weis was da schief gelaufen ist.

Jetzt funktioniert alles, wie es soll!

[Comolo]

Also falls Ihr noch Ideen und Verbesserungsvorschläge habt, nur her damit

Bei Bildern löse ich das generell so, dass es eine Variable gibt mit dem Pfad zum Bilder-Ordner:

$image-path:"files/themes/example/img/";

und ein Bild wird dann zB. über:

background-image:url($image-path + "test.jpg");

eingebunden.


Vielleich noch ein Tipp wie wir bei Comolo unsere SCSS-Layouts aufbauen.

main.scss (wird per SuperTheme eingebunden)

@import "compass";
@import "compass/reset";

// Farben des Designs
$color-blue:"#...";
$color-green:"#...";

// Pfade
$image-path:"files/themes/example/img/";

// Imports
@import "_layout";
@import "_navigation";
@import "_mobile";
// ...

und zB. in die Dateien _layout.scss, _navigation.scss usw. wird dann der Style-Code eingepflegt.
Die Variablen aus main stehen hier dann auch automatisch zur Verfügung.

Ich hoffe, das hilft dem ein oder anderen weiter!

[Samuell]

@Comolo:
Also fast genau so wie in der Demo.
Unterschied in der Demo ist, dass es für die Variablen eine extra Datei gibt und Sie nicht in die "main.scss" geschrieben werden :-)

Allerdings muss ich an dieser Stelle auch ergänzen, dass ich die Aufteilung der scss-Files auch anders löse, als Sie noch in der Demo stehen.
Habe angefangen dass stärker zu modularisieren:

@import '_variables';

@import '_mixins.scss';

// HELPER
@import 'basics/_normalize.min';
@import 'basics/_contao-helper';

// PARTIALS
@import '_grid';
@import '_fonts';
@import '_layout';
@import '_forms';
@import 'contents/_content-elements';
@import 'contents/_html-basic';
@import 'navigation/_nav-main';
@import 'navigation/_nav-meta';
@import '/modules/_events';
@import '/modules/_news';

Letztenendes ist der Aufbau aber ein Stück weit Geschmackssache.
Ich mag keine ewig langen Dateien, erstell dafür mehrere davon.
Jemand anderes mag nicht so viele Dateien und macht diese dafür länger.

[swinde]

Moin Samuell,

ich binde auch alle scss-files über eine Datei ein. Wird bei dir eine Änderung in dieser Datei übernommen?
Wenn ich in dieser Datei eine Änderung vornehme, muss ich hinterher die Systemwartung bemühen.

Vg Steffen

[Samuell]

@Swinde:
Bei mir ist das auch so.
Alternativ kannst Du ohne die oben genannte Erweiterung noch den Debug-Mode einschalten.
Solange Du im BE angemeldet bist, lädt er dann auch direkt den neuen Code.

Da ich gern den "autoprefixer" nutze und mit PHPStorm arbeite, kompilier ich allerdings mein SCSS immer lokal und lass es nach jeder Änderung automatisch hochladen.
So hab ich auch den gleichen Workflow wenn ich mal nicht mit Contao arbeite.

[Yangdoo]

Hallo,

hast Du geplant die Erweiterung über den neuen Contao Manager zur vefügung zu stellen?
Würde mich sehr freuen :-)

Grüße Marco

[Spooky]

Du meinst wohl für Contao 4 . Das hat ja nichts direkt mit dem Contao Manager zu tun.

[Yangdoo]

Du hast natürlich Recht, ich meinte Contao 4.4.

[mlweb]

Im ersten Beitrag steht:

SuperTheme ist kompatibel mit Contao 3 und Contao 4.

also vielleicht einfach mal Testen und Feedback geben

[Comolo]

Ja ist geplant
Es gibt auch bereits ein Github-Ticket dazu. (https://github.com/comolo/contao-supertheme/issues/16)

[Yangdoo]

Hallo,

ich habe die Erweiterung jetzt in den system/modules Ordner kopiert und so wie es aussieht funktioniert sie auch.

Zwei Sachen sind mir aufgefallen, die auch mit Contao 3.5 schon nicht funktionierten.

1. Die Reihenfolge der Javascriptdateien die ich im Backend eingestellt habe stimmt nicht mit der kompilierten Datei überein.

Dies ist die Reihenfolge, wie ich Sie im Backend eingestellt habe:

files/html/js/aos.js
files/html/js/jquery.easing.1.3.js
files/html/js/jquery.fancybox.min.js
files/html/js/animsition.min.js
files/html/js/custom.js

In der kompilierten Datei ist die Reihenfolge folgende:

files/html/js/animsition.min.js
files/html/js/aos.js
files/html/js/custom.js
files/html/js/jquery.easing.1.3.js
files/html/js/jquery.fancybox.min.js

Sieht so aus, als wenn die Reihenfolge im Backend ignoriert wird und anstatt dessen alphabetisch sortiert wird.

2. Ist es möglich die zusammengefügte Javascriptdatei auch gleich zu minifizieren?

Grüße Marco

[Comolo]

Hallo,
1. Die Reihenfolge der Javascriptdateien die ich im Backend eingestellt habe stimmt nicht mit der kompilierten Datei überein.

Dann erstell mal dazu ein Ticket auf Github.

Zu deiner zweiten Frage: Du kannst in den Einstellungen minify einschalten, allerdings erst ab der version für Contao 4.

[Comolo]

Habe soeben die Version 3.2.0 released. Contao 4.4 und die Contao Managed Edition werden nun unterstützt.

[Yangdoo]

Hi,

vielen Dank für Dein schnelles Update.

Ich habe eben versucht das Modul über den Contao Manager zu installieren. Leider findet der Manager das Modul nicht.

Ich habe es mit
- comolo/contao-supertheme
- contao-supertheme
- comolo
- supertheme

versucht (Contao 4 Bundles und Contao 3 Erweiterungen).
Was mache ich falsch?

Grüße Marco

[Yangdoo]

Hallo Comolo,

kannst Du mir bitte noch sagen, wie ich Deine Erweiterung im Contao Manager finde?

Vielen Dank
Grüße MArco

[Spooky]

Hallo Comolo,

kannst Du mir bitte noch sagen, wie ich Deine Erweiterung im Contao Manager finde?

Vielen Dank
Grüße MArco

https://packagist.org/packages/comolo/contao-supertheme

[Yangdoo]

Hallo Spooky,

das habe ich es auch gefunden. Wie kann ich das Paket jetzt über den Contao Manager installieren? Wenn ich nach der Erweiterung suche, findet der Manager nicht.

Grüße Marco

[xchs]

Das liegt wahrscheinlich daran, dass die Erweiterung derzeit als symfony-bundle gekennzeichnet ist.

[Yangdoo]

Da ich mich gerade mit Contao 4.4 das erste mal auseinander setzte, weiß ich nicht genau was das bedeutet.
Kann ich die Erweiterung dann nur über den Composer direkt installieren?

[xchs]

@Comolo müsste in der composer.json anstelle von symfony-bundle den Typ auf contao-module ändern: https://github.com/comolo/contao-sup...mposer.json#L3

Du könntest dazu ja ein Ticket erstellen: https://github.com/comolo/contao-supertheme/issues

[Yangdoo]

Hi,

vielen Dank für Eure Hilfe. Ich habe bei Github ein Ticket erstellt.

Grüße Marco

[Comolo]

Hey zusammen,
habe es gerade geändert. Die neueste Version ist nun 3.2.1

Gruß Hendrik

[Yangdoo]

Hi,

super, vielen Dank. Jetzt klappt die Installation ohne Probleme :-)

Grüße Marco

[Comolo]

Prima!

Ich würde gerne noch auf zwei Features aufmerksam machen:

- Ihr könnt in den Einstellungen von Contao im Bereich "SuperTheme Einstellungen" nun den "Minifier" aktivieren. Dadurch werden die Output CSS und JS Dateien komprimiert, was sich positiv auf die Ladegeschwindigkeit auswirkt.

- Außerdem könnt Ihr den SuperTheme Produktiv-Modus aktivieren - dieser verbessert die PHP-Performance von SuperTheme, da die SCSS-Dateien nicht mehr bei jedem Aufruf auf Änderungen geprüft werden.


Bildschirmfoto 2017-08-02 um 12.57.28.png

[SiW]

Moin,
ich hab die Erweiterung gerade ausprobiert, funktioniert unter Contao 4.4.2 super.

Ist es möglich, externe CSS Dateien mit in den Minify Prozess einzubinden, wie bei JS?

[Comolo]

Moin,
Ist es möglich, externe CSS Dateien mit in den Minify Prozess einzubinden, wie bei JS?

Aktuell nicht. Falls du das Feature benötigst, gerne ein Ticket auf github aufmachen.

[cyklop]

Super Erweiterung, besteht hier auch die Möglichkeit das Plugins ihre eigenen js Dateien hier irgendwie mit einfließen lassen? Aktuell werden diese ja per $GLOBALS['TL_JAVASCRIPT'] immer in den head geschmissen? Kann hier vielleicht mittels des SuperTheme Plugins dies eingebunden werden?

[Comolo]

Hi, danke für dein Feedback Du kannst gerne dazu ein Feature auf Github anlegen, dann schaue ich mir das bei der nächsten Entwicklungsrunde mal an

Im Moment steht gerade noch die Idee im Raum, etwas in Richtung Hot-Reload einzubauen, d.h. wenn man beim Entwickeln etwas an den Scss-Dateien ändert, wird es automatisch (ohne Neuladen) im Browser angezeigt. Wäre das Feature für die Community interessant?