CSS Frameworks

A CSS framework is a pre-prepared library of code to help implement fast and consistent website styling and layouts. Frameworks include pre-written, reusable code for common design elements and components that can be easily applied to base HTML to create familiar and consistent user interfaces or website designs

Bootstrap

https://getbootstrap.com/

Bootstrap began as a side project built and shared by developers at Twitter. Now it’s the most widely-used CSS framework for responsive, mobile-first web design. 

Key features:

• Responsive grid system
• Pre-built UI components
• Customizable and extensible themes
• Extensive documentation

Tailwind CSS

https://tailwindcss.com/

It is a utility-first CSS framework.

Tailwind is perhaps as much a movement as it is a framework.

• Building complex components from a constrained set of primitive utilities. https://tailwindcss.com/docs/styling-with-utility-classes
• Responsive design https://tailwindcss.com/docs/responsive-design
• Daisy UI It is a plugin that builds on-top of Tailwind CSS giving you a set of classes that feels more reminiscent of Bootstrap. DaisyUI adds component class names to Tailwind CSS (make websites faster) https://daisyui.com/

Component & template collections

• daisyUI is a popular opensource Tailwind CSS component library with over 28k Github stars and about 9 million npm downloads. daisyUI adds classes such as btn and card to Tailwind CSS for all common UI components. This allows us to concentrate on the most critical aspects of each project rather than creating basic elements for each one.

• Flowbite is an open source component library that uses Tailwind CSS utility classes to create components. It offers over 400 components and interactive elements, as well as dark mode support and a Figma design system.

Others: Tailwind CSS component and template collections https://medium.com/@faizanrafique/12-best-tailwind-css-component-and-template-collections-68e08a7deb47

Materialize

https://materializecss.com/

Materialize CSS framework is based on Google’s Material Design principles. It emphasizes bold visual design and UX-focused animation (motion).