DEV Community šŸ‘©ā€šŸ’»šŸ‘Øā€šŸ’»

DEV Community šŸ‘©ā€šŸ’»šŸ‘Øā€šŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Vladimir Jovanović
Vladimir Jovanović

Posted on • Updated on

Case against premade CSS frameworks (and Design systems)

People tend to use premade CSS frameworks for everything today. They are easy to use and the documentation is extensive. CSS frameworks have became so widespread that some may think that this is the way everyone should make a web site.

Material design

WRONG!

If you are using these CSS frameworks, especially popular ones like Material design, you are practically stealing visual identity from the company it was made for. In this case, you are using Googleā€™s design system, their brand colors and pretty much everything else with the exception of their logo.

When it comes to other popular frameworks like Bootstrap or Foundation, problem is that you are using same styles as hundreds of millions of other web sites! Try to grasp how big is that number and what does that do to uniqueness of those styles.

Why is this a bad thing for you (and a good thing forĀ companies that made them)?

Most important problem - Your company donā€™t stand out in any way, it is not memorable and you are not creating brand awareness. If you want to create your own brand, especially as a startup, you must do it right from the start, because it is extremely hard to change user opinions or behaviors afterwards.

When you come to the point in your work where you have to make changes to your established design, probably because you want to make some improvements based on feedback or data, those changes are usually small and subtle. At that point, development of your own design system is very risky because it may alienate large portion of your current users who already got used to your site or app.

At the same time, your popular app based on Material Design, for example, is promoting only Google and Android. They get brand recognition, fameā€¦ all of it.

Try out this experiment - pick a few non-Google web sites or apps, from the same industry, made with Material design and place them next to each other. Take a look at them all. Try to remember as much as you can about them in a few minutes of using them. After a week, try to remember if there was anything specific about their design that stands out, that you can visually connect to that specific brand it was made for?

You will certainly have a hard time remembering. Imagine what effect would that same experience leave in average customers mind.

When it is ok to use premade CSS frameworks?

  • Prototyping
  • Creation of admin panels, that are not intended for large audience or public use

If you want to create some prototype extremely fast, like a mock-up of your future app, it is ok to use finished CSS frameworks. You can compare this part of the development process to creation of mock-ups during the design phase of your work. Finished design wonā€™t remain the same as a mock-up, in the same manner as the finished app wonā€™t remain the same as the UX prototype.

For the part of your apps, that are not made for public, like admin panels for example, it is not that important to have everything unique regarding styles. It would be nice to have, but it is usually not critical for business or brand awareness.

Take great care, because at this point you are getting your customer accustomed to these styles. If they tend to work in admin panel a lot, those styles will become very close to their liking and after some time they may ask you to design front-end in the same manner. Good luck explaining to them anything about brand and design at that point.

What is the solution?

If you donā€™t make a habit of creating and offering unique styles to customers, you are doing them disservice in the long run. Hire a web designer or UI designer & developer, and integrate them with your development team. It is not that hard. As a result, you will create more value for your customer in the long run and your company will become famous for delivering unique and quality solutions.

Take a look around and you will see that we desperately need designs that are different from Flat, Material, Bootstrap, Apple guidelines...

...

Author:
Vladimir Jovanović
Web designer and front-end developer since 1998.

LinkedIn

Top comments (44)

Collapse
 
dmerand profile image
Donald Merand

What do you think about the idea that having visual consistency reduces cognitive dissonance in non-technical users, allowing them to focus on your content instead of the mechanics of navigating your app?

Collapse
 
vlasterx profile image
Vladimir Jovanović Author • Edited on

Maybe you misunderstood the point of this article.

I am in favor of creating your own design systems and frameworks with your own design style, instead of recycling visually identical solutions that everyone is using.

Again, this article is intended for professionals, not for end users who have no idea what design system or frameworks are. Professional web/ui designers and front-end developers are in charge of creating those new solutions. No one else.

Maybe I misunderstood you - are you proposing that everyone should use the same design in order to reduce cognitive load?

Collapse
 
drrial profile image
d3rrila

I think they mean to crank down the individualism a little, so as to not confuse less tech-savvy users. On one page the menu is at the top, on the other its on the bottom right, then on the next one its bouncing around on the website, one has a menu you navigate with clicks, one has a menu you can navigate with hovers, then colors have different meanings, on some pages buttons aren't even highlighted from the background, so people who're unaware don't even know they can be clicked, etc.

Sure, every website being cookie-cutter copies would also be bad, but I could let my Grandparents use the computer without being called every 20 seconds to explain how this or that website work. Some broad consistency across the web isn't all that bad.

Thread Thread
 
vlasterx profile image
Vladimir Jovanović Author

Why did you get the impression that only people at Google or at Bootstrap are smart enough to create and develop a design system? That is a job description for all web/ui designers. If web designers don't know how to do that, then they are not web designers, correct?

Thread Thread
 
drrial profile image
d3rrila

I didn't. I'm pointing out that everyone doing their own things muddies the waters, tho. Just because they can develop a design system, doesn't mean that design system is something people will respond to. Just look at Snapchat.

Collapse
 
dmerand profile image
Donald Merand

It looks like @drrial did a great job addressing my original point - if you needlessly reinvent the wheel to justify your existence, people expecting a wheel will be frustrated.

I definitely agree that brands need to look like themselves. If your organization is being mistaken for Google because you look just like them, you've got a lot of problems.

It sounds like you're trying to leverage ^ that idea (which is perfectly reasonable and almost nobody would argue) as weight behind a less universal idea: that design frameworks aren't really useful for "real designers".

To draw a parallel with coding, I'm not going to re-implement bubble sort every time I need to sort an array. I'm not (always) going to invent a new web framework like Rails or Django when it's time to make apps for the web. Yes, it's our job to write code, and yes, we can do those things, but those aren't always the problems we're trying to solve. Not all of us need to be Massimo Vignelli inventing the NYC Metro design framework. It reads a bit like you're advocating throwing out the baby with the bathwater.

Thread Thread
 
vlasterx profile image
Vladimir Jovanović Author

You are within your rights to agree with me or not, I won't even try to change your mind. Now I see that you are speaking from dev perspective.

For me, same design all over the Internet represents a problem. Google's material design was excellent when it appeared, same as Flat design before and Twitter Bootstrap design before that. They all brought something new to the table and people loved it, but... BUT if you think that reusing those design systems today is a good thing, than that is a problem for which you are not aware of.

And it shows, because you think that this is just a technical issue. It's not. Half of the problem is design/art related. When almost every design today is normalized to those designed styles and frameworks, then nothing is really unique, beautiful and new. Changing variables in Bootstrap is not really design. That is basic styling.

Throughout the art history there were different art movements that were dominant at some point, but that point has passed and something new replaced it. My goal was to point out to everyone that using same templates will get them nowhere, especially if they are in web/ui and UX design professions.

But who knows, maybe I expect too much from people.

p.s. When it comes to Material design especially, that system is made especially for Google. They give it to everyone because it spreads brand awareness for Google, not your own brand. No matter what you do with it, people will always see Google behind it.

This is digital equivalent of a promotional shirt with a company logo that you get for free. You may wear it to the gym, but you would certainly not wear it to a jet-set cocktail party or a wedding. Unless you are a dork ;)

Collapse
 
dragonwocky profile image
dragonwocky • Edited on

I understand completely what you're saying. Personally, I think you're wrong. I do, however, agree with some of your sentiments.

You say that by using a CSS framework, you are not doing the site properly, and are just creating another boring site that looks like the millions of others already out there, and (in Material Design's case) are advertising Google instead of your own site. You say that because of this, no site using the framework is original or memorable.

Before I say any more - don't get me wrong. I completely agree that people should attempt to create unique designs for their sites, rather than just making another site that looks almost exactly the same as the other million sites using that framework out on the web.

However, there is nothing wrong with using a CSS framework at all. It can save you painful hours, even days, of fiddling with line after line of CSS to try and just fix the positioning of element after element (no, this isn't laziness speaking - this is my personal experience).

My opinion is this: CSS frameworks are nothing but a starting point, a tool that many people misuse. They fix some positioning, and give elements a smoother starting look, but that's all - they shouldn't provide global templates to build the web from. They are (or at least imo should be) made to be customised.

Take, for example, my site. I built it using Bulma for basic positioning, them completely customising it. When I remove the custom CSS, it looks broken and boring. When I remove the CSS framework, it looks broken and has all sorts of weird positioning and sizing problems. Now, I could spend a few days fixing these. I happen not to have those few days, and so I use a framework that lets me develop the design idea I had for my site far more easily and quicker. It ends up looking the same either way.

Think of it this way - you keep a bunch of CSS snippets that you use a base for each of your projects. They seem to contribute nothing visible towards the final look, but without them everything seems distorted, positioned a bit oddly. Frameworks are, in a sense, an advanced version of this. A whole lot of snippets put together to form a whole that fixes positioning (and is quite possibly compatible with far more than your 5 minute solutions could sometimes be - although, yes, compatibility with older browsers is rarely a priority for me), but also adds a set of default looks for many elements that look quite ugly without any CSS.

To summarise my opinion: There is nothing wrong with CSS frameworks - they are simply a starting point made to be customised (but often wrongly used) that can save you hours of extra work.

Collapse
 
vlasterx profile image
Vladimir Jovanović Author

Thank you Dragon ;)

Please don't get this wrong, but as a 14 year old developer, you have a long road ahead of you when it comes to learning CSS and positioning. I say this as someone who has more than 20 years of professional experience ;)

CSS is not that hard and it is the first thing you should master if you want to be web designer or front-end developer.

Take a look at this presentation from Morten Rand-Hendriksen. He is one of my favorite web designers. This one is about CSS Grid and a great new way to position elements on the page. You won't need any premade grids after this.

youtube.com/watch?v=7kVeCqQCxlk

Collapse
 
lietux profile image
Janne "Lietu" Enberg

Don't get this wrong, but as someone with 20 years of professional experience you should know that your time is valuable enough that you shouldn't be spending it reinventing the wheel every time you do something.

CSS is not that hard, and neither is Python, and as a good developer/designer you still use the best bits from existing libraries, frameworks, boilerplates, etc. to reduce the amount of work you need to do to reach your desired goal regardless of which you work with.

I sure don't want to rewrite a CSS reset every time I start a project. I also don't want to worry about the basic styling, positioning, responsive design etc. .. sure, you sacrifice a tiny amount of customizability for efficiency, but with a good framework and a experienced user that is indeed a very tiny amount, and the payback in terms of speed is massive.

Also you really don't seem to appreciate how annoying it is for users to have to figure out "what does a button look like on this site" every time they enter a new site. Because too many people already follow your way of thinking, "reinvent everything, reuse nothing", I regularly bump into websites where I don't understand the controls.

Thread Thread
 
vlasterx profile image
Vladimir Jovanović Author

Those 20 years of experience give me a vantage point over this occupation that I am trying to show to everyone else. But, as it turns out on the Internet, those who comment, like you, are refusing to open their minds to new ideas. Instead, you project your own fears and insecurities to those new ideas, when in fact there is no place for concern.

Now don't you get this wrong, but you are seeing this problem from your perspective, without the whole picture.

Most of the problems you have mentioned, I never wrote or argued against.

Read it again carefully, go through comments and maybe you will figure it out. If not, then it will take time and a lot of personal experience for you to maybe come to the idea I wrote about.

Have a nice day.

Thread Thread
 
lietux profile image
Janne "Lietu" Enberg

Really sounds like you're the one who's failing to open their mind. There are lots of benefits to using existing templates, boilerplates, frameworks and such, and using them doesn't mean you're 100% copying some other company's style and don't look unique.

Thread Thread
 
dragonwocky profile image
dragonwocky • Edited on

Thanks Duke.

It really does seem to me that you are the one not opening your mind, Vladimir. I may be a newbie with little experience - but maybe that's good. I'm able to look at things from a fresh perspective and, instead of listening to habits and opinions built up over the years, just look at something and ask myself "does this make sense or not?"

Nobody should ever use a number like that as an excuse. It's the typical "I'm older/younger than your, and have more/less experience than you, so you should take my opinion as fact that pushes your opinion out of the picture" view.

I don't mean to be rude, but - you have 20 years of experience? Great. You've been doing this for a while. You're not the only one with a brain. Everyone, experienced or not, should have their opinions equally valued and judged.

Thread Thread
 
vlasterx profile image
Vladimir Jovanović Author

"Everyone, experienced or not, should have their opinions equally valued and judged."

Of course not, we don't live in communism. You have to earn that right, same as everyone else in their life. If that was not the case, professions and professionals woudln't be valued at all.

But then again, it is your right to disagree and to learn from your own mistakes. You need that in order to grow as a person. Everyone has been in that phase of life, especially in teen years. In a way I envy you because it is all new to you and you get a chance to discover it all on your own, but the things that are new to you with all of the positive and negative sides is something that I have established so long ago. You will get far since you have started so young, if you endure this calling and then start to create something new, that no one has done before.

You will need a lot of learning before you earn the right for a "fresh perspective".

My discussion ends here because internet arguments can go on forever.

I wish you all the best.

Thread Thread
 
dragonwocky profile image
dragonwocky • Edited on

Ah. Thanks for the good wishes, but you've taken what I've said the wrong way. You probably won't reply to this, but I hope you at least read it carefully.

No, what I'm saying has nothing to do with communism. Context is important here.

I am saying that in a civilised argument, nobody should dismiss another's opinion simply because of a number. I'm not saying that experience should go out the window. I'm not saying that everyone is equal. Yes, you sometimes need to earn the right of being listened to. But no matter what, you should at least consider someone else's opinion. Get out of your comfort zone, try to understand what they're saying. Judge their opinion as harshly as you would your own opinion. Do your research. Take nothing at face value. Nobody, not even someone with decades of experience, is right all the time.

Professionals are valued because of their skill, not because of how long they have been doing that thing. Someone may have been doing something for 30 and still have no clue what they are doing - definitely not a professional. Someone may have been doing something for 5 or 6 years, yet understand it perfectly and be incredibly good at it, and so be called a professional.

By fresh perspective, I meant a perspective that actually is fresh. New. A blank slate. The perspective of someone who has no idea what's going on. I guess that no longer accurately applies to me, but you get the idea. If someone looks at something with the perspective of someone who's already learnt a lot about it, that's not exactly fresh, is it?

Thread Thread
 
lietux profile image
Janne "Lietu" Enberg

Well you're doing exactly the opposite of what you're preaching.

You're saying people should be open to new ideas, yet you stick to the ancient practices of doing everything yourself from scratch, instead of embracing the relatively new idea of CSS frameworks, and that they can be very beneficial also outside of prototypes and internal components.

You seem to assume I've not given a try to building styles from the scratch. I have, many times, before and after the popularity of CSS frameworks. When the first widespread CSS frameworks came out I agreed with what you're preaching now. They were not very good, and people ended up completely locking into someone else's style. Things are quite different nowadays.

Even now when I know I'm building something small and simple I build things with a smaller "micro-framework" (Pure.css, Flexbox Grid, etc.), or when I know I'm building something with specific performance constraints (e.g. animation heavy things for mobile web) I might be more careful with what I use, but when building a larger application without any obvious issues to keep in mind the power of a good CSS framework is absolutely the way to go. Just don't forget to also customize it to fit your style, and I don't just mean tweaking a few colors here and there.

Thread Thread
 
lietux profile image
Janne "Lietu" Enberg

Ah, looks like the poor comment reply pages made me confuse you with another person.

Thread Thread
 
vlasterx profile image
Vladimir Jovanović Author

If I didn't appreciate a dialogue, I wouldn't have responded in the first place.

You didn't propose anything fresh ;) It takes experience to see what is old (these million times reused frameworks, for example) and then to propose an idea how to improve on it, for example to dare to create new design systems and personal CSS frameworks that could be expanded and improved.

You will understand it, give it some tome. Don't rush it, just enjoy your learning for now, because there is a long way ahead of you ;)

All best!

Thread Thread
 
dragonwocky profile image
dragonwocky

By fresh perspective, all I meant was perspective, a point of view based on nothing but the present, without much fore-knowledge of the topic. Not necessarily a fresh proposal or a new idea...

But yes, bloated old frameworks are in great need of improvement. That's no different to most bloated old code that needs reworking. Not all frameworks are old and bloated, however. Plus - old or not, all modern frameworks are (or at least, should be) built to be customised to your own design.

Anyway, I feel like we're now starting to go in circles.

Collapse
 
dragonwocky profile image
dragonwocky • Edited on

Of course. I have plenty left to learn.

I'm not saying I'm unable to do it without a framework, though - some of what I'm currently using Bulma for I've done before, and what I haven't I've still checked to see how it's been done and it doesn't look complicated at all. I agree that frameworks are not always necessary. All I am saying is that there's nothing wrong with using them when people do decide to use them, if those people customise them properly.

Collapse
 
lietux profile image
Janne "Lietu" Enberg

One of the best ways to use any CSS framework is as a base to work with - they fix a lot of basic issues, taking care of a lot of the "boilerplate" for you.

If you take a good framework and then edit it to look more like your thing you'll still end up with a better looking site, faster, and with less headaches.

Most of them nowadays support LESS/SASS variables and extension rather easily, so it doesn't take a massive amount of effort to build your own custom style using one of the frameworks as a starting point.

Collapse
 
gary_woodfine profile image
Gary Woodfine

This post and the comments that have ensued indicate that this is obviously quite a highly emotive subject and quite easily misunderstood.

One of the dangers that this points highlights, is that your organisation runs into the risk of creating "yet another framework" (YAF), and the trouble with YAF's are that they are things developers do to avoid doing any real work.

One can easily agree and disagree with each of the points raised and discussed. Yet at the end of the day, we all have very little say over what the most important point, is "What does the customer want".

I somewhat agree that UI may need to be distinctive from a "branding" perspective, but really true branding is in the usability of the product. There are some very simple slight nuances you can add to a UI that can have some really high impacts to user adoption.

Your product "Uniqueness" may never actually stem from the UI, but actually in how it helps your users solve a problem. How quickly they were able to learn your product to solve a problem. In most cases, they may not spend too many brainwaves on thinking "ooh this is nice".

From a start up perspective, of which I have considerable experience, the primary objective is always User Adoption. We don't measure how many liked the UI, we only measure how many adopt and start paying.

You will always have re-engineering of the Front-end, as you become more familiar with what your customer wants, and as your "solution" to "problem" evolves.

Using a pre-rolled UI framework i.e. Bootstrap, Material etc. Helps you to leverage what others have learned and provides your customers with an instant familiarity with your product, even though they may be coming in cold.

Personally I don't think there is a right or wrong answer.

You've raised a good points but really the answer lies in the consultant get out clause of "It Depends"

Collapse
 
vlasterx profile image
Vladimir Jovanović Author • Edited on

I agree and I have to add something - it is my mistake that I haven't explained it thoroughly, but would it made any difference considering how difficult is to reconcile designers and developers?

For some reason, most people here assumed that new design system and unique frameworks that support it are something bad that goes against all good principles of design, UX and development. This is typical dev perspective of looking at things and resistance to change.

How did you react first time you saw Bootstrap or Material?

Did you like it?

If you did, would you like to repeat that experience with something new? If it is so, then why so much resistance and negativity?

Collapse
 
gary_woodfine profile image
Gary Woodfine

I don't think there is resistance to change. That is just not the developer mindset, developers are all about change, they're used to dealing with it, but they are also pragmatic about change.

I do get where you're coming from, in regards to innovation. But we also need to counter with we shouldn't just innovate for the sake of innovation, we have to focus innovating for the need.

If a new CSS is framework is only due to that it may aesthetically look pleasing and not actually provide anything more, then I would argue what is the point ?

I love the supposedly Henry Ford quote :

"If I asked the customers what they wanted, they would've asked for faster horses"

So the innovation here was to think out of the box. There is a world of difference between faster horses and motor vehicles.

is there really a need for new CSS framework ? or is there an opportunity to completely re-think or re-imagine the UI ?

Thread Thread
 
vlasterx profile image
Vladimir Jovanović Author • Edited on

Framework is technical representation of a design system. When we re-imagine design systems and how UI works, then we need to create new modular framework that will support it. Since CSS has advanced quite a bit, especially with CSS Grid, creation of unique frameworks for each new project is no longer an issue. Instead of focusing on learning how frameworks work, why not learn modern CSS?

There is a lot of overhead in code when you just re-style existing frameworks. It affects performance and code base becomes dirty and unreadable after some point.

Collapse
 
tipoqueno profile image
Eugenio Monforte

Maybe the title of your post need to say "premade Design Systems" instead of "premade CSS frameworks": you can use a CSS framework changing the style and layouts with theming.

Also, you can use something like Material Design to have a known base and focus on imaginery, colors and spacing to differentiate your app.

In the end, I still agree with you that we need to work on create memorable design.

Collapse
 
vlasterx profile image
Vladimir Jovanović Author • Edited on

No, title is accurate. This is why:

Frameworks are developed based on design - their structure (html), styles (css) and interactivity (js). When you are changing predefined variables, you are limited by the initial boundaries of that adaptive design system. In that situation people usually don't even try to come up with another idea for UI, something that will solve UI problems differently. Forms still look the same, buttons as well, only colors are changed and maybe border radius for corners, just to name a few examples.

For example, Material design did something good - they changed the button behavior with unique visual effect that happens on click; forms look differently where label pops up on click etc. Those were all great examples of good design! But as I said, those great ideas are made for Google, not for your own brand. Same is with all other frameworks or design systems.

And it shows throughout the web, since almost every site looks the same. There is a reason for this situation, but this is a topic for another article. ;)

Collapse
 
tipoqueno profile image
Eugenio Monforte

Frameworks are just tools, and normally they are just great foundation for web development. Of course, if you're using Material Design without change anything you'll get another Android clone.

But you can to work on CSS to show a different structure of your project besides base styles. If you think that every site looks the same it's not just because developers are using Bootstrap, it's also because they think that users are familiar with that structures, and works well. Every spoon looks the same and still...

Collapse
 
roblevintennis profile image
Rob Levin

I understand why this topic is brought up so much but I think it's curious that folks are so polarized with "always use frameworks", "never use frameworks", "you don't need a framework you can do it in CSS". To me these are very broad and sweeping generalities. If you're my painting teacher and you tell me to never take a photo and always draw from life it will likely serve me well for 5 years and then I'll meet you at a bar and ask you "hey, you told me to never use photo then I read in this article that you made this illustration from a photo". Then you'll explain to me that it was for my growth and that "eventually" you can learn to draw and paint from a photo if that's the only practical solution for the job.

I dunno, pretty bad story maybe. But the point is that you should use frameworks, tear them apart, analyze them. Then, go write your own scripts. Large ones. Small ones. Lots of toy scripts. Maybe use codepen. Then try to write you're own framework, or, maybe just one component like a button. Then, when you think you're done, compare it to my AgnosticUI, to Twitter Bootstrap, Foundation, Bulma. ChakraUI, find one that uses utilities maybe Tailwind or Tachyons or something. Compare and contrast. Did someone make a glaring mistake or omission? Will one of them break in a certain env?

So in above suggestion you're writing custom CSS, using frameworks to understand how they work, comparing, etc., maybe even learning SMACSS and BEM (which is better for you? Why?). This is how you actually get better. Not by "never use a framework" or "always write your own CSS". You may then be reinventing the wheel.

Another bothersome thing I hear that is related. This idea that you have to write as few classes as possible always. The markup must not have any chained classes. Well, there's classless frameworks. They're quite beautiful. But can they tackle all use cases? Nope. Why? When would you use one though? When would you not.

All styles and approaches have their place in my opinion and the key is to learn discretion and have understanding to make chooses you can discuss intelligently.

Collapse
 
vlasterx profile image
Vladimir Jovanović Author

I appreciate the comment, but respectfully - you missed the point.

It is not about the underlying technology behind those frameworks, BEM, components or anything of that sort. It is about their standardized DESIGN that always bring the visual identity of the company that made them. When you take a look at the Material design from Google, for example, you will know on a first glance that this UI and even UX are used in humongous amount of other peoples apps.

Is your app branding unique then, does it bring something memorable to the table, does it make your brand to stand out from the rest? Of course not.

So, in extent, your analogy is wrong as well. If I were to teach you to paint, I would first tell you to learn how to sketch and to learn the principles of a composition. Then I would teach you to learn to use colors, perspective, shadow, different planes etc. Then little by little, you would develop your own style and in the end you would have a complete and unique painting. I would never teach you to skip all of that and then jump to copy Mona Lisa.

These frameworks are doing just that - they give you the finished head of the Mona Lisa, finished eyes, mouth, arms, hair, dress, neck, background sky and it is up to you to mix and mash all of it. The result will never be as good as the original, it will be just a bad copy that's stealing parts of a famous masterwork.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oi4jcj4wu3vypc28jhjb.jpg

Collapse
 
roblevintennis profile image
Rob Levin • Edited on

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;
Enter fullscreen mode Exit fullscreen mode

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.

Thread Thread
 
vlasterx profile image
Vladimir Jovanović Author

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.

Thread Thread
 
roblevintennis profile image
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.

Collapse
 
hnla profile image
Hugo - hnla

I have seen the use of these frameworks increase over the recent years and it's important to stress the real reason that they are used in so many situations and it is most definitely NOT as they offer a uniform well developed approach to frontend development but rather that nowadays there seems to be a real decline in the true frontend developer, who, as mentioned in this post, is meant as per their job description to be able to work up a full template solution to suit the site/job at hand - it's what we do! The framework in many 'business' situations managed by backend project leads jump on frameworks largely as they seemingly offer a solution to removing a lot of development time and where they often don't seem to have particularly experienced frontend devs.

The other important aspect to consider is how well do we all assume these frameworks are built? I and many others have no time for the likes of Bootstrap or Foundation - to name but a few - we can generally write far better code suited to the project in hand without tons of legacy unused code or endless un-semantic classes, and which ultimately is far easier to maintain for other devs.

I currently have to fight a battle in largish company to dissuade them from going the bootstrap route in a major platform re-structure, Bootstrap wasn't a business decision just an assumption... so sad :(

Collapse
 
vlasterx profile image
Vladimir Jovanović Author

Thank you Hugo, this was one of the reasons I wrote this article.

Sadly, you are correct.

Web design is forgotten occupation, but we used to create design systems and our own frameworks for each project.

Those who have inherited web design (UI and UX designers) no longer know how to code, while once large area of frontend development is today considered to be only javascript engineering. That has left a void when it comes to CSS since it is easier for everyone to use premade framework than to create something on their own.

It is troubling that most people see this part of the job as unnecessary and as "reinvention of the wheel". It only shows how huge this problem has become.

Collapse
 
oncode profile image
Manuel Sommerhalder

I share the same opinion. Big CSS Frameworks like Bootstrap offer a really good time boost if you wanna build a prototype or admin interface. But when it comes to implementing a custom web design, it doesn't give you any advantage. You have to mutate everything, color, padding, position, etc. And if the framework offers "configuration" through e.g. SASS variables, you can be sure that half of the stuff is not configurable or there will be a configuration file with hundreds of variables.

Collapse
 
hnla profile image
Hugo - hnla

Lets not confuse 'standards' with 'Standards' Those of us that have attempted to remain faithful to the Standards over the decades are perhaps not those that support the rise of these frameworks, those frameworks may assume to set a standard of use but they are not part of the Standards.

Collapse
 
lobsterpants66 profile image
Chris Shepherd

Maybe I'm missing the point, I use Bootstrap for all my sites then overlay styling on top of that. If I can restyle everything in Bootstrap, what is the point in starting from scratch?

Collapse
 
vlasterx profile image
Vladimir Jovanović Author

Can you make Google Material design or Microsoft's Fluent design system from Bootstrap base?

Of course not.

Creating your own design system is much more then styling an existing framework. It is a lot of work, especially today. Not everyone can do it, but that doesn't mean that it is not worth doing.

Collapse
 
lobsterpants66 profile image
Chris Shepherd

Material Design: fezvrasta.github.io/bootstrap-mate...
Fluent Design: fluentbootstrap.com/

Seriously, what am I missing?

Thread Thread
 
vlasterx profile image
Vladimir Jovanović Author

I have answered in other comments.

Collapse
 
tam360 profile image
Mirza • Edited on

hypothetically speaking, if some company or developer knows that using certain front-end design/framework will help them in increasing their client-age then why would they design their own custom UI? Standards are good because they reduce the technical hassle both for devs as well as the users.

Though i agree with you when you mention that frameworks are good if you are working on prototype or MVP. Time matters a lot!

Collapse
 
vlasterx profile image
Vladimir Jovanović Author

Developers are almost always oblivious about design and branding aspects of this work in a same way pure designers without technical background are oblivious to technical issues.

Once upon a time, we had a man in a middle who connected those professions in a unique way - web designers. Professionals who know to design AND to code.

Look at it from this perspective - if everyone is using the same design with slight variations, which one will stand out and be most memorable? Human brain remembers differences, something like Git ;)

Collapse
 
aleksacami profile image
AleksaCami

What if the sole intention of using a CSS framework is that I want to save time, and i just cant be asked to design my app from scratch? But i do agree in a way, CSS frameworks should be used only for admin based web apps, for sure.

Collapse
 
vlasterx profile image
Vladimir Jovanović Author

I would like to thank everyone for comments and questions!

All of this has showed me what examples I should use to explain this problem more clearly.

Thanks,
Vladimir

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

šŸŒš Life is too short to browse without dark mode