8 CSS Frameworks to create wonderful websites.
Tags: css, beginners, webdev, programming
Published: 2022-12-18 20:46:53

Using CSS for styling can get tedious for developers as we progress and build sophisticated websites, we need something with less code and more functionality (styling). 

This is why CSS frameworks are built and used, here is a list of Eight (8) best frameworks:

- [Material UI](https://mui.com/)
Material UI (MUI) is said to offer a comprehensive suite of UI tools to help you ship new features faster. 
Material UI is used by big organizations such as; Spotify, Unity, Nasa, Netflix e.t.c

To Install MUI

```
npm install @mui/material @emotion/react @emotion/styled
```

![MUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olmznpozxmh4o3yrn4pq.png)_MUI Homepage_






- [Foundation](https://get.foundation/)
The most advanced responsive front-end framework in the world.
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.(From their official website).Foundation is used by big organizations such as; Disney, Samsung, Adobe, National Geographic, e.t.c

To Install

```
npm install foundation-sites

//or//

yarn add foundation-sites
```

![Foundation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70bu64babsmyxx2xa489.png)_Foundation Homepage_






- [Bulma](https://bulma.io/)
Bulma is a free, open-source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.CSS Knowledge is not needed when using bulma.

To Install

```
npm install bulma 
```

![Bulma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnhhpun1oq7t0nmujqz6.png)_Bulma homepage_





- [Tailwind CSS](https://tailwindcss.com/)
Tailwind CSS rapidly builds modern websites without ever leaving your HTML. This is interesting as you just write styles in classes of div tags, awesome right?!

To install 

```
npm install -D tailwindcss
npx tailwindcss init
```

![css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqi78z93xnl2m931f3e3.png)_Tailwind Homepage_




- [Bootstrap](https://getbootstrap.com/)
Bootstrap is a powerful, extensible, and feature-packed frontend toolkit. With Bootstrap you can build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

To install

```
npm i bootstrap@5.2.3

```

![bootstrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qiqs2xypdc9aju8caqeu.png)_Bootstrap Homepage_





- [Chakra UI](https://chakra-ui.com/)
Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. With Chakra UI you spend less time writing UI code and more time building a great experience for your customers.

To install

```
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

or

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

or

pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion
```

![chakra](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jqkykp5gampsbliq4cn.png)_Chakra UI homepage_




- [Headless UI](https://headlessui.com/)
Headless UI has completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
This is also created  by tailwind Labs

To Install

```
npm install @headlessui/react
```

![headless ui](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3dcijk7vv0dngay9gg9.png)_Headless UI Homepage_





- [Semantic UI](https://semantic-ui.com/)
Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

To Install
```
npm install semantic-ui --save
cd semantic/
gulp build

```

![semantic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6f05yfhitp4cy662uit.png)_Semantic UI Homepage_



There are lots more that are also good to build super websites, but the trick to choosing the best is... _no trick_, just go with the one you feel will work with you well after thorough research.