DEV Community

The Nerdy Dev
The Nerdy Dev

Posted on • Updated on • Originally published at the-nerdy-dev.com

Best CSS Frameworks in 2021

Best CSS Frameworks in 2021

  1. Bootstrap
  2. Foundation
  3. Bulma
  4. Tailwind CSS
  5. UI Kit
  6. Milligram
  7. Materialize CSS

1️⃣ Bootstrap

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

Image description

2️⃣ Foundation

A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device.

https://get.foundation

Image description

3️⃣ Bulma

Bulma is the modern CSS framework that just works.
Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.

https://bulma.io

Image description

4️⃣ Tailwind CSS

Rapidly build modern websites without ever leaving your HTML.
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

https://tailwindcss.com/

Image description

5️⃣ UIkit

A lightweight and modular front-end framework
for developing fast and powerful web interfaces.

https://getuikit.com

Image description

6️⃣ Milligram

Image description

https://milligram.io

7️⃣ Materialize CSS

A modern responsive front-end framework based on Material Design.
To get started, check this :

https://materializecss.github.io/materialize/

Image description
If you found this list useful, consider:

⭐Follow @thenerdydev for more content like this

So this is it for this article. Thanks for reading.
Don't forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

PS - If you are looking to learn Web Development, I have curated a FREE course for you on my YouTube Channel, check the below article :

Looking to learn React.js with one Full Project, check this out :

Discussion (39)

Collapse
shahzaib_ali profile image
Ali™

I would not agree on bootstrap being #1 as per my knowledge and experience many devs including me are mainly using Tailwindcss mostly

Collapse
andreidascalu profile image
Andrei Dascalu

Well, impression matters but I for one don't know anyone using Tailwind (at most people who either discussed it or tried it and dumped it).

But for a measurable take on popularity, Bootstrap has 3.3M weekly downloads vs less than 1.2M for Tailwind. In Github, Bootstrap has 154k stars and Tailwind less than 49k.

Collapse
shahzaib_ali profile image
Ali™

Mostly because bootstrap is pretty old and tailwind css is relatively new

Collapse
sands45 profile image
Sands

If you haven't used tailwindcss then give it and try.Then after you can have your say

Thread Thread
andreidascalu profile image
Andrei Dascalu

Lol, that's like saying if I haven't personally followed the proof of Newton's laws I shouldn't drive a car. Not at all. I can use the results done by others, particularly people I know. I've been in projects where people added tailwind, it's the same mess as using in-line styles, breaks the separation of structure and presentation and so on.

Thread Thread
haaikraai profile image
haaikraai

And here we are. Newton's laws are technically wrong. Relativity surpassed it, quantum mechanics proved Einstein wrong, etc... We can still send spaceships to the moon using Newton's laws. It's not about the reinventing the wheel, it's about employing a "more circular" wheel.

Bootstrap is the classic indeed and did magic way back when for web devs. I have no evidence, so excuse this assumption: but from the numbers you referenced, I doubt you know 4.5M people ;) (just have some procrastination fun, please do not be offended lol)

I am reading this article because something has been drawing me to try out Bulma. I'll know what that something is once I try I guess, so thanks author, this is enough of an excuse to try it

Thread Thread
andreidascalu profile image
Andrei Dascalu

Well, it's probably a pointless discussion at the moment, but Newton's laws aren't "technically wrong" - they weren't enough to explain motion of very large and very small objects, which was one of the main things that drove the development of quantum physics (hence the name - the physics of very small particles). You won't find card designers or mechanical engineers working on common items like cars doing a lot of quantum calculations.

Collapse
spock123 profile image
Lars Rye Jeppesen

100 pct agree.
Tailwind is mind blowingly good.

Collapse
thenerdydev profile image
The Nerdy Dev Author • Edited on

I agree. The list is in no particular order. We have better CSS Frameworks that Bootstrap :)

Collapse
filipslezak profile image
FilipSlezak

Tailwind is not a css framework its a utility toolkit and a bad one i must add.

Collapse
sands45 profile image
Sands

Me too

Collapse
zugbahnhof profile image
Julian

Materialize css is not maintained anymore, please link to the community fork instead. materializecss.github.io/materialize/

Collapse
thenerdydev profile image
The Nerdy Dev Author

Sure ! Done. Thanks

Collapse
mike_andreuzza profile image
Michael Andreuzza

I am a heavy user of Tailwind and I would use Tachyons before boobstrap.

Collapse
thenerdydev profile image
The Nerdy Dev Author

Bootstrap* 😂

Collapse
mike_andreuzza profile image
Michael Andreuzza

oh, I call it so.

Collapse
spiderpig86 profile image
Stanley Lim

Great list, personally I have grown to enjoy Tailwind.

Shameless self-plug: Cirrus is a personal framework I am working on as a SCSS only config based framework (no need to write any JS to generate new classes). Currently going through a major update and hoping to launch soon! Please check it out: cirrus-ui.netlify.app/

Collapse
mag_0576868 profile image
Mag Kong

Hi Guys, we are running a CSS coding workshop with Elad Shechter. He will be sharing how he leveraged his CSS skills to create a cool game, learn something new with fun and also how to turn a pet project into a showcase of your skills and resourcefulness. If you think, the workshop can be beneficial to you or your friends, please join us this coming Thursday, 11th Nov: hackertrail.com/event/build-a-game.... Thanks, Mag

Collapse
tfantina profile image
Travis Fantina

Good list. Every time I see Bluma I feel compelled to point out that it's not actually a11y friendly out of the box: github.com/jgthms/bulma/issues/53

Collapse
stsrki profile image
Mladen Macanović

Never seen or heard anyone using Foundation. Anyone here who worked with it?

Collapse
thenerdydev profile image
The Nerdy Dev Author

Never worked with it. But heard about it from others that it is good framework. So just added it to the list :)

Collapse
narrinddhar_52 profile image
Narendra gorantla

Wow

Collapse
spock123 profile image
Lars Rye Jeppesen

Bootstrap #1? Really?

Collapse
thenerdydev profile image
The Nerdy Dev Author • Edited on

No. The list is in no particular order.

Collapse
spock123 profile image
Lars Rye Jeppesen

Ah my bad, sorry mate :)

Collapse
sands45 profile image
Sands

Ukit is rediculus please check the badge section. They failed to center the text properly

Collapse
thenerdydev profile image
The Nerdy Dev Author

Is that so ? I would need to check it in order to confirm.

Collapse
tgifelix profile image
Felix Swinkels

Bootstrap and foundation🤣. Is this post from 2003?

Collapse
thenerdydev profile image
The Nerdy Dev Author

Haha ! No from the future 2021 :)
Bootstrap is still relevant I guess.

Collapse
lubber profile image
Marco 'Lubber' Wienkoop

Consider taking a look at fomantic-ui.com , the active community fork of semantic UI (which itself is not maintained since 3 years anymore)

Collapse
thenerdydev profile image
The Nerdy Dev Author

Sure. Thanks for sharing !

Collapse
elefint profile image
elefint

Great list, I usually jump between bootstrap and tailwind. Most people I work with haven't heard of tailwind but bootstrap is very popular.

Collapse
grimlink profile image
Sean van Zuidam

Nice list.
Hoping Fylgja CSS can join that list in the future

Collapse
thenerdydev profile image
The Nerdy Dev Author

Interesting.

Collapse
pavelloz profile image
Paweł Kowalski • Edited on

Who would have thought that a compilation of popularity contest winners (github stars, npm downloads) list could bring so much heat in the comments. ;-)

Collapse
exoticcarts profile image
Exotic Carts

I think UIKit is best

Collapse
mahdipuya profile image
Mohammad Mahdi Paydar Puya

I think Tailwind css is the best css framework because its so logical and it's so customizable

Collapse
roblevintennis profile image
Rob Levin

I wonder why Foundation is still so high at this point. The folks at Zurb are groundbreaking and very smart. But I wonder how actively it's still developed?

Collapse
roblevintennis profile image
Rob Levin

It's also odd that we call these frameworks too. I would call them libraries.