StringBean introduces itself with the slogan, “The 4K featherweight framework”. Now, I wasn’t exactly skeptical. Despite the prevalence of massive CSS and HTML frameworks (you know which two I mean), there are plenty of tiny frameworks about. I’ve seen and tested many, and even used one or two of them for live projects.
StringBean has, however, managed to impress me with how much it’s managed to fit into a small space. As always, frameworks stay small by sticking to an incredibly basic set of features and styles. This is no different… but there are just a few things I wasn’t expecting.
On top of that, even the basic features are quite thoroughly implemented, to increase flexibility. Let’s start with the grid as an example:
StringBean’s grid is made up of 24 columns (or “units”, as they’re called in the relevant documentation), along with the usual break-point-related helper classes. This has been done to give people increasingly complex layout options as screens get bigger. And boy do they get bigger.
There’s no three-break-point system here. There are seven. They range form “x-small” (with a max-width of 320 pixels), to “full-24” (sizes beyond 4K). So, if you want to build, say, a full-screen layout that scales from mobile phones to 4K monitors, StringBean is built with that in mind.
With that kind of forethought put into every element, and the kind of planning it takes to keep the file size down, StringBean is impressive.
Just go ahead and assume that all of the standard HTML elements (links, buttons & button variants, forms, tables, and type) are included, because they are. Now, I mentioned extras, earlier. Most are standard for the bigger frameworks, but you might find them missing in the smaller ones.
Here, they include:
- a menu bar
- progress bars
- helper classes
- label elements
- info wheels
The “info wheels” are those little circles that numbers might go in, like version numbers, or a count of how many unread notifications you have.
So yeah, all of that, in 4K. Color me impressed.
