Auf den ersten Blick wirkt StringBean wie jedes andere CSS-Framework. Doch auf den zweiten offenbart es einige Vorteile: Es ist nicht nur responsiv und leichtgewichtig, sondern ist auch für den Einsatz auf High-Resolution-Screens wie 4K-Bildschirmen optimiert.

StringBean – die Features

StringBean basiert im Gegensatz zu traditionellen Frameworks auf einem 24-Punkt-System. Gerade in Zeiten von hochauflösenden Bildschirmen sind zwölf Einheiten im Grid oft einfach zu wenig – vor allem, wenn es in den 4K-Bereich geht. Erst bei 4K-Auflösung kommen die Fähigkeiten von StringBean überhaupt zur Geltung. Dank des speziellen Systems können Entwickler den Bildschirm in mehr begrenzte Segmente aufteilen, was wiederum eine bessere Kontrolle über die Breite einer Website ermöglicht.

Zudem verfügt StringBean über sechs Breakpoints – normalerweise sind es vier. Sie reichen von xsmall-* zu small-*, medium-* und large-* bis hin zu mega-hd-* und mega-uhd-*. Möchte man also ein Design implementieren, das von Smartphones bis auf 4K-Monitore skaliert, ist StringBean wie dafür geschaffen.

Darüber hinaus sind die einzelnen Features gründlich implementiert: Neben den Standard-HTML-Elementen (Links, Buttons & Button-Varianten, Formulare, Tabellen und Schriften) sind in StringBean noch weitere Extras enthalten, die normalerweise den größeren Frameworks vorbehalten sind. Dazu zählen zum Beispiel Menü-Leiste, Fortschrittsbalken, Helper-Klassen, Label-Elemente und Info-Räder.

Um StringBean so leichtgewichtig zu erhalten, wurden Ad-Ons entwickelt. Auf diese Weise wird die Codebasis nicht aufgebläht, aber das Framework um weitere Animationen und Effekte erweitert.

StringBean kann über die offizielle Projektwebsite oder über GitHub heruntergeladen werden. Das Framework liegt derzeit in Version 2.3 vor; gezippt hat die Datei eine Größe von rund 300 KB.

Aufmacherbild: Green Beans Background von Shutterstock / Urheberrecht: Wuttichai jantarak