2022 trend CSS framework recommended by corporate engineers

What is a CSS framework #

As web technology evolved, front-end development started using frameworks that made development more productive and efficient. For example, for JavaScript, Vue/Angular/React, for PHP, Laravel/ Cake, Zend, etc. exist.

By using a framework, it is possible to code in a consistent manner, resulting in a highly maintainable project. CSS is no exception, and using frameworks has become the norm for many front-end developers.

However, when it comes to choosing a CSS framework, the choices are too vast. Most engineers will spend some time researching the pros and cons of using a framework.

So, here are some recommended frameworks when choosing a CSS framework in 2021. I hope it will help many people.

Bootstrap #

When it comes to using CSS frameworks, I wouldn’t rule this out. It has been used and developed by so many engineers.

It is a framework that was developed and used at Twitter in 2011 that made it very easy for front-end developers to develop responsive web design.

Since its release, Bootstrap has undergone numerous updates and has evolved to support CSS design for modern projects.

Front-end developers can use several features of that evolution for free.

merit

1. Most Popular CSS Frameworks I think it’s safe to say that it’s the most used CSS framework right now. Therefore, you can quickly find a solution to any problems encountered in your project. For many front-end engineers, this benefit will be of great help.
2. Distribution of many development templates See the sample on the official site. https://getbootstrap.jp/docs/5.0/examples/ There are so many templates out there to help you develop your project. It is free to use. Also, by using the paid version, you can find a lot of premium templates, which can be expected to shorten the project development period.
3. Easy customization Sometimes it’s a disadvantage that it’s been used a lot. Your hard-earned web application will end up with a mediocre design and a lack of character. However, it is certain that selfish customization will cause problems. Bootstrap doesn’t have that problem. Bootstrap can be easily customized using SASS. Install the components you like, use SASS variables for the parts you don’t like, and customize them to your liking.
4. Mature support born from many years of time Bootstrap is no longer the product of one company. It is maintained by hundreds of developers and multiple communities. Therefore, it is unthinkable that support will be interrupted in the middle of introducing Bootstrap to the project.

Demerit

1. Difficult to override I have rules for myself when developing CSS parts. Don’t put !important when developing CSS parts. Because the !important can only be a disadvantage when there are co-developers. Bootstrap is made up of great CSS parts by great developers. Bootstrap developers use !important extensively, though I don’t know what their intentions are. This makes even minor changes like changing the CSS text color very difficult.
2. Ordinary design As I touched on the advantage of “easy customization”, the fact that there are many users means that the default design is mediocre. Bootstrap provides useful CSS parts and they are very easy to use, but their CSS part designs are very popular. Therefore, people with a little knowledge will find out that it is a website made with Bootstrap in an instant. It makes me feel the subtle irritation of when my friend finds out where I bought the clothes I’m wearing.
3. Heavy file size People who build websites care about the reputation of their sites. These days, more and more people are looking into things like SEO, and they investigate whether those metrics are important to them. Site speed is an SEO evaluation metric. On the mobile site, one second is the display speed, and the bounce rate fluctuates significantly. Based on that point, I will describe cruel things. “Pages with Bootstrap are heavy”. Bootstrap has a lot of features and including all of them in your project would make it very unresponsive. Of course, you can import and use only the features you need, but if speed is what you’re looking for, other CSS frameworks are a better choice.

template

<!doctype html>
<htmllang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <Link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/bootstrap.min.css" rel = "styleHeet" Integrity = "SHA384-1" BME4KWBQ78IYHFLDVKUHFTAU6AUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUS somesh some >

    <title>Hello world!</title>

  </head>
  <body>
    <h1>Hello world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin=" anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous "></script>
    -->

  </body>
</html>

Author Rating

It has been updated from V4 to V5 and now has stable component availability. Since jQuery was used internally in V4, it was very unresponsive when displayed on a smartphone. With a 4G line, a total response time of 10 seconds was required, and it was not user-friendly.

However, since the update to V5, jQuery has switched to plain JavaScript, which has improved responsiveness and made it easier to use than before.

Bootstrap is used in various projects, and I have actually used it in a project myself, so I would recommend it to beginners. The knowledge of the grid system learned in Bootstrap is often used in other CSS.

How about using it for creating mocks for startup projects or for personal development?

Tailwind CSS #

First let me say that the Tailwind framework is not recommended for beginners who do not understand basic CSS usage. Because the degree of freedom is too high, it is difficult to understand what to operate.

This articulates the idea of ​​Tailwind CSS as “a lightweight framework that gives freedom to developers”.

Tailwind CSS does not provide complete design parts, it consists of utility classes that make CSS coding unnecessary.

Many experienced front-end developers will join hands in prayer for its powerful features.

merit

1. Atomic CSS Normally when using CSS, you create a CSS class that suits specific parts such as text color and element placement, and reflect it in HTML. Tailwind CSS provides powerful utility classes that allow developers to create their own web designs by simply adding their own HTML elements.
2. Good compatibility with existing projects Using other CSS frameworks usually leads to potential conflicts with pre-built CSS parts. But Tailwind CSS is a free framework. There are no CSS parts provided and no designs provided, so there are no conflicts in existing projects and no existing designs are broken.
3. Reusable components Tailwind allows you to design your design on a component-by-component basis and create your own custom components that can be reused across projects. Some custom components are provided by volunteers and official, so let’s take a look.
   1. Official site
   2. Tailwind CSS Cheat Sheet
   3. tail-animista
4. Don’t worry about class names If you have ever coded, not just CSS, I think that “how to name” is a problem that you will definitely pass through. In many cases this will take several minutes. Tailwind eliminates that need. Because the name has already been decided.
5. Safe changes If you create a class with CSS, in many cases you will want to reflect it in multiple components instead of just one. This is generally an advantage, but it can also be a disadvantage. Because not everyone knows the extent to which the change will affect them. With Tailwind, you don’t have to worry about that. This is because we will be creating designs in inline styles.

Demerit

1. Not for beginners After all, Tailwind CSS is a free framework. Freedom naturally requires knowledge to handle it. Unlike other frameworks, it will be a heavy burden to use in a state where CSS knowledge is shallow.
2. Learning costs The initial learning cost is high even if you are not a beginner. This is because you have to memorize the class names that exist in Tailwind to some extent.

template

<!doctype html>
<html>
<head>
  <!-- ... -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/tailwind.css" rel="stylesheet">
</head>
<body>
  <!-- ... -->
</body>
</html>

Author Rating

If you were an engineer, I’m sure naming would come up as a problem that you would run into. Me too, I spend a lot of time on naming.

Because naming conventions vary from project to project, some are clearly documented, others are not documented at all.

If it is the former, it will be solved by using time, but if it is the latter, it will be difficult. Because no one has thought about naming conventions for the project, and there is no correct answer. In that case, what would happen would be a name that strongly reflects each thought, religion, etc. And many of them will pile up later and become a problem.

The class names are pre-determined to the great advantage of Tailwind. When it comes to CSS, using this reduces naming headaches.

Foundation #

Foundation is the second most popular framework after Bootstrap.

A peerless framework for all devices, media and accessibility. Foundation can be used not only as a framework, but also as a simple tool, and can coexist with other CSS frameworks.

There is also Foundation-sites, a document project that supports development with Foundation, and it can be customized, so it is sure to be useful for creating documentation for your own project.

Foundation also provides powerful services when you want to express animation with CSS. It’s called Motion UI, and you’ll be able to express even the most difficult animations in no time.

A feature not found in other CSS frameworks, it has the necessary assets to create responsive HTML emails. It’s called Foundation for Emails and is supported by a development team.

1. Easy customization Foundation is a free CSS framework. A little research will reveal that it is a highly customizable framework. Therefore, it is less likely to become a common design like Bootstrap, and it is possible to create a self-made and original design on a rich document.
2. Powerful and rich components Foundation is a mature CSS framework. An excellent development team has already created the necessary components for Web services, and users can use them simply by embedding them. The development team also documents how to use those components.
3. Support email design If you’ve ever designed an email, you know how difficult it can be. Foundation also supports creating email templates.
4. Simplified animation creation The Foundation development team also supports animations to give your web services special behavior. This is provided by MotinUI and we can accept the benefits for free.

Demerit

1. Not for beginners Foundation is the second most popular CSS framework after Bootstrap. Just Bootstrap is more complex and has more options. Therefore, it is necessary to study from scratch what kind of functions exist. For this reason, it is definitely not for beginners. However, I do not deny that people who have learned CSS to some extent use it because they want to go one step higher.
2. JavaScript dependency Much of Foundation’s functionality uses jQuery or Zepto and relies on JavaScript. In today’s climate, JavaScript-dependent CSS frameworks like this are an abomination and never a benefit. This is because the possibility of conflict cannot be discarded when incorporating into React, Angular, or Vue, and it also affects the site speed. Also, it would be nice to be able to get out of the dependency on the way like Bootstrap, but there is no such information at the moment, so you should consider that point when using it.

template

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <link rel="stylesheet" href="css/foundation.css" />
  </head>
  <body>
    <h1>Hello world!</h1>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

  </body>
</html>

Author Rating

When choosing a CSS framework, I think one of the points to consider is whether or not it will result in a mundane design.

Many designers don’t want to know which framework they’re using. At least I am.

Foundation is a great alternative when you don’t like the run-of-the-mill Bootstrap design. Because there are many parts where Bootstrap’s knowledge can be used as it is, I think that if you are a beginner who has just learned Bootstrap, you should try using Foundation first.

Installation is not that difficult. Get started now.

Bulma #

Worried about the disadvantages of Bootstrap? Use Bulma. This is a great alternative to Bootstrap.

Bulma combines breakthrough ease of use with amazing design components created by the Bulma development team by simply importing them into your project.

What makes Bulma so highly rated is its simple syntax and extremely lightweight yet attractive design that doesn’t look too generic.

This is the CSS design framework we recommend for those looking for site speed and simple design.

merit

1. Simple design Bulma is very simple compared to other CSS frameworks. If you take a look at the official website, I think you can feel it. Creating with Bulma guarantees a very nice looking and usable design.
2. Customization ready Bulma uses SASS variables to customize your website on the fly. It also helps unify important elements of design such as padding and default colors.
3. Dependent module does not exist Bulma does not have JavaScript functionality. Bootstrap version 4 and Foundation mentioned above and modules such as jQuery are used as modules that support their design, which is basically a disadvantage in many cases. Because it has the potential to break your Vue, React, Angular, etc projects. Bulma has no dependent modules. Integrate it into your JavaScript projects as often as you like.

Demerit

1. Too simple design Advantage 1 describes favorably for simple design, but it is also a disadvantage. Because the design is too simple, it may become a mediocre web page like Bootstrap. Avoid using only Bulma’s CSS parts.
2. Poor documentation and support Bulma has the potential to compete with other CSS frameworks, but that doesn’t guarantee support for the Bulma framework. The documentation doesn’t say exactly what the minimum usage is, and leaves no room for free support.

template

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

Author Rating

To be added

UIkit #

A well designed and extremely lightweight CSS framework.

Since my personal impression is strong, I would like you to read the next sentence as a reference, but I have the impression that it is used by engineers who are tired of Bootstrap.

UIKit provides all the popular CSS design parts these days, and it works very light and fast.

merit

1. Large number of components UIKit has dozens of CSS components created by talented developers. It’s very easy to use and can be implemented in your web service right away.
2. Expansion ready UIKit can be easily customized and extended using LESS or SASS variables.
3. Providing an excellent customized site Many engineers struggle with designing websites. You may be happy by using the customizer site provided by UIKit. This site customizes various components and provides them as CSS.

Demerit

• Extensive documentation UIKit is difficult for beginners to handle due to its large number of components. That’s a very painful fact for inexperienced developers, and it stands in their way. Also, if your project is going to be small, other frameworks may be more suitable.
• thin awareness Currently, it is less well known than other CSS frameworks. It can be very detrimental. It’s hard to get insight on how to fix bugs in your project and how to best use it.

template

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/uikit.min.css" />
        <script src="js/uikit.min.js"></script>
        <script src="js/uikit-icons.min.js"></script>
    </head>
    <body>
    </body>
</html>

Author Rating

To be added

pure css #

It’s a lightweight CSS framework that comes standard with a grid system.

This lightweight framework is only 3.7KB including all modules and components, which gives you the best advantage in site speed.

Reusable, this component can be easily implemented in your project.

merit

1. Extremely lightweight This framework has been carefully crafted to be lightweight from the implementation stage. It provides the most performant behavior in any CSS framework.
2. Customizable Even with all the modules and components, it’s still very light, but it can be made even lighter. You can implement only the functionality you need in your project. It works very stably.
3. Strong support Yahoo supports this framework. That fact will bring safety to your development if the project is long-term.
4. Existing components exist When using Pure, you can use already created CSS parts. You don’t have to think about difficult things. Now you can copy and paste it into your project.
5. Easy to learn If you have some knowledge of CSS and HTML, it shouldn’t be too difficult. It’s because it’s very efficient and doesn’t have too many features.

Demerit

1. Lack of documentation Pure.css is a new CSS framework, for better or worse. The documentation is not complete yet, and there is little reference from volunteer blogs. Therefore, consult your tech stack and English proficiency before deciding whether to use Pure.CSS.
2. Lack of components Pure.css is out of the selection if you want to start up the product using the components that are prepared to some extent. Pure.css has only bare minimum components.

template

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous" >
    </head>
    <body>
    </body>
</html>

Author Rating

To be added

Tachyons #

A responsive, lightweight and readable CSS framework.

The development team of Tachyons cites the strengths of this CSS framework as the ability to develop highly accessible and reusable CSS components.

This Tachyons framework is very lightweight and well documented, so the hurdles to use are low.

merid

1. Abundant components Tachyons contains excellent utility classes and CSS components to help develop web applications. Very easy and ready to use method.
2. Reusability Tachyons is developed by excellent engineers to make it highly reusable. This could be an option if you want to develop CSS components that can be used in many places.

Demerit

1. Weak perception Unfortunately, Tachyons is not so well known, and it cannot be said that it is popular. Its unpopularity makes it difficult to find information and effective development methods for the necessary bugfixes.

template

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/>
    </head>
    <body>
    </body>
</html>

Author Rating

To be added

Milligram #

A lightweight CSS framework for creating base designs.

Unlike other CSS, you can create your site design from scratch. The result is high performance and overwhelming productivity.

merit

1. Lightweight and nimble Milligram is very lightweight as the name suggests. It’s lightweight and comes with a variety of features for free that will help you be more productive. It is also gzip-compressed to give the user a response as low as 2kb.
2. freedom Milligram has no default styles and builds from scratch. Therefore, there is no need to forcibly change the design that does not suit the project by selecting the necessary functions with properties. Overriding doesn’t introduce bugs either.
3. Easy to use even for beginners Milligram is very simple. Therefore, there is little to remember, and it is easy for beginners to learn.

Demerit

1. No template Other CSS is developed by excellent engineers, ready-made templates exist, but this CSS framework does not exist. If you don’t have time for front-end development, this framework is not for you.

template

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Google Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
        <!-- CSS Reset -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
        <!-- Milligram CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
        <!-- You should properly set the path from the main file. -->
    </head>
    <body>
    </body>
</html>

Author Rating

To be added

Materialize CSS #

Advocated by Google, Material Design is the design pattern of choice for many websites and managed themes.

Materialize CSS is a strong candidate for selection to create that great material design.

Materialize CSS provides excellent CSS parts for creating Material Design, and also has Material Design-like animations. Developers leave the effort of creating Material Design to this framework, giving users a visually pleasing web design experience.

merid

1. Support Material Design Since material design was proposed by Google, the number has increased rapidly. It had a very good design and great usability. Materialize CSS has strong support for that good design pattern.
2. Tons of off-the-shelf components Materialize CSS has a large collection of CSS components that support the creation of Material Design. Developers can use it to reduce development time.
3. Mobile design support Of course, mobile sites can also be material-designed. It is guaranteed to be extremely easy to develop with components such as navigation and swipe interactions.

Demerit

1. Support for Material Design only Not suitable for anything other than material design. Let’s target another framework. There are pros and cons.
2. No corporate support Unfortunately the company does not support this framework. Strong information should be sought from the community.

template

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    　　<!-- Compiled and minified CSS -->
    　　<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
　　<!-- Compiled and minified JavaScript -->
    　　<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </head>
    <body>
    </body>
</html>

Author Rating

To be added

Skeleton #

Skeleton is a very lightweight CSS framework and is a great choice if you want your website to be simple and lightweight.

Skeleton is very simple and easy to use and operate without the complexity of other frameworks.

Skeleton is the best choice for beginner developers who are not familiar with website creation.

merit

1. Super lightweight The source code that makes up Skeleton has the bare minimum of components in just 400 lines. This makes it a very lightweight and minimal framework.
2. Off-the-shelf components It has all the popular CSS framework components, including grid systems, buttons, typography, lists, forms, and more.

Demerit

1. Not suitable for large or creative projects Not for you if you want to create a large or creative website. That’s because Skeleton provides only the bare essentials to create a website.

template

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/css/normalize.css" />
    <link rel="stylesheet" href="/css/skeleton.css" />
  </head>
  <body>
    <!-- content -->
  </body>
</html>

Author Rating

To be added

Tacit #

Tacit’s trademark is a cute logo like Pac-Man.

By the way, what kind of design pattern do you plan to use for your project?

Graphic design is one of the trending design patterns these days. If you want to create a graphic design site, Tacit will make you happy.

If you don’t know about graphic design, check out the site below. ** “[Introduction of 16 reference design sites for graphic designers] (https://www.shutterstock.com/ja/blog/best-design-inspiration-blogs-for-designers)” **Let your curiosity take over and install Tacti if you feel like it.

Since it depends on the design pattern of the CSS framework to be used basically, it is a place where you want to choose the CSS framework to be selected properly.

merit

1. The pinnacle of graphic design Currently, there is no CSS framework dedicated to graphic design. Tacit is packed with know-how for building graphic designs.

Demerit

1. Immature Tacti is a recently released CSS framework. So support isn’t perfect, and CSS components aren’t perfect either.

template

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yegor256/tacit@gh-pages/tacit-css-1.5.5.min.css"/>
  </head>
</html>

Author Rating

To be added

lastly #

Development using CSS frameworks is a must these days. Because you can create great designs in a short amount of time. If you are an engineer, take full advantage of this advantage.

Although there are other CSS frameworks than those on this list. There are 10 CSS frameworks above that I would recommend. If you have time, you may want to look into other options as well.

Each CSS framework has its pros and cons, and you have to consult with the project to decide which one to take advantage of.

If you do not belong to any project and develop by yourself, I recommend using Bootstrap5 without thinking anything.

We hope you can choose the best CSS framework.