The State of CSS 2019: CSS Frameworks

English

CSS Frameworks

For years the debate has raged on: should you use UI toolkits like Bootstrap, or is that “cheating”? Will all websites end up looking the same? And will designers end up being useless?

In 2019, it's safe to say the debate has been settled, and the frameworks have won. Bootstrap has kept up with the times and generated a huge ecosystem of various themes and plugins, while Google's Material Design has helped popularized its own specific aesthetic.

And while the utility-class-focused approach of new frameworks like Tailwind CSS make you question everything you know about writing “proper” semantic CSS, its 81% satisfaction ratio means that it might be time to reconsider our old preconceived notions…

Rankings

Awareness, interest, and satisfaction ratio rankings. Note that these three ratios all correspond to the same point in time.

Awareness (Total Respondents - Never heard)/Total Respondents

Interest Interested/(Interested + Not interested)

Satisfaction Would use again/(Would use again + Would not use)

Usage by Years Of Experience

The “overall” column shows overall usage for each technology (respondents who selected “would use again” or “would not use again”), while the following columns show the usage ratio for each “years of experience” bracket.

A brighter pink background indicates a higher-than-overall-average ratio for a given bracket.

Years of Experience

Bootstrap

82.3%

65.64%

80.56%

88.67%

87.73%

87.21%

84%

Materialize CSS

27.66%

19.38%

31.56%

34.98%

30.8%

25.26%

24%

Foundation

25.57%

5.29%

11.7%

26.28%

36.29%

38.58%

35.29%

Semantic UI

14.79%

12.78%

15.26%

16.26%

15.84%

13.77%

14.82%

Bulma

12.58%

8.81%

14.84%

15.74%

14.74%

10.97%

10.35%

PureCSS

7.61%

3.52%

7.52%

8.11%

8.56%

8.06%

9.88%

Ant Design

6.4%

2.64%

7.63%

9.55%

8.7%

5.65%

4.24%

UIKit

5.53%

2.64%

4.81%

5.72%

6.43%

6.3%

7.29%

Tachyons

5.52%

3.52%

4.6%

5.13%

6.9%

7.34%

5.65%

Tailwind

4.98%

2.2%

3.34%

5.75%

6.48%

7.18%

4.94%

Primer

1.36%

1.32%

0.94%

1.03%

1.94%

1.53%

1.41%

Difference from overall usage:

-20%-10%0+10%+20%

Usage by Salary Range

A brighter pink background indicates a higher-than-overall-average ratio for a given bracket.

Salary Range (USD)

Bootstrap

84.37%

73.73%

85.12%

88.25%

87.09%

87.15%

89.53%

79.7%

Materialize CSS

30.24%

29.27%

34.88%

32.86%

31.28%

27.74%

29.3%

26.32%

Foundation

28.77%

16.32%

19.4%

27.18%

31.94%

36.26%

38.72%

31.58%

Semantic UI

16.9%

14.45%

14.64%

14.72%

14.46%

14.54%

19.2%

26.32%

Bulma

14.36%

15.2%

15.24%

14.67%

15.31%

13.31%

10.97%

15.79%

PureCSS

9.04%

7.32%

9.29%

9.15%

8.03%

7.18%

8.79%

13.53%

Ant Design

8.12%

3.94%

8.21%

9.66%

7.72%

7.09%

8.17%

12.03%

Tachyons

6.62%

6.57%

3.93%

3.63%

5.59%

7.56%

9.29%

9.77%

UIKit

6.42%

5.82%

7.5%

6.85%

5.86%

5.52%

5.86%

7.52%

Tailwind

5.26%

7.05%

6.42%

6.23%

6.02%

Primer

1.72%

1.69%

1.19%

0.97%

1.64%

1.46%

2.06%

3.01%

Difference from overall usage:

-20%-10%0+10%+20%

Bootstrap

Completion Percentage: 99.23% (11230)

Percents%CountΣ

I've USED it before, and WOULD use it again44.98%

I've USED it before, and would NOT use it again41.2%

I've HEARD of it, and WOULD like to learn it2.21%

I've HEARD of it, and am NOT interested10.75%

I've never heard of it0.09%

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Materialize CSS

Completion Percentage: 99.26% (11233)

Percents%CountΣ

I've USED it before, and WOULD use it again17.05%

I've USED it before, and would NOT use it again12.76%

I've HEARD of it, and WOULD like to learn it15.45%

I've HEARD of it, and am NOT interested26.38%

I've never heard of it27.62%

Materialize, a CSS Framework based on Material Design

Ant Design

Completion Percentage: 99.19% (11225)

Percents%CountΣ

I've USED it before, and WOULD use it again4.39%

I've USED it before, and would NOT use it again3.27%

I've HEARD of it, and WOULD like to learn it9.89%

I've HEARD of it, and am NOT interested15.67%

I've never heard of it65.97%

🌈 A UI Design Language and React UI library

Semantic UI

Completion Percentage: 99.05% (11209)

Percents%CountΣ

I've USED it before, and WOULD use it again9.23%

I've USED it before, and would NOT use it again5.94%

I've HEARD of it, and WOULD like to learn it21.35%

I've HEARD of it, and am NOT interested25.71%

I've never heard of it36.82%

Semantic is a UI component framework based around useful principles from natural language.

Bulma

Completion Percentage: 99.17% (11223)

Percents%CountΣ

I've USED it before, and WOULD use it again10.04%

I've USED it before, and would NOT use it again3.57%

I've HEARD of it, and WOULD like to learn it14.54%

I've HEARD of it, and am NOT interested20.96%

I've never heard of it50.06%

Modern CSS framework based on Flexbox

Foundation

Completion Percentage: 99.1% (11215)

Percents%CountΣ

I've USED it before, and WOULD use it again14.1%

I've USED it before, and would NOT use it again17.22%

I've HEARD of it, and WOULD like to learn it13.2%

I've HEARD of it, and am NOT interested33.82%

I've never heard of it20.76%

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.

UIKit

Completion Percentage: 98.86% (11188)

Percents%CountΣ

I've USED it before, and WOULD use it again3.27%

I've USED it before, and would NOT use it again2.74%

I've HEARD of it, and WOULD like to learn it11.52%

I've HEARD of it, and am NOT interested22.21%

I've never heard of it59.12%

A lightweight and modular front-end framework for developing fast and powerful web interfaces

Tachyons

Completion Percentage: 98.9% (11193)

Percents%CountΣ

I've USED it before, and WOULD use it again4.13%

I've USED it before, and would NOT use it again2.1%

I've HEARD of it, and WOULD like to learn it10.21%

I've HEARD of it, and am NOT interested16.36%

I've never heard of it66.1%

Functional css for humans

Primer

Completion Percentage: 98.6% (11159)

Percents%CountΣ

I've USED it before, and WOULD use it again0.62%

I've USED it before, and would NOT use it again0.86%

I've HEARD of it, and WOULD like to learn it4.57%

I've HEARD of it, and am NOT interested12.03%

I've never heard of it80.53%

The CSS design system that powers GitHub

Tailwind

Completion Percentage: 98.98% (11202)

Percents%CountΣ

I've USED it before, and WOULD use it again4.9%

I've USED it before, and would NOT use it again1.13%

I've HEARD of it, and WOULD like to learn it13.98%

I've HEARD of it, and am NOT interested13.96%

I've never heard of it65.01%

A utility-first CSS framework for rapid UI development.

PureCSS

Completion Percentage: 99.14% (11220)

Percents%CountΣ

I've USED it before, and WOULD use it again5.44%

I've USED it before, and would NOT use it again2.67%

I've HEARD of it, and WOULD like to learn it13.57%

I've HEARD of it, and am NOT interested17.26%

I've never heard of it60.2%

A set of small, responsive CSS modules that you can use in every web project.

Links

« Previous: Pre & Post Processors Next: Methodologies »