Top CSS Frameworks in 2021

Summary

CSS is one of the key to make web designs appealing and mordern according to 2021 sites. Thanks to these frameworks who helps us from last decade solving major huddles of creating features or better UI and UX. In this article we will learn one of the best CSS frameworks out there and the best use case of each.

1) Tailwind CSS

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. Tailwind in created by Adam Wathan he is the CEO at Tailwind labs.

performance

It’s tiny in production.

Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind projects ship less than 10KB of CSS to the client.

Mobile-first

Responsive everything.

Wrestling with a bunch of complex media queries in your CSS sucks, so Tailwind lets you build responsive designs right in your HTML instead.

Throw a screen size in front of literally any utility class and watch it magically apply at a specific breakpoint.

STATE VARIANTS

Hover and focus states? We got ’em.

Want to style something on hover? Stick hover: at the beginning of the class you want to add. Works for focus, active, disabled, focus-within, focus-visible, and even fancy states we invented ourselves like group-hover.

Sites Build with Talwind:

1. Windy Blocks
2. Viaduct
3. Larval Spark
4. Feedr.dk

2) Bootstrap

Bootstrap is the one of most popular css, html and javascript framework it supports all browser compatablity. Bootstarp uses css links in header to get started see example of quick cdn setup.

CDN link https://getbootstrap.com/docs/4.3/getting-started/introduction/

Bootstrap pros CSS

1. Mobile first
2. Normalize.css
3. Containers
4. Grid system
5. Support for LESS and SASS

Sites Build with Bootstarp:

1. Vallua
2. Wokine
3. Cuberto
4. Plastic

3) BULMA

Bulma is open source free framework which provides ready to use components of html. The end result of bulma is single css file. You also need saas setup installed this can be acheived by node-saas, Saas CLI and Webpack. It handels responiveness by it self and support various breakpoints.

If you are working on Jam stack you can install bulma by command

npm install bulma

Mannualy by cdn or going to their site Bulma.

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">

Sites using Bulma.

1. Top
2. Pingstack
3. Snipper App

Conclusion

Boostrap is still popular than talwind and Bulma according to google trends however there are great components offer by both talwind and bulma if we already worked with bootstrap it worth to try these new css frameworks.