Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Using a responsive CSS framework helps us reduce a lot of work by eliminating the need to write repetitive CSS styles and improving development efficiency. And there are plenty of open source CSS frameworks available today. All of the things I’ve listed below are free and open source. Let us know if you have a better option in the comments section.

1. Bootstrap

Bootstrap is the most widely used CSS framework. It is free and open source and is still used by millions of websites.

Main features:

  • Support for SASS variables and Mixins
  • Support for responsive grid systems
  • There are many built-in components to use
  • Jquery-based powerful plug-in

2. Tailwind

Tailwind is a relatively new CSS framework that, unlike other frameworks, does not provide built-in components, but rather provides a number of basic utility classes that we can use.

For example

<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
  Button
</button>
Copy the code

By writing the base class provided by Tailwind on button’s class, you can implement a nice button.

Compared to Bootstrap, it is more flexible and we can implement different button styles. Unlike Bootstrap, the buttons on each site are similar without changing the default styles. Bootstrap can be seen at a glance.

But its long class is also a headache, a bit like writing style directly. Do you like this framework? Feel free to share your thoughts in the comments section

<ul class="space-y-4">
  <li>
    <div class="w-64 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
  </li>
  <li>
    <div class="w-56 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
  </li>
  <li>
    <div class="w-48 h-3 bg-gradient-to-br from-fuchsia-500 to-purple-600"></div>
  </li>
</ul>
Copy the code

3. Bulma

Bulma is only 21KB after Gzip, it is built with a mobile-first mentality, every element is optimized for vertical reading, and its grid system is implemented entirely by Flexbox.

Bulma is also built using SASS, so we can just import the parts we need for our project.

4. UI Kit

UI Kit is a lightweight, responsive CSS framework for rapid web application development.

UI Kit is simple to use, provides a grid system, custom ICONS, components, animations, and more, and is compatible with Less and Sass.

5. Semantic UI

A Semantic UI has a lot in common with Bootstrap, with its Semantic HTML structure and class naming. Jquery-based plug-ins are also provided for dynamic functionality.

6. Spectre

The lightest CSS framework, only 10KB after Gzip, provides basic design components based on Flex layout with responsive and mobile-first features.

Compared with the large and comprehensive framework of Bootstrap, this small and lightweight framework can also be used for simple Web applications.

conclusion

All frameworks have different advantages and disadvantages, and we can choose the appropriate CSS framework according to the actual needs of the project to help us quickly build Web applications.

My insights are limited and this list is just the tip of the iceberg, if I missed some great frameworks to use, feel free to comment and let everyone know about it.

Think the article is good, welcome to pay attention to the public number (click attention), update a useful content every day.