Sarthak SharmaWe'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!
