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?", we were all like this
That time is over now, and using CSS frameworks has become standard practice across the industry as they save us a lot of time. But the question I want to pose today is this: Do we really need them in 2019?
Perhaps not. 🤔
In this post, we will go through why you may not need a CSS framework anymore. Let's jump right into it. 🏃🏻♂️
Unused CSS
I remember back when all we needed to do was add a bootstrap.min.css and voila! The production version of the app was ready... or so we thought.
Well, turns out that isn't really the case.
Check out an example of this webpage. They are using Bootstrap for their landing page. We can see it's minified, but an interesting thing to notice here is more than 90% of CSS in unused. Using the coverage tool in Chrome you can check that for any webpage. Just hit cmd + shift + p and type "coverage".
And yes, Bootstrap does of course have tools like Customize and Download that let you choose components and decrease the size of the downloaded file, but still, a lot of code goes unused.
Check this brilliant talk by Addy Osmani on this subject. I highly encourage you to watch the full video, but if you want to save time, click here.
Small Projects vs Big Projects
The reason for Bootstrap getting popular was:
- Easy to make mobile friendly responsive designs.
- Decrease time in developing a big project.
So, if you are working on some big project and you don't have a skilled Front-End Developer in your team, then CSS Frameworks can save your day. But do you really need a CSS framework for small projects? I don't think so. When I was making Dev10, I didn't use any external frameworks, and see the difference.
The key is to evaluate your project scope wisely. If you don't have many UI elements and pages in your app, you don't need a framework.
How to replace Frameworks in Small Projects?
Making mobile-friendly responsive design using vanilla CSS isn't just possible, it's easier to do than using frameworks, I think. Here are two CSS properties that are damn powerful.
1. Flex
Check out this pen. Using just a few lines of code, you too can make awesome responsive pages like this.
So take out some time today and learn about it. Here are some resources.
- A Complete Guide to Flexbox - CSS tricks
- Flexbox CSS In 20 Minutes - Traversy Media (Video)
- Basic concepts of flexbox - MDN (All time favorite)
2. Grid
Taking out your simple CSS grid from frameworks and putting that on steroids, this is something that you all should learn. If you used to use Bootstrap only from grid system, use grid and make your own custom layouts.
- A Complete Guide to Grid - CSS tricks
- CSS Grid Layout Crash Course - Traversy Media (Video)
- Basic Concepts of grid layout - MDN
3. Use code snippets for UI components
Next time you get confused and want to get inspiration for UI elements like buttons and navbars, just visit Codepen. It's an awesome community and you can find hundreds of pens to help you with that. Other useful resources:
- You-Dont-Need-JavaScript - Kind of a replacement for bootstrap.js
- Best CSS Code Snippet Sites
If you still find it difficult to find CSS for some UI element, then use your old friend Inspect Element. 😊
4. Use Animation code snippets
Cool info: I stopped writing this article on 21st January because this article gave me the idea and inspiration to work on Animatopy. If you remember animate.css, it was a great tool but the only problem was even if you wanted to use a few animations, you still had to include the complete CSS.
I obviously find that unnecessary and frustrating, so I made Animatopy. With this, you don't need to download Animate.css, just copy the code snippets and you're good to go.
Will share full story soon 😃
Conclusion/Tl;dr
Here's the golden rule: if the project is small, keep it small and don't use frameworks. The only large size files allowed are images, and you should always try to optimize that too, not CSS.
If you have some other cool tips feel free to share that in the comment section below.
But what about Big Projects?
This is easy to do if you're just starting out with a new project. But if you already have a big project up and running, this transition will be successful only if it's well-planned and discussed with your team. In this section, we will discuss a few tips for optimizing big projects.
1. Remove unused CSS from your project
Thanks to the awesome Javascript community, we have awesome tools to optimize CSS. One of those great tools that you can use in an existing big project is purifycss. It's available with
2. Minify/Uglify use it all
There are other ways to further decrease the size of CSS, the obvious one being minifying it. There are already many posts about it, but here's a fantastic one to save your time.
3. Make CSS wiki or Documentation (if ditching Frameworks)
If you are determined enough to leave frameworks completely, then take the best thing from frameworks, well-written documentation. This way, developers can easily copy and paste the code snippets and save time. Believe me, it saves a lot of time so you and your developers can avoid those long bug lists generated by other developers. In the beginning, this can be intimidating, but this will benefit you in the long run. The best place to start is, of course, the documentation of these frameworks. All the best!
Conclusion
Use frameworks or not, that's up to your discretion. The key idea is to use any of them well, follow the best practices, and keep checking new properties to replace with old ones.
Well, that's it from my side, guys. I can keep going, but my job is to just ignite your thoughts so we can carry on the discussion in the comments below. Be ready with your own tips, tricks, and suggestions!
Latest comments (64)
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.
I agree you are lazy (as me).
But you're quite smart!
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)
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?
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.
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 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 :)
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 😊
That bajrangi bhaijan gif is 🔥
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.