Welches CSS-Framework

[Ray Donovan]

Hi,

ich mache sehr viel Formularfeldern und habe eine leichte Störung mit der Symmetrie. Wenn Abstände im Kontext nicht gleich sind, schmerzt es in meinen Augen ( ). Dafür nutze ich bisher immer das "Framework" von W3.CSS. Das klappt auch ganz gut, ist in manchen Punkten aber dann doch arg beschränkt bzw. muss man dann doch recht viel per Hand anpassen.

Probleme sind z.B. das <select>-Boxen ganz anders angezeigt werden als normale <input>-Felder. Da stimmt der Abstand als auch die Höhe einfach nicht. Sieht unfassbar scheiße aus, wenn man da nicht selbst Hand anlegt. Aber ich möchte kein Framework nutzen und dann trotzdem ständig (ab und zu ist ja ok) Dinge anpassen.

Auch die vertikale Ausrichtung in Taballen ist nicht immer ideal.

Welches Framework würdet ihr empfehlen?

Bootstrap hatte ich zeitweise mal genutzt, finde ich etwas überladen. Tailwind erschlägt einen auch?
Mit welchen arbeiter ihr so? Sollte ich mir Bootstrap und/oder Tailwind nochmal anschauen?

P.S. Ladezeiten sind mir sehr wichtig!

 

[BeBur]

P.S. Ladezeiten sind mir sehr wichtig!

Was heißt das? Haben deine Clients nur 50kb/s Bandbreite oder muss alles innerhalb von 2ms geladen sein? Oder soll es einfach nicht "lange dauern"? Wenn letzteres, dann kannst du jedes moderne Framework benutzen. Ein Framework, das breite Anwendung findet ist absolut geeignet dafür, 08/15 Anforderungen zu erfüllen.

 

[kim88]

Beide sind empfehlenswert. Ich arbeite selber sehr gerne mit Bootstrap. Spannend wäre wenn du dich mit SCSS auseinandersetzt.

Dann ist Bootstrap auch nicht mehr überladen. Weil dann "kompilierst" du quasi dein CSS aus dem Bootstrap Quelldateien -> und hast nur das drin was du brauchst.

Funktionen die du nicht brauchst kannst du per true/false in der Regel einfach ein- oder ausschalten:

Und du musst auch weniger von den Standard Klassen mit eigenem CSS überschreiben, weil du qasi selber festlegen kannst was z.b. "primary" für eine Farbe sein soll. Oder wie viel Margin ein "mb-2" etc sein soll.

Auf der Bootstrap Webseite ist das alles sehr ausführlich dokumentiert. Ebenfalls ist bei den einzelnen Komponenten dokumentiert, welche SCSS Variabeln du ändern kannst um -> gewisse Dinge direkt zu ändern - ohne das du noch Custom CSS schreiben musst:

Beispiel: https://getbootstrap.com/docs/5.3/forms/form-control/#sass-variables

Hier findest du alle Variabeln um das Bootstrap-Default Layout für Formulare anzupassen:

Wenn du Bootstrap einfach 1:1 von der Webseite herunterlädst oder per CDN einbindest ist das minimierte CSS um die 220kb gross - weil es eben alles einbindet was Bootstrap so bietet.

Bei meinem Webseiten, wo ich Bootstrap über SCSS anpassen ist das minimierte CSS (Bootstrap + mein Custom Code) in der Regel nur zwischen 30 und 50kb gross (je nach Webseite halt)

Auch bei JavaScript kann man nur die Dinge einbinden die man braucht - auch dort spart man nochmal ordentlich Dateigrösse.


Daher meine Empfehlung wirf da unbedingt nochmal einen Blick drauf.

 

[Ray Donovan]

@kim88 Merci! Tolle Antwort, dass ist genau sowas, was ich suche. Dann schaue ich mir das mal an. Danke!

Was heißt das? Haben deine Clients nur 50kb/s Bandbreite oder muss alles innerhalb von 2ms geladen sein? Oder soll es einfach nicht "lange dauern"? Wenn letzteres, dann kannst du jedes moderne Framework benutzen. Ein Framework, das breite Anwendung findet ist absolut geeignet dafür, 08/15 Anforderungen zu erfüllen.

Es sollte alles schnellstmöglich geladen sein, ja. Zeit ist Geld

Nein, aber es gibt es auch mal Anwendungsfälle, wo es nur ganz schlechtes Internet gibt. Ich wohne auf dem Land, da gibt es auch mal nur EDGE (ja, sowas soll es noch geben ). Ich mag halt Effizienz. Alles was geladen wird, aber gar nicht gebraucht wird, kann man sich im Kern ja sparen. Wieviel Bandbreite man damit weltweit wohl sparen könnte?^^

Deswegen haße ich z.B. WordPress. Ja, es kann viel, aber ich sehe anhand der Ladezeiten schon, wer WordPress nutzt. Man kann es optimieren, aber ohne optimierung, sind die Ladezeiten echt bäh.

Wenn da dann Tailwind CSS - was bis zu 3-15 MB groß werden kann - geladen werden muss, dann gute Nacht. Bootstrap kommt mit der Vollaustattung laut @kim88 auf 220kb (was i.O wäre) aber man bekommt es mit SCSS ja noch mal eine Ecke schlanker.

 

[kim88]

Tailwind nutzt man in der Regel auch über scss.

Also alles was Bootstrap da kann kann Tailwind auch. Ich selber nutze einfach lieber Bootstrap als Tailwind - weil mir das arbeiten damit leichter fällt - kann aber auch nur Gewohnheit sein. 🤷‍♂️

 

[Amaoto]

Bootstrap hatte ich zeitweise mal genutzt, finde ich etwas überladen. Tailwind erschlägt einen auch?
Mit welchen arbeiter ihr so? Sollte ich mir Bootstrap und/oder Tailwind nochmal anschauen?

Vielleicht suchst du kein Framework dieser Art, sondern eher eine sogenannte Boilerplate.
Ich hatte z.B. Skeleton ein paar Mal genutzt und fand es sehr ok, um schnell was zu bauen.

 

[Rossie]

Wenn da dann Tailwind CSS - was bis zu 3-15 MB groß werden kann - geladen werden muss, dann gute Nacht.

Für die Produktion sollte man einen Minimizer nutzen: https://tailwindcss.com/docs/optimizing-for-production

Davon ab nutzt Tailwind seit 3.0 standardmäßig eine Engine, die nur Regeln für die tatsächlich verwendeten Elemente einbezieht, wodurch Megabyte-große CSS Dateien wie zur Anfangszeit selbst während dem Entwicklungsprozess vermieden werden. Ich komme in einem aufwändigen Projekt komprimiert auf 16 kb. Das muss also kein Punkt sein, der gegen Tailwind spricht.