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.
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.
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:
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)
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)
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:
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:
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.
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.
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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.
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.
I agree my example analogy with painting is easy to poke holes at (love the fun image you posted btw ❤️)
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:
$spacers(see this. For those unfamiliar, if you see!defaultin sass, it's basically saying "if this variable is not already defined then use these values)And if you look at that:
You can see that you're basically getting values like
4px, 8px, 16px, 24px, 48pxbut all defined asremso my assertion is only true if we assume1rem is 16pxbut 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-5it now maps to2.625rems~42pxinstead of48px or 3remif 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.scssfiles 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:
Or, a very viable alternative would be:
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.
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.
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.