We're all well-versed with the capabilities and limits of Bootstrap. But of course, there once was a time when if somebody asked, "What's Bootstrap...
For further actions, you may consider blocking this person and/or reporting abuse
I'm really enjoying tailwindcss with it's utility classes I barely need to touch css and can create almost any custom look I want. Plus with purge css I can remove all unused css during the production bundling. I really enjoyed the article though and for smaller projects I like to stick with css grid and a few simple classes. Thanks for writing!
Our team has been using TailwindCSS in our projects for the last 6 months or so. It's fantastic once you get past the feeling that you're writing in-line styles. And the config file is easily tailored for each project. Purge CSS is a must when building though.
I have been using purgeCSS as well. I'm glad im not the only way who felt like I was writing inline css :) I literally just had someone on my team ask me today why it was any better than inline css lol. I showed him purge, and also the idea of classes created with the @apply and he had a minor "ah ha" moment.
How is working with Tailwind like? I've heard a lot about it being "utility", but I'm not quite sure what that means; to me it sounds like you'd need to customize all of your components from scratch, which kinda defeats the purpose?
I'm like 99% sure I'm wrong, so curious what you think - is there a lot of work to do for the styling before I can jump into developing my actual application?
Essentially you do "customize" the components in your site from classes so a simple rounded button would have quite a few classes. Something like
shadow bg-blue text-white font-light py-1 px-2 border border-white rounded-full
... but that is more or less how you can build your button the first time during prototyping, and then you can take all those classes once you have the specific style you are looking for dialed in and just create a new class called "button-blue" and use the @apply rule to make a single class that inherits all those properties
.button-blue {
@apply shadow flex-1 bg-white text-teal-dark font-light py-1 px-2 border border-white rounded-full;
transition: 0.3s;
}
that is just one use case. There are easy ways to add your own css "plugins" for things like gradients, svgs, and more advanced things where needed.
I feel like just having to deal with a single set of classes instead of having to remember all the random custom classes you created can be easier.
As far as a strict utility side goes, there are many easy classes you can use for margins, padding, flex, widths, and other properties. That was if you just need to add some margin-top to an element you can easily add a mt-4 class and not have to jump into the css itself.
Cool man! Maybe one of these days I should take a look into it.
I found this Twitter BTW, looks super dope.
twitter.com/bradlc/status/10841989...
More linting stuff to keep me from writing broken code! :) That does look awesome for sure.
I started to get into tailwind till I started to notice a trend that I had to start writing so many css classes in my html files. Another thing is something as simple as a button, I need to add css classes to make an input look like an input. I think that framework maybe went a little too much utility
I have been meaning to start using tailwindcss in my projects but I always postpone it because of time contstraints, I guess its time to start.
Thanks Adam 😊
I crashed and burned on feeling any css framework benefit a few years ago. I was just never able to make really good use of them.
I can't say exactly why or why not frameworks make sense in general, but I do know I don't feel a lot of love for them from experience. It's all anecdotal and I wouldn't come on to an existing project demanding we start over with CSS.
That being said, I've seen some CSS frameworks I like in theory. Tachyons is pretty cool. But I've never had a lot of personal success with frameworks in this area.
Agree with you but again depends on person to person I would say. Let's say if your user is in a remote location where speed is in between 2G-3G, shrinking on that 200k can provide a whole different experience. It's all about priorities my friend. 😊
Thanks to flexbox and SASS, I always roll my own using BEM. I've completely abandoned CSS frameworks and I get frustrated at the bloat when I pick up a project that had included some framework with overrides to the overrides that overrided the overrides.
I stopped using frameworks such as Bootstrap when I noticed that I had to spend a lot time overriding CSS rules of the theme in order to achieve a specific design, that I knew exactly how to pull off with vanilla CSS 🧐
I don't know if I should feel guilty because I don't know what can/can't do the frameworks right now, it's been a while since I dropped them 🤔
Thanks for the snippet resources 😄
😊
I'm in favor of having good HTML and CSS skills before considering a CSS framework. Bootstrap reminds me a bit of jQuery in a sense that you could skip learning standard JavaScript in the browser in favor of jQuery. It creates some "knowledge debt" because knowing Bootstrap or jQuery is not the same as knowing the underlying languages. Now that jQuery and possibly Bootstrap are declining in popularity, not having those fundamental skills becomes an issue when your teams move away from them.
What I see among my programmer coworkers (who are nearly all back-end people) is a liberal use of Bootstrap classes without any knowledge of what those classes do.
Can't agree more.
The ugly truth to why we need bootstrap right there..
We are either too lazy or too busy to spend the time making a custom setup.
At the end of the day, it makes our lives easier, and while I can't speak for everyone, having one less thing to worry about when I'm on a tight deadline is nothing but good.
The main reason, I believe, these frameworks are so loved is the daunting nature of CSS for the beginners and I believe they just get so used to them that they never bother to learn proper CSS without it.
That is why, even though they are still highly practical and fast to work with, beginner developers should really avoid them until they are comfortable with vanilla CSS.
The main benefit I see to CSS frameworks is development speed. I agree that with advancements in CSS (flex, grid) and tools to find UI components like Codepen, devs definitely have more options. However, having a solid UI kit out of the box means you can start workshopping ideas fast.
It's highly dependent on the project. I speak from working in consulting where I hammered out MVPs was the name of the game. In that scenario, putting performance ahead of development speed is premature optimization.
However now, I'm working on a more mature product, one that grew from an MVP. It's using Bootstrap (for now). However, now that we have the customer base to justify investing more in design and performance, we're working on adding more of our own styles while removing Bootstrap defaults. Ideally, I'd like to start removing Bootstrap components as they become obsolete, and eventually "unframework" our CSS.
Perfect case scenario of approximately every project that starts off with bootstrap. Everything is good until you try to grow.
On the other hand, if you can't initially get the project out the door on a tight deadline and without hiring extra people, you run the risk of there not being a project to grow.
It's a nice problem to have compared to the alternative I think
I tried using CSS-Frameworks but something always threw me off. I don't know, maybe it's just that I'm way faster writing the CSS from scratch and document that for the others on the team than I would be using a framework.
Wow, You are ninja man. 😃
Great article. The challenge comes when developing on legacy applications but if it is a new project, we tend to not use CSS Frameworks as well. Most of the time we are just lazy. ¯_(ツ)_/¯
P.S. The link to Animatopy is wrong though. Shouldn't it be sarthology.github.io/Animatopy/ ( ͡° ͜ʖ ͡°)
Damn! Edited now. Thanks man.
So I created this just for the lulz. github.com/Papagoat/gulp-flex-sass
( ••)
( ••)>⌐■-■
(⌐■_■) #Yeeeaaahhh
What's this ?
This is the reason why I decided to write my own css on my personal site and on opsdroid site - plus it was a good way to learn.
I was able to make the css pretty small with that.
If you do need to use a framework I quite like bulma because you can just get the sass you need and then mix/match
Quite recommended in this post, have to check bulma. 🤔
I quite like it, it takes a while to get used to the names if you are used to bootstrap but I find it more intuitive as well
That's awesome.
Loved the post. And I agree with it 100%. Most of my projects are small and for the browser only so I vanilla almost everything including all CSS and most Javascript. No jQuery or Bootstrap here. They go against every fiber in my body.
😄 Nice.
I worked on a massive application. We used the Angular framework and (especially because my boss was a HUGE bootstrap advocate) tried to leverage bootstrap. You know how much bootstrap we wound up using? Pretty darn close to 0%. Everything was custom designed to fit the specific task AND the "brand" that using bootstrap for just about anything slowed down the process.
In my opinion, if you have no intention of getting good at CSS, bootstrap is for you. (That is not intended as a criticism, CSS is surprisingly complex, and if it is just a small part of a "full stack" developers arsenal, it very well may not be worth their time to get "great" at it, and leveraging something like bootstrap could be a very smart way to handle it.)
If however, you are pretty good at CSS, bootstrap tends to become less and less valuable. For somebody like me, I honestly make custom, responsive UIs faster than using bootstrap (because I still have to read the bootstrap docs).
Tools Angular-UI also make people go for bootstrap. But problem is that if you save time in beginning, it will take way more time when do modifications.
My two biggest turn-off for css frameworks are
(1) The ones tied to a specific Javascript library
(2) The ones with class names i can hardly remember.
These are the major reasons i stopped using bootstrap a long time ago. These days, i am more relaxed using Tachyons or Bulma
I don't use CSS frameworks. With SASS, CSS modules, etc I don't think it is needed these days. Over the years I've built up lots of CSS snippets that I use throughout my projects. I personally find it faster to write my own CSS instead of using a framework these days although it took em years to get there.
I've used frameworks before and I always found them 'limiting'... Say you create a navbar in Bulma or whatever and you want to change something.. you either make your own or hack the CSS to make it work to how you want.
Frameworks come in handy when you want to build a site without putting any work into setting up the layout. But the downside is that you have to do things the framework way. The moment you want to customize things your way, that's when things hit the roof.
I personally find it easier to setup and have control of your own layout than trying to fiddle with and customize (heavily override) a framework.
SATYAVACHAN !!
The main reason I use Bootstrap is because it provide responsiveness without a headache. Just simply add bootstrap.min.css and you're good to go. And yes because of that the size of the apllication increased and more than 90% CSS is being unused.
I love to see that Flex and Grid works in very similar way. It's going to be super cool if it can solve the responsiveness issue without make the application bigger. Definitely going to use this instead of Bootstarp from now on.
Great article, I'm learning now how to use CSS Grid and flexbox and try to learn another perspective of how to layout our projects. I just use Bootstrap for grid system and responsive.
I believe most people that use Bootstrap don't know how this works internally, because there's no time to spend in learning css and they will never will be learn it.
Glad you liked it 😊
Aa yes time is what we need more.
Good points (and it would be fun to try a project from scratch, like in the old days), but your coverage example doesn't take into account that you're seeing usage for that particular page only. Am I right that you'd need to evaluate all pages on the site and combine usage to get an accurate number?
I think you need a framework when:
1) Want to follow a popular design system
2) Don't want to develop your own design system
3) Your team knows it
You don't need a framework when:
1) Want to develop your own design system
IMO: The majority apps/sites/systems follow a popular design system, because users knows how to deal with it. So, be careful with your "custom design". Try customize little things, as baby steps, not all things.
Thanks, I saved this post, it surely will teach me a lot.
Flexbox is really awesome.
As a (mostly)backend developer, I always want a CSS framework to make something easy.
CSS is an easy markup language, at the same time, it is very hard. I think i never will know all its modifiers.
And i cant be sure the code will be running smoothly cross so many browsers if i write CSS by myself.
Im using bulma)
Saved us a lot of time? How? Bootstrap is a nightmare, I absolutely HATE it when there is pre-existing CSS that I have to work around.
You kind of do if you want to easily onboard new engineers onto the project. If you don't then the ramp up time increases in my experience. A developer familiar with bootstrap can quickly create new pages/components on your existing app.
But the problem occurs when there is modification required.
i am using basscss..simple, powerful and life/time saver. All you need in regard of grid, flex, layout etc..No junk at all there.
And for the fancy stuff: my personal collection of css/js components which inspire me most.. meanwhile i 'collected' my own framework :)
In my experience CSS frameworks are good for prototypes and small web applications which creators might not have resource for custom designes. And in case of big projects they tend to take frameworks for prototypes or POC's/POV's and then they never are throwing away that code even if they are using totally custom design and CSS. So it just stay there
Thanks for the thoughtful article. One thing not mentioned is styling forms and user input widgets. While flexbox and grid solve the layouts, my understanding is that styling input widgets still requires quite some hacks. If a web application relys on a lot of input widgets (menus, radio and checkbox, date......), is that a valid reason to use frameworks such as Bootstrap?
Great article & totally agree with you! I started out 4-5 months ago, but it’s much better to write my own CSS than using bootstrap or other frameworks.
😊
In my opinion, it is better for smaller projects to use a ready-made solution - this will allow not to think about the design and operation of various elements, but to immediately launch the project.
Smaller in the context of time you mean or project scope??
I agree you are lazy (as me).
But you're quite smart!
That bajrangi bhaijan gif is 🔥
Great work sir...as a fresher and learner too it helps me out in my career.
amazing tool,it will really help a lot..
Which tool ;-)