Welche CSS-Frameworks nutzt ihr noch so mit Contao

[chrischnian]

Hallo Leute

so mal eine ganz andere Frage:
Bis jetzt hatte ich immer Contao-Bootstrap im Einsatz, aber derzeit habe ich das Geld nicht um mich dort die Version für Contao5 zu holen.

Ich habe nun einige Plugins getestet aber keines kommt meinen Ansprüchen entgegen.

Der ThemeManager sah ganz gut aus aber hier habe ich gerade so meine Probleme wie ich zb die Linke Spalte positioniere wenn dort Module liegen.

Daher meine Frage welche CSS Frameworks nutzt ihr noch so um nicht alles komplett selbst machen zu wollen. Ich habe auch keine Probleme meine Templates anzupassen.

Bin mal auf eure Antworten gespannt.

[zonky]

häufig Bootstrap, früher auch mal Foundation und Groundwork

[lucina]

Bootstrap, Tailwind & alles andere was für ein Projekt geeignet ist. Manchmal auch nur das entsprechende Grid, weil das wirklich Zeit spart.

[derRenner]

vorwiegend Bootstrap - ich binde das in der Regel nativ ein und passe dann, sofern notwendig, templates dazu an.

[zoglo]

Wenn man sich die Templates anpassen kann und auch die Zeit hat, dann könntest du jedes Framework nutzen.

• Ich finde BeerCSS sehr interessant: https://www.beercss.com/
• Tailwind ist overhead, da es eher für JavaScript-Apps gedacht ist, wo es für den Zweck kompiliert wird.
• Bootstrap 5.3 ist super, musst du dir natürlich alles anpassen, wie bei den Frameworks zuvor
• Bulma ist auch ein guter StandAlone-Mitstreiter wie Bootstrap: https://bulma.io/

Ansonsten gibt es eine ewig lange Liste von Frameworks und jedes hat seine Vor- und Nachteile und Einsatzzwecke
https://github.com/troxler/awesome-css-frameworks

[zoglo]

Der ThemeManager sah ganz gut aus aber hier habe ich gerade so meine Probleme wie ich zb die Linke Spalte positioniere wenn dort Module liegen.

Sofern du ein mehrspaltiges Layout nutzt, musst du "Hauptspalte" und "Linke / Rechte" Spalte nutzen.
In der Theme-Konfiguration ist der Standard so eingestellt, dass die Linke/Rechte Spalte erst beim Bruchpunkt "S" (768px Breite) nach links / rechts wandern (Wichtig für Responsives Design ) - Kannst du dir natürlich alles einstellen.

Wenn du mehrere Module in der linken Spalte einbinden möchtest, wählst du im Layout einfach mehrere aus und weist diese der linken Spalte zu.
Hauptspalte Oben und Hauptspalte Unten gehen immer über die volle Breite.

Nur für "Hauptspalte" und "Linke Spalte/ Rechte Spalte" gibt es im Layout eine StyleManager-Einstellung um die Breite zu begrenzen, das wäre das Component > Article-Spacing (Left-Right-Spacing).

[Franko]

Call me »Old Fashioned«,
aber ich nutze "direkt" gar keine CSS frameworks -
lerne bzw. nutze aber gerne einige snippets deren CSS features :-)

[mlweb]

Ich gehöre auch der Fraktion "eigenes CSS" mit gelegentlichen Anregungen aus verschiedenen Frameworks an.

[Spooky]

Ich gehöre auch der Fraktion "eigenes CSS" mit gelegentlichen Anregungen aus verschiedenen Frameworks an.

Same here.

[planepix]

Offtopic:
Der geschätzte Kollege Peter Müller wurde auf einer Konferenz gefragt, mit welchem CSS-Framework er arbeite.
In seiner unnachahmlichen Art kam kurz und knapp: „Brauch ich nicht, ich kann doch CSS“.

Will heissen sich damit zu beschäftigen hilft, sich unabhängig(er) von CSS-Baukästen machen zu können…

[zoglo]

Will heissen sich damit zu beschäftigen hilft, sich unabhängig(er) von CSS-Baukästen machen zu können…

Bin ich ja auch, haben aber halt das ThemeManager-Framework extra für Contao geschrieben.
Bin selber begeistert von allen anderen Ideen und Frameworks (Man muss halt immer dabei bleiben und auch die neuen Sachen kennen, damit man Frameworks weiterentwickeln kann).
Eigenes CSS kann ich natürlich schreiben wann ich möchte, muss man aber heutzutage nicht immer, wenn es kostengünstiger sein sollte - Warum das Auto neu erfinden, wenn ich es in 10 Sekunden zusammen "geklickt" habe.

[Kopfnuss]

Ich schreibe auch lieber selbst CSS.
Wenn man das seit einiger Zeit macht, kommen viele einzelne Snippets zusammen.
Ich habe mir jetzt über die Jahre ein eigenes SCSS-Framework für Contao geschrieben, mit Variablen und imports, so kann ich jetzt schnell eine Seite zusammenstellen. Über die Jahre habe ich alle Element formatiert und angepasst, das dann in eine Framework-Website dargestellt und daran weiter entwickelt.
Ich würde nicht wieder zu einem anderen Framework zurückgehen wollen.

[planepix]

Frisch vom Smashing Magazine aufgeschnappt
https://www.smashingmagazine.com/202...mework-needed/

Nicht dass es unbedingt leichter ist

[zoglo]

Nicht leichter aber wenigstens interessanter ????
Das einzig bekannte Framework (auch nur für SPA mit Kompilat) welches @layer nutzt ist PandaCSS, echt interessant, dass es in dem Beitrag erwähnt wird.
In den letzten Monaten wurde soviel in die Baseline aufgenommen, sodass manche hier CSS neu lernen könnten, spricht dann eher dafür kein Framework zu nutzen und auf die neue Basis zu setzen. Selektorstärke, JS, Wiederholungen und doppelte Anweisungen waren gestern

[Kopfnuss]

Frisch vom Smashing Magazine aufgeschnappt
https://www.smashingmagazine.com/202...mework-needed/

Nicht dass es unbedingt leichter ist

Das mit

@layer

finde ich spannend, kannte ich bisher nicht. Der Browsersupport ist auch gut, außer alles bis IE11. Wer den noch nutzt, ist aber selbst schuld.

[zoglo]

IE11 updated sich seit 2 Jahren automatisch auf Edge, wenn du die Top 1500 Websites aufrufst, du kannst es kaum verhindern.
Wenn du ein altes Betriebssystem ohne Updates nutzt, dann wirst du so oder so kaum im Internet surfen können mit dem IE

[Franko]

Zu @layer gibt es zahlreiche, hilfreiche Infos, u. a.:

Im »CSS Podcast« mit Adam Argyle & Una Kravets
https://thecsspodcast.libsyn.com/058-cascade-layers

Besprochen wurde das auch schon oft letztes Jahr s. a.:
https://www.youtube.com/watch?v=RxVJ2Oj1IWk&t=2268s

[Carino]

Vielleicht helfen auch class-less Frameworks weiter, wenn man nicht die Templates umstricken möchte.
Hier ein Vergleich wie die Seiten mit Plain HTML aussehen: https://www.cssbed.com/html%20only/

Vergleiche auch hier: https://blog.logrocket.com/comparing...ss-frameworks/
Ich mag https://picocss.com für kleine Projekte, mit eingebautem DarkMode, das einzige das mir hier fehlt ist ein besseres Grid System

Ansonsten ist Bulma toll, aber hier muss man eben wie bei Bootstrap auch die Templates anpassen.

Grüße,
Carino

[Franko]

Nachtrag: Bei Nutzung versch. files kann man die layer Spezifität dennoch übersichtlich kontrollieren.

In Verbindung mit CSS-Import:
https://developer.mozilla.org/en-US/...tiredLocale=de

In »Dart Sass« dann abhängig von (alter) @import o. @use Nutzung- s.a.:
Add css cascade layer functionality to use & forward rules

Empfinde dabei am einfachsten die »meta.load-css()« Nutzung (aus dem sass:meta modul) ala:

@use 'sass:meta';

@layer framework, reset, base, layout, components, utilities, usw. ...;

@layer framework {
  @include meta.load-css('myFrameworkPath');

usw. ...
}

[zoglo]

Nachtrag: Bei Nutzung versch. files kann man die layer Spezifität dennoch übersichtlich kontrollieren

Wichtig für alle, welche SCSS-Dateien bei sich im Contao-System einbinden:
SCSSPHP ist libsass, nicht dartsass (In Version 2 dann dartsass aber stof hatte noch keine Zeit und ist auch eher ein FOSS Projekt, welches auch von bspw. Shopware 6 genutzt wird)

@use und @forward kann man nicht nutzen

[Franko]

Wichtig für alle, welche SCSS-Dateien bei sich im Contao-System einbinden:
SCSSPHP ist libsass, nicht dartsass (In Version 2 dann dartsass aber stof hatte noch keine Zeit und ist auch eher ein FOSS Projekt, welches auch von bspw. Shopware 6 genutzt wird)
@use und @forward kann man nicht nutzen

Yepp, s.a.: https://docs.contao.org/manual/de/an...emo/#dart-sass
Bezog sich auf lokale Nutzung. Hätte ich erwähnen sollen.