DEV Community

Cover image for Which CSS framework should you use?
Abhiraj Bhowmick
Abhiraj Bhowmick

Posted on

Which CSS framework should you use?

Responsive CSS frameworks take a lot of work and persistence to build and create when building CSS on HTML responsiveness, accessibility, and structure. This is why CSS frameworks were created, to take the stress off of you!

A CSS framework is a software framework created to allow for easier, more standards-compliant web design using HTML/CSS. Many popular CSS frameworks are design-oriented and contain elements that can be re-used in the creation of any website or app, as well as a grid system designed to provide a responsive CSS layout to webpages.

All the frameworks listed in this article are free and open source.

1. Bootstrap

Without a doubt, Bootstrap is the most widely used free and open source CSS framework. Created in 2011 by developers Mark Otto and Jacob Thornton, Bootstrap is now used by millions of websites.
bootstrap
Bootstrap features Sass variables and mixins, a responsive grid system, extensive prebuilt components for building layouts, and powerful plugins built on jQuery.

2. Tailwind

Tailwind is a relatively new CSS framework, designed to be different from its competitors. Instead of predesigned components, Tailwind provides low-level utility classes that let you build your own designs. I personally have used Tailwind in my projects and loved it so far.
tailwind
Let’s have a quick look to some HTML used with Tailwind:

<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
  Button
</button>
Enter fullscreen mode Exit fullscreen mode

As you can see, the example is using many utility classes on a button element. Those classes allow you to finely style any element: We can easily spot classes named text-white, font-bold and rounded, defining the visual aspect of the button.

3. Bulma

With 21kB minified and gzipped, Bulma isn’t the most lightweight of this list, but this open source CSS framework is so interesting that it totally deserves a mention. Bulma is built with a mobile-first approach, which makes every element optimized for vertical reading, and its grid system is fully built with Flexbox.
bulma
Achieving flexible layout with same-size columns is as simple as adding a .column class to any of your HTML elements.

Bulma is also built with Sass, which allows you to only use the features you really need in your web development tasks.

4. UI Kit

UIkit is a lightweight and responsive CSS framework for developing fast and powerful web interfaces.
uikit
Consisting of compiled CSS and JavaScript, UIKit is easy to use and provides all the needed tools for modern web design: Grid, custom icons, components, animations, and a lot more. UIKit is compatible with Less and Sass.

5. Semantic UI

This framework stands out in many ways. It has become popular over a short period of time because of its simplicity. Semantic UI is well customized and IT doesn’t take much to comprehend. It is also easy to learn. This framework is lightweight and beginner-friendly
semantic

6. Spectre

A lightweight (~10KB gzipped) starting point for your projects, Spectre provides elegantly designed elements, as well as a flexbox-based, responsive and mobile-friendly layout.
spectre
Much smaller in size and features than fully-featured frameworks like Bootstrap, Spectre is a great choice for single-page websites and small web applications

Conclusion

All CSS frameworks bring different benefits and are useful in all projects as far development of the web is concerned and it requires CSS frameworks.it is advisable to select any CSS framework of your choice that can help you in your project considering your skill level and requirement of the project you are doing. This list contains all the frameworks I have used personally. If I have missed out on some great picks, feel free to comment to let everyone and me know about it.

Discussion (9)

Collapse
shrihankp profile image
Shrihan Kumar Padhy

I've used Tailwind CSS and truth be told, there's no way I can write web apps without it. My favourite setup for CSS in production is PostCSS + Tailwind CSS + PurgeCSS + Autoprefixer + CSSNano.

P.S.: Not wanting to ruin the day, but this article is somewhat a copy of this CatsWhoCode article, verbally.

Collapse
pontakornth profile image
pontakornth

I use WindiCSS so I don't need to handle purging.

Collapse
posandu profile image
Posandu

I'm the developer of this framework. It'll be useful

Collapse
abhirajb profile image
Abhiraj Bhowmick Author

thanks for dropping in, will surely give it a try.

Collapse
shapeshapa profile image
shapa

i usually just use material ui because it's just work

Collapse
leouofa profile image
Leonid Medovyy

Semantic UI is a fantastic framework. Very fast to learn with advances theming toolchain. It has been slow at receiving updates, but that has not been the case with its community fork, Fomantic Ui.

Collapse
shareef profile image
Mohammed Nadeem Shareef

I wonder why you haven't mentioned Chakra UI and Material UI?

Collapse
abhirajb profile image
Abhiraj Bhowmick Author

I have mentioned that this list contains my experiences with CSS frameworks. Thank you for dropping your suggestions anyways.

Collapse
line profile image
Chaitanya Prabuddha

SASS is the best.