The CSS frameworks you should know.

Firstly, what is a framework? A framework is essentially a platform that allows developers to build things faster. Here are some key things to know about frameworks in general

• A framework allows you to build softwares without having to code from scratch.
• It is basically a pre-written program that you can build upon as a developer.

Most programming languages have their own framework (Javascript especially) but for this post, we would be learning about CSS frameworks.

Writing plain CSS while building a small web project can be fun. However when the application becomes bigger and more sophisticated, plain CSS can be extremely stressful. Your best bet would to use a CSS framework. Here are some advantages of using CSS frameworks.

• Faster development
• Cross browser functionality
• Enforces standard web design patterns and styles.

There are many CSS frameworks out there, however in this post I have curated top 5 CSS frameworks to learn in 2021.

1. Bootstrap - Bootstrap is the most popular HTML, CSS and Javascript framework for developing nice looking websites that are responsive and mobile friendly. Bootstrap comes with it's own components like navbar, carousel, buttons etc. It was developed by twitter in 2011 and it is currently in version 5. You can visit bootstrap official website to learn more. Their documentation is very explanatory. Top companies like twitter, walmart use bootstrap for their web applications.

2. Tailwind - Tailwind is a utility-first CSS framework. Unlike other CSS framework that come with their pre-defined components, Tailwind enables you to create your own bespoke designs easily. Top companies like hashnode, livestorm, Superchat, Hubblr use Tailwind css.

3. Foundation - Foundation is also a very advanced CSS framework that comes with a bunch of in-built components and also some animations. It is highly responsive design and mobile friendly. Accenture, Nubank are companies that use foundation.

4. Bulma CSS Bulma - is a CSS framework based on CSS flexbox. It also has a lot of in-built components that you can use. One distinct feature of Bulma is that it comes in a lightweight weight structure that allows you to only import the components you need. Companies like Django, Rubrik used Bulma CSS

5. Materialize CSS Materialize is a CSS framework developed by Google with HTML, CSS and Javascript. It contains a lot of engaging components that can accelerate frontend development and enhance user experience. It is also known as Material Design.

NB: There are a bunch of other CSS frameworks out there like Purecss, skeleton, ant design etc. This article is just to show you some of the most relevant ones. Also, you don't have to know everything. Knowing one or two is fine. You can always pick up others to learn if a project demands it.

You should have a considerable understanding of CSS before you start learning any framework

If you find this article helpful, kindly let me know in the comment and don't forget to like.✌🏾

Comments

[Kinanee Samson]

If i wanted to use a css framework today, it will definitely be tailwind, the customization that it allows can enable one build beautiful UIs faster, while maintaining full customization.

It should be top of this list tho.

[akinloludavid]

You're right. I just have a personal preference for bootstrap. It was the first css framework I learned.😁

Thanks for the comment.

[Rob Levin]

It's a really well-done component library even though it gets bagged on a lot. It was one of the first and folks just dropped it in without using modular imports, custom sass scss variables, and now custom css properties that make it extremely themable. And I say this as a competitor; but it needs to be pointed out. BS is very well coded!

[Rob Levin]

I don't think it really matters whether Tailwind or Bootstrap are in first position. They're definitely both in top 3-4. Material is pretty favored by React devs from what I've seen.

But TW and BS are so apples to oranges. BS == component based library (but they've added a nice handful of utilities themselves). TW is utility first. I cannot get myself to use it but will admit it has great results for those that do. And the JIT classes removal is a big win for them.

There are some very interesting arguments against both of these styles. Then there's the classless camp that prefers very little classes and cleaner markup. But that has it's own limitations.

Learning core CSS + extra attention to grid and flexbox will serve you very well whether you choose to use a framework or not. If you use TW or BS utilities for example, how would you know what to do with the flexbox classes unless you at least know the basics of flexbox?

My personal gripe with Tailwind, Tachyons, etc., is that I have to remember yet another DSL on top of the CSS I already need to know. But that's really my opinion and hang up. Do as you please :-) It's definitely working for lots of folks.

I think if you're into React ChakraUI would be above some of these for me.

I'm a framework author myself so dig up mine out of my profile if you'd like haha. But yeah, I agree too with:

You should have a considerable understanding of CSS before you start learning any framework

So really learn core CSS and also use multiple frameworks. Make decisions based off of experience and observation and not what someone tells you to do and you'll be in a good place 😄 💪 ⭐ 🙌