Like all frameworks (or libraries, if you may), this one emerged from the need to manage recurring design and coding patterns. Before CSS preprocessors, naming and maintaining CSS was a significant challenge. Shut framework was conceived around 2004 to address these issues. And yes, I admit, I tend to procrastinate.
Bootstrap provided developers with a stylehsheet that allows them to draw anything, in HTML. Literally anything. Developers can control paddings and margins, background colors, borders, and a lot more. This, was not ideal, because it took the responsibility of maintaining site style out of stylesheets, into HTML pages. It created chaos.
Naming in Bootstrap is data-driven (sometimes), meaning, "btn-danger" is not always used for "danger" related actions. Making a distinctive button is a design decision. CSS is not supposed to describe data, rather style, or choice of style. (For example, box-red, or box-light).
Detailed styling, over-loads the outcome stylesheet. When designers need more specific and custom design, instead of opening the box of Bootstrap (which they should do), they roll up their sleeves and get their hands dirty, ending up with a much larger CSS bundle. Bootstrap is a black box, hard to control, or maintain, let alone customize.
When Bootstrap came out, a lot of designers found refuge in it, from obtrusive libraries (like Kendo UI), and let CSS be what it is good for; styling. Unfortunately, as the years went by, Bootstrap became yet another UI component library with an overloaded HTML hierarchy, and a huge CSS stylesheet to maintain. This lead to many derived libraries trying to control the output by simply wrapping it inside more black boxes!
The main take against that is maintainability on large projects. I have yet to walk into a project that uses Bootstrap the way it was designed to be used. It's simply all customization via overrides.
When a library becomes popular and more developers buy into it, and more contributors come in, it may look like it's a good thing. You are outsourcing testing and maintanance to another group. They know what they're doing. Right?
Just remember next time you have a CSS output of 250KB of one basic theme, that it was never about you. It was about the millions of users sharing your code.
Tailwind looks like they tried to fix this problem with tools that remove extra unused CSS. Tailwind don't understand developers. If there is a chance to screw up CSS, they will most definitely screw up CSS.
The biggest challenge is staying up to date. The code added for “backward compatibility” with older versions keeps growing, leading to bloat. The latest version of Bootstrap doesn’t fully utilize logical properties, even though CSS is now officially logical across all browsers.
Shut framework was first built with one target in mind: I am a designer, who wants to create a quick prototype, that can be used later to develop real code. I do not want to throw it all away and start over (as we do with prototype apps), and I do not want to dig too deep into the engine to customize it (like in Bootstrap). I aslo want to own the HTML output.
The first online prototyping app I used was InvisionApp. Great app. Today I use Figma as my design Adobe-alternative tool, basically for everything. Except prototyping.
Knowing how to code myself, I admittedly never tried to dig deeper into those apps' ability to create code. I just didn't care enough.
In addition to that, my fingers hurt after a couple of hours moving and clicking the mouse to align things on screen! Am I becoming the grumpy old neighbor?
My argument: Just as Bootstrap serves developers who aren't designers, these apps are designed for designers who don't develop. They might have some coding skills, but if you know how to code like I do, you'll find these apps very limiting. So, if you can code, CODE your prototype.
My cynical comeback to developers who attempt to design something out of the box. Developers who do not design, should not be given the power Bootstrap (or TailwindCss) gives, they will most definitely screw it up. Stopped counting the number of times I was asked to “clean up and fix” Bootstrap code that went out of control.
Somewhere between Figma, the awesome prototyping tool, and Bootstrap the awesome CSS framework, lies SHUT.
Why not?