11 best CSS frameworks

Image for post
Image for post

For any front-end developer, they usually only care about two types of issues the first is time and efficiency, and the other is browser compatibility testing. In order to solve these two types of problems, we need to adopt a suitable web design method to improve the user experience while saving time and increasing efficiency. And CSS is one of such methods.

As a Web design tool, CSS (Cascading Style Sheets, Cascading Style Sheets) can separate the content of the document from the representation of the document, thereby greatly reducing the file transfer volume. At the same time, any changes you make to the CSS style sheet of your website will be automatically reflected on all pages. Therefore, CSS not only provides excellent design consistency, but also provides a variety of format options.

Since CSS is very beneficial to developers and users, how do we choose a CSS framework? Below, I will introduce you to the best 11 CSS frameworks in detail.

1.Bootstrap

As one of the most popular tools, Bootstrap has become the industry’s leading front-end framework in the eyes of web developers. In order to enable Web developers to build different user interface components, Bootstrap can combine CSS, Javascript and HTML codes.

Bootstrap 4 is the latest version of the framework. It comes with updated components, better style sheets, and can make web pages and images in CSS more responsive. In addition, Bootstrap 4 also supports LESS (Leaner Style Sheets) and SASS (Syntactically Awesome Stylesheets).

Generally, Bootstrap can provide common HTML elements including navigation bars, drop-down menus, pagination, and labels in the form of reusable components. You can easily incorporate them into an existing web design without having to start from scratch.

Bootstrap CSS framework usage statistics

  • In the State of CSS survey, it ranked first in the 2020 best CSS framework category.
  • 45% of CSS developers are already using it and want to continue using it.
  • It has 140,000 stars, 687,000 forks, and 1,115 contributors on Github.

Reasons to choose Bootstrap CSS framework

1. Save time

You don’t need to be a professional programmer to use Bootstrap to develop websites. With comprehensive documentation of its front-end framework and built-in ready-to-use components, you can develop the target website faster to free up time to analyze other aspects of complexity.

2. Prevent browser compatibility issues

Cross-browser testing is essential to run and verify the performance of the target website on different devices. Bootstrap 4.0 is compatible with all the latest browsers and ensures that there are no compatibility issues with website elements.

3. Well-maintained code base

As Bootstrap becomes more and more popular, its maintenance team is constantly updating it. At the same time, they will continue to test various technologies and browsers.

4. Better consistency and teamwork

Since the final result of Bootstrap needs to look the same on all browsers and platforms, once a new member of the design team or development team joins, its related documents can facilitate the new members to easily understand all the front-end framework Knowledge to promote better teamwork within the company.

5. The learning curve is gentle

As far as the learning curve is concerned, beginners can easily get started with Bootstrap with the large amount of available documentation. In the process of learning, they can also quickly discover the difficulties.

The Bootstrap CSS framework needs improvement

1. Slower loading time

Bootstrap generates a large number of files, which may affect the loading speed and time of the website. To do this, you must manually delete some content.

2. “One Thousand Stands”

Unless you customize various styles, for simplicity, Bootstrap will cause each website to look extremely similar.

Well-known customers

Twitter, Spotify, Intel, Walmart, Udemy, Mint.

2. Foundation

ZURB designed Foundation in September 2011. Compared with other CSS frameworks, Foundation not only has an advanced and complex interface, but also provides responsive menus and compatibility with various devices and browsers. You can also use the CSS framework to easily set various menu styles as needed.

Thanks to the super-responsive CSS framework, designers can follow the “design-the-site-yourself” approach to have greater control over the project.

Foundation CSS framework usage statistics

  • In the State of CSS survey, it ranks second in the 2020 best CSS framework category.
  • 14.1% of CSS developers are already using it and want to continue using it.
  • It has 28,000 stars, 5.8 thousand forks, and 984 contributors on Github.

Reasons for choosing Foundation CSS framework

1. More unique

Foundation allows you to customize sites that look different from other sites.

2. Reduce CSS Bloat (Bloat)

Because it has built-in basic CSS appearance, it greatly reduces the CSS expansion in HTML.

3. Better grid flexibility

You can easily delete gutters and collapse columns with the help of the “collapse” class. You can also flexibly create equal-sized columns with the help of block-sized grids.

4. Small parts

Foundation can easily place website navigation to the side to hide it. At the same time, you can also get an HTML5 form verification library, a display table based on the price of the subscription product, and options to customize the user experience according to different devices.

What needs improvement in the Foundation CSS framework

1. Time-consuming

It is difficult for beginners to get started with the Foundation CSS framework, and the learning process will be time-consuming.

2. Compromise support

Although it has community support, quality inspection, and related forums, it does not provide a rich front-end framework for developers.

3. Customization complexity

Compared with many other CSS frameworks, developers can customize complex websites.

Well-known customers

EA, Amazon, eBay, Adobe, Mozilla.

3. Materialize CSS

Materialize CSS, based on Google, combines various components such as JavaScript, CSS, and HTML. It not only has a certain responsiveness, but also has fewer browser compatibility issues. If you want to build an elegant UI, Materialize can help you complete a unique website design through a large number of custom CSS and multiple color schemes.

Materialize CSS framework usage statistics

  • In the State of CSS survey, it ranks third in the 2020 best CSS framework category.
  • 17.1% of CSS developers are already using it and want to continue using it.
  • It has 37,000 stars, 48,000 forks, and 250 contributors on Github.

Reasons for choosing Materialize CSS framework

1. Multiple built-in functions

The built-in functions of Materialize include: parallax elements, various cards, streaming text, hover able items and objects, etc.

2. Reduce coding time

Because most of its features are easy to use, Materialize greatly reduces the coding time for developers.

3. Awesome plug-in selection

Collapsible dialog boxes, drop-down menus, multimedia, Modals, and Parallax are all free JavaScript plug-ins provided by Materialize. Developers can easily use them to improve the user interface of the target website.

4. Ease of use

Materialize not only comes with clear documentation, its specific code examples can also help you further understand the front-end framework.

Materialize CSS framework needs to be improved

1. Complex JavaScript components

The JavaScript components of the Materialize CSS framework are difficult for novices.

2. Not enough support

The support community for Materialise is not very mature.

Well-known customers

WPArena, Digital Services, GameRaven, DroneDeploy.

4.Semantic UI

As a full-stack developer, Jack Lukic created the Semantic UI framework using natural language principles. With jQuery and LESS functions, Semantic UI provides a smooth, flat and fine appearance, as well as a lightweight user experience. Although its community is relatively small, its members are enthusiastic and loyal. Their goal is to create a shared UI language to give developers and designers the same rights. Currently, the Semantic UI community has about 3000 themes.

Semantic UI CSS framework usage statistics

  • In the State of CSS survey, it ranks fourth in the 2020 best CSS framework category.
  • 9.2% of CSS developers are already using it and want to continue using it.
  • It has 47,000 stars, 5,000 forks, and 190 contributors on Github.

Reasons for choosing Semantic UI CSS framework

1. Simple and easy to use

The biggest advantage of Semantic UI is that it is very easy to use. You only need to type in what you need, and you can easily incorporate it into the design of the target website.

2. Lots of available themes

The variety of layouts is another advantage of Semantic UI. With different themes, you can easily find the necessary components for various projects.

3. Less time for page design

Because the Semantic UI classes are clear and easy to understand in naming, developers not only save time for learning, but also make the development of the project at hand faster and more intuitive.

The Semantic UI CSS framework needs improvement

1. Browser compatibility test issues

Since Semantic UI does not support IE 7, the compatibility of its browser is not ideal, and it may cause certain defects in the compatibility test.

2. Slow updates

Compared with the frequent updates of other front-end frameworks, Semantic UI has not been updated for a year in 2018–2019.

3. Unresponsive

When running its developed website on some devices, the responsiveness may not be good.

Well-known customers

Snapchat, Accenture, Kmong, Samsviran, Ristoranti.

5. Bulma

As an open source framework based on Flexbox, Bulma has more than 200,000 development users worldwide. It can let developers understand the process of its operation through visual components. The front-end framework provides a cohesive interface for front-end developers through various technologies. In addition, because it uses responsive templates, we can better focus on the content of the website instead of writing code.

Bulma CSS framework usage statistics

  • In the State of CSS survey, it ranked fifth in the best CSS framework category for 2020.
  • 10% of CSS developers are already using it and want to continue using it.
  • It has 39,000 stars, 33,000 forks, and 303 contributors on Github.

Reasons for choosing Bulma CSS framework

1. Innovative and simple design

Bulma makes it easier for developers to create and customize various applications. Its integrated Flexbox responsiveness enables front-end developers to build unique designs.

2. Detailed documentation

Bulma comes with detailed documentation to help developers easily carry out their projects and obtain corresponding support.

3. Versatility

Bulma can provide components such as typesetting, tables, buttons, and tables. These help ensure a solid foundation and high versatility of the framework. In addition, it also contains component schemes such as vertical alignment, layout, and different media objects.

The Bulma CSS framework needs improvement

1. Slower on IE

Even if there are no problems in the browser compatibility test, the CSS framework runs slowly on IE.

2. Niche communities

Being relatively new, Bulma’s community is not as active as frameworks such as Bootstrap.

Well-known customers

Django, Rubrik, XICA magellan, Tam Development, Awesome Stacks, WordPress.

6. UIKit

UIKit is a modular and lightweight front-end CSS framework. It is very suitable for rapid development of those powerful Web interfaces. With the comprehensive collection of CSS, HTML and JS components, it can make the front-end framework easy to extend and easy to customize. UIKit is one of the most widely used front-end frameworks for developing iOS applications. It defines core components such as buttons, labels, navigation controllers, and table views.

UIKit CSS framework usage statistics

  • In the State of CSS survey, it ranks sixth in the 2020 best CSS framework category.
  • 3.27% of CSS developers are already using it and hope to continue using it.
  • It has 15,000 stars, 2.2 thousand forks, and 28 contributors on Github.

Reasons to choose UIKit CSS framework

1. Clear architecture

UIKit has clearly defined rules and concise code.

2. Ready-made themes

You can select the desired theme from the drop-down menu on the website and download its corresponding LESS CSS or SASS file.

3. Modular

The comprehensive design of UIKit allows designers to easily select different components to add to the style sheet. Due to the high degree of modularity of the front-end framework, its addition will not destroy the overall style of the website.

4. Highly customization

With the high degree of customization of UIKit, designers can easily create a new look. Its built-in animation function also increases the interest of the website.

The UIKit framework needs to be improved

1. Lack of learning resources

Because the front-end framework lacks a certain degree of popularity, it is difficult for users to find additional learning resources. All developers must rely on its official documentation.

2. Closed and slow development

UIKit has a long development cycle, and the process of fixing errors is also time-consuming. In addition, because its development is carried out internally, users cannot publicly obtain relevant information.

3. Complex code classes

The nested classes are not only difficult to read, and may not get the expected results.

Well-known customers

LiteTube, AskNicely, Crunchyroll, SolarWinds, Nedwave.

7. PureCSS

PureCSS, developed by Yahoo, provides a set of CSS modules with small size and fast response capabilities. It is very suitable for developing projects with beautiful interfaces and different functions. PureCSS has a fast responsive built-in design and the smallest standardized CSS, and they are all free!

Usage statistics of PureCSS framework

  • In the State of CSS survey, it ranks seventh in the 2020 best CSS framework category.
  • 5.44% of CSS developers are already using it and want to continue using it.
  • It has 20,000 stars, 2.1 thousand forks, and 59 contributors on Github.

Reasons to choose PureCSS framework

1. Can be easily customized

The front-end framework allows designers to customize and build their favorite design style.

2. Browser compatibility test

Thanks to Normalize.css, PureCSS has basically no problems in multiple browser compatibility tests.

3. Scalability

Since designers can easily add new CSS rules without overwriting existing CSS rules, they can customize the appearance according to the actual project.

4. Lightweight and responsive

Its gzip file is only 4.5KB, which is obviously very lightweight. Because PureCSS has a 12-column mobile-first fluid grid, which can support different screen sizes, the website created by it can display pages flexibly according to the user’s device.

The PureCSS framework needs to be improved

1. Not suitable for beginners

PureCSS does not provide a variety of unique styles, nor does it provide customized services, so it is not suitable for beginners.

Well-known customers

SkyQuest Tech Stack, Hacktoolkit, PodcastParty, Wizters, Choobs Ltd.

8. Tailwind

Tailwind is a utility-first framework that can be used to quickly build UI. As a utility-based CSS library, it pays more attention to practicality and speed than those of semantic and lean markup. When creating a website, you only need to determine the scope of the project, without writing CSS yourself. Although Tailwind does not provide a default theme, and you will not find any built-in UI components, you can use the pre-designed widget menu to build the target website.

Usage statistics of Tailwind CSS framework

  • In the State of CSS survey, it ranks eighth in the 2020 best CSS framework category.
  • 4.9% of CSS developers are already using it and want to continue using it.
  • Has 69 stars, 13 forks, and 2 contributors on Github.

Reasons for choosing Tailwind CSS framework

1. The website will not be affected by individual changes

The change of an element does not affect other related elements.

2. Easy to use

Once you are familiar with the syntax, you can easily use Tailwind without having to switch back and forth between style sheets and HTML.

3. Highly customizable

It comes with many customization options and does not preset the appearance of the website.

4. Faster development

Because Tailwind omits the necessary steps to write CSS, its development speed can be greatly increased.

Improvements to the Tailwind CSS framework

1. Not attractive enough for CSS experts

The front-end framework is relatively easy to use for developers who are new to the industry, but for experienced CSS developers, it is not very attractive.

2. Does not support Grid Layout

Even in the 12-column layout, Tailwind does not support grid layout.

Well-known customers

BlaBlaCar, otto-now, Website, Clarisights, JetThoughts, EXR.

9. Ant Design

Ant Design developed by Alibaba is a ReactJS component library of Javascript library type. By dividing the screen area into a 24-column grid, it increases the user’s ability to customize the visible area. At the same time, it meets the requirements of different applications through various filled and outlined icons.

Usage statistics of Ant Design CSS framework

  • In the State of CSS survey, it ranked ninth in the best CSS framework category for 2020.
  • 4.39% of CSS developers are already using it and want to continue using it.
  • It has 69,000 stars, 2.1 thousand forks, and 1,085 contributors on Github.

Reasons for choosing Ant Design CSS framework

1. Support form components

Developers can add TextArea, Input, Radio, Checkbox, Date or TimePicker to FormItem.

2. Excellent feedback components

It can provide instant notification for the user’s various operations.

3. Enterprise-level website appearance

Ant Design can provide developers with an enterprise-level website appearance.

4. Accessibility

It complies with ARIA specifications and provides functions such as keyboard processing and tabulation.

5. Save time

Its prototyping method can save a lot of development time.

The Ant Design CSS framework needs improvement

1. Lack of English documentation

The original document is only available in Chinese, and of course the community provides a good translation service.

Well-known customers

Ant Financial, Alibaba, Tencent, Baidu, Word of Mouth, Meituan.

10. Tachyons

Unlike other popular front-end frameworks, Tachyons aims to decompose CSS rules into small, manageable, and reusable components. Tachyons can help developers create highly readable, fast loading and responsive websites without using a lot of CSS code.

Usage statistics of Tachyons CSS framework

  • In the State of CSS survey, it ranks tenth in the best CSS framework category for 2020.
  • 4.13% of CSS developers are already using it and want to continue using it.
  • It has 97,000 stars, 611 forks, and 64 contributors on Github.

Reasons to choose Tachyons CSS framework

1. Easy to use

Since there is no steep learning curve, beginners can easily learn and use it.

2. Fully customizable

Tachyons includes a large number of customizable CSS modules. Since there are no complex dependencies in its modules, it is easy for developers to customize.

3. Do not obey the default style

Since different classes have corresponding variants on different screen sizes, developers can control the layout of the page without having to stick to the default style.

4. Rapid prototyping

Since the effect of the website can be demonstrated with a minimal design, Tachyons is very suitable for prototype production.

5. Good documentation

The Tachyons document is not only well structured, but also easy to understand by developers.

Improvements to the Tachyons CSS framework

1. Lack of innovation

The default settings are not enough to allow users to create a website with a unique look.

2. Slow down the development process

Tachyons’ complex class names and structures may slow down the development process.

Well-known customers

Everlane, CrewFire, Agema, guac.live.

11. Primer

Thanks to the world’s largest developer community — Github, Primer adopts a system-level approach to ensure consistency of styles such as layout, spacing, and color. Therefore, Primer not only has a simple framework, but also brings a consistent experience to users.

Primer CSS framework usage statistics

  • In the State of CSS survey, it ranked 11th in the best CSS framework category for 2020.
  • 0.62% of CSS developers are already using it and want to continue using it.
  • It has 92,000 stars, 15,000 forks, and 77 contributors on Github.

Reasons for choosing Primer CSS framework

1. Customizable style

Primer provides font styles of various sizes and thicknesses. Accordingly, developers can enhance the readability and attractiveness of the website by creating styles.

2. Excellent color scheme

By providing an excellent color scheme, Primer can increase the expressiveness of the content. Its color tools and variables can also provide developers with style options for various themes without being tied to a specific structure.

3. Combinable pitch ratio

It provides combinable base-8 spacing, which can closely match the content of Github. The filling interval and margin can ensure the consistency of the horizontal and vertical directions.

What needs improvement in the Prime CSS framework

1. Lack of popularity and reviews

Primer is not as popular as other products. Since few users have used the CSS framework, there are not enough comments to help new users make a determination to try.

2. Insufficient community support

Because Primer has a small user base, its community support is insufficient.

Well-known customers

My Stack, timelog, g59 Ranking, Complete Toolset.

The 11 CSS frameworks I mentioned above each have their advantages and disadvantages. You can choose according to the needs of the actual project. Of course, please pass the test first to ensure that the framework you use does not have any CSS or HTML browser compatibility issues.

Written by

Digital Nomad

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store