Top 5 CSS Frameworks In 2021 | By CodeWithWebDev

What is a Framework?

Why use a Framework?

  • Avoid reusing code.
  • Responsive Design without going deep into Media Queries.
  • Clean and systematic code.
  • Cross-browser support.
  • Faster development, as no need to write more CSS.
  • Good Web Designing.

Bootstrap

  • Release Date: August 19, 2011
  • GitHub Stars: 146k
  • Documentation: Excellent
  • Browser Support: Cross-browser support.
  • Used by: Spotify, Twitter, Udemy.

Advantages of Bootstrap

  • Responsive Grid (rows & columns, responsive behavior)
  • Pre-made HTML Components (buttons, forms, )
  • Cross-Browser Compatibility
  • Easy to Use & Learn
  • Active Development (new versions, and constant bug fixes)
  • Flexible & Customizable
  • A vast Community Support.
  • Can use JS, without writing a single line of JS.

Disadvantages of Bootstrap

  • All Bootstrap sites look similar.
  • Will have to remember all class names to add Bootstrap pre-made elements.
  • Heavy to use, the size of the file becomes high.

Tailwindcss

  • Release Date: November 2, 2017
  • GitHub Stars: 34.1K
  • Documentation: Good
  • Browser Support: Only Modern Browsers.
  • Used by: BlaBlaCar, OnlineDoctor, hubblr, LiveStorm.

Advantages of Tailwind CSS

  • No default theme/styling.
  • You do not need to undo styling and apply your own style to the design.
  • Pre-designed widgets to build our site.

Disadvantages of Tailwind CSS

  • No pre-defined components.
  • Need to give time to learn all CSS helper classes.

Bulma

  • Release Date: January 24, 2016
  • GitHub Stars: 42.3K
  • Documentation: Good
  • Browser Support: Firefox, Chrome, Edge, Opera, Safari.
  • Used by: TipOff, Rubrik, Django, PlusDental.

Advantages of Bulma

  • Light-weight, flex-box based framework.
  • Modularity.
  • Provides flexibility.
  • Easy Setup
  • Easy to learn.
  • Built using pure CSS, so can combine with JS Frameworks.

Disadvantages of Bulma

  • No JavaScript Elements.
  • Limited support for accessibility
  • New, so less community support.
  • It is constantly in the development phase.
  • Slow on web browsers.

Materialize

  • Release Date: September 2011.
  • GitHub Stars: 38.3K
  • Documentation: Excellent
  • Browser Support: It doesn’t support all browsers & also not the older versions.
  • Used by: type stack, sumato soft, faveable, necompare.

Advantages of Materialize CSS

  • Great Documentation.
  • Easy to use
  • Component-based framework.

Disadvantages of Materialize CSS

  • No support for old browser versions.
  • Large/heavy
  • All websites look similar
  • No Flexbox used
  • Not maintained anymore.
  • Little control over components.

Foundation

  • Release Date: September 2011.
  • GitHub Stars: 28.9K
  • Documentation: Good
  • Browser Support: Chrome, Firefox, Safari, and few other versions of some browsers.
  • Used by: Amazon, HP, Adobe, Disney.

Advantages of Foundation

  • Mobile First, responsive web design framework.
  • Provides support for applications & emails.
  • Easy to customize.
  • Open Source & free to use.

Disadvantages of Foundation

  • Large dependency size.
  • Not that beginner-friendly.
  • Takes time to understand.

Conclusion

  • Responsiveness
  • Browser support.
  • Learning curve.
  • What CSS-Preprocess is used.
  • UI Design

A few Frameworks that we would also like to mention:

  1. Pure CSS.
  2. Semantic UI.
  3. UI Kit.
  4. Skeleton.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Seeding SqlServer, PostgreSql and MySql databases with CSV files using yuniql migrations

Push vs Pull

अर्थ Program Task — 10

My Flutter IOT Story

Monitor Server with Telegram Bot and Python

This Week Streaming March 7 2022

Golang Concurrency Patterns : Fan in, Fan out

How do you explain distributing computing and Apache Spark with different levels of complexity

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
CodeWithWebDev

CodeWithWebDev

More from Medium

Don’t use CSS classes in your tests!

All HTML5 Tags with their descriptions/Uses and examples

Getting started with the World of Web

Major changes to bootstrap 5