Discussion on: Case against premade CSS frameworks (and Design systems)

[Rob Levin]

I agree my example analogy with painting is easy to poke holes at (love the fun image you posted btw ❤️)

It is about their standardized DESIGN that always bring the visual identity of the company that made them.

So I think if you simply drop it in yes, you have "that Bootstrap look"; and yes, many if not most will do just this. If that's the case, yup, you have a Bootstrap looking site.

However, I'm using BS5 at work (it was here before I arrived) and I've done a couple of things:

1. Basically copied [github.com/twbs/bootstrap/blob/mai...] and commented out any imports not being used (e.g. if you're not using a Carousel there's no reason to have that added to your payload)
2. I've defined the Sass variable $spacers (see this. For those unfamiliar, if you see !default in sass, it's basically saying "if this variable is not already defined then use these values)

And if you look at that:

$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
) !default;

You can see that you're basically getting values like 4px, 8px, 16px, 24px, 48px but all defined as rem so my assertion is only true if we assume 1rem is 16px but you get the point.

So our designer likes sizes like 12, 16, 26, 42, and so feeling they land closer to the golden ratio (and arguments aside, this is how he's designed the application Figma). So, all I had to do to accomodate that was to redefine those spacers so that when an application developer on our team does ps-5 it now maps to 2.625rems ~42px instead of 48px or 3rem if that makes sense.

All to say, from a few lines of overrides, the entire system of spacing has been adjusted to meet our needs.

Of course if you look in that same _variables.scss files alone, there are many other such things that can get tweaked. Further, have you looked at some of the more talented theming designers feats? One can make a Bootstrap backed site look absolutely nothing like it's default look.

So, my point is not that many Bootstrap sites will look like Bootstrap clones, but that you can make it look quite a bit differently if you elect to dig in a bit and make adjustments. All while deriving all the benefits of using Bootstrap.

Can you also benefit by doing things from scratch? Absolutely. I'm a design technologist and so I indeed prefer this as a truest myself. But if you're building a complete application and build a design system from scratch, you have to weigh in the amount of time this takes to pull off! I have been 3/4 done with such systems and "pulled off" to do other things. As such, I've decided that realistically, unless I"m working on a personal blog or small client site, I need to either:

1. Come in with my own customizable set of UI components and then customize them quite quickly (e.g. 1-2 months!). This was a motive for me to create AgnosticUI by the way (and also having one such customizable framework I can use in React, Vue, Svelte, or Angular).

Or, a very viable alternative would be:

1. Use Bootstrap and customize it too the max (or OpenProps + Pico.css which would maybe be a lighter weight approach; or really many such similar ideas).

Building a large ui component library from scratch is wonderful and I'm glad I've done it a few times, but you're going to have to deal with the reality of eager PM's and product folks that want it done tomorrow.

To learn, definitely, build a design system from scratch (heck, a few times if you have the time).

But it's not just "never use Bootstrap", "always use Bootstrap". That's what I was mainly disagreeing with.

One last thing. You can also use totally custom CSS on landing pages, hero units, etc., and/or very customized components if you happen to have such differentiating widgets or ui areas. Ultimately it's up to you to decide and be pragmatic.

Lastly, I've had less success with really customizing MaterialDesign to my liking. I didn't really dig in too much, but I did find it harder to achieve in the investigations I did. So I might "just agree" more if you're talking about that particular framework I dunno.

[Vladimir Jovanović]

Changing a several variables is the way Chinese are creating their "unique" industrial designs, for example. Instead of device rounded corners of 5mm, they will make it 1cm and copy everything else. Get it?

I am both graphical designer and front-end developer (for more than 20 years now) and I am approaching this topic from design and branding perspective, it has nothing to do with underlying technology. You cannot create a unique and recognizable branding by tweaking a design someone else made. This is the reason why almost every web site looks like the next one.

Your education and your continued learning are related to engineering technologies and not to applied art, branding and marketing. These changes that you are proposing are almost never enough to create a unique UI.

Yes, industry is demanding fast solutions. Those who are creating sites with premade frameworks will earn some standard amounts of money, but those who innovate will earn a fortune.

[Rob Levin]

Absolutes or specifics applied to the general makes no sense to me. Not everyone needs to build something to hang in the Guggenheim and concluding it with how much folks will earn as a result of these sorts of choices seems off-point. I just see it going both ways with a big..."it depends". Seems our comment thread's devolved so I'm bowing out at this point but thanks for the article.