17 common responsive web ui frameworks

Posted by millikan at 2020-04-05

Bootstrap is a front-end toolkit for rapid development of web applications. It is a collection of CSS and HTML. It uses the latest browser technology to provide you with fashionable layout, forms, buttons, tables, grid systems and so on. Official website:

Foundation is an easy-to-use, powerful and flexible framework for building web applications based on any device. Provides a variety of UI components on the web, such as forms, buttons, tabs, and so on. Official website:

Skeleton is a small collection of JS and CSS files, which can help you develop beautiful websites quickly, suitable for all kinds of screen devices, including mobile phones. Skeleton is based on 960 Grid. It's a UI framework. Official website:

The less framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 preset layouts, which are based on a single grid. The goal of the less framework is to create multi layout sites more efficiently and to maintain consistency between layouts. Official website:

Responsive AEON is an HTML 5 / CSS3 framework, which can create responsive layouts very quickly. It has a grid system based on a total 1104px width of 12 columns, providing three very easy to understand basic classes for use. The framework enables @ mediaqueries to support devices of any size. In addition to the grid system, there are also typography, lists, tables, buttons, and table styles. Official website:

Gumby is a responsive and 960 pixel wide CSS grid framework that supports PC, tablet and mobile screen displays. Similar to Twitter's bootstrap, it includes a Web UI toolkit with good-looking buttons, tables, navigation + tags, and a small JavaScript file. Official website:

Gridpak aims to achieve responsive web page design, improve your workflow and save time. By generating PNG images, CSS, and JavaScript, gridpak creates a simple, responsive interface. The CSS generated by gridpak is compatible with IE 8 +, but it uses many experimental CSS properties, such as media query, box size and background clip properties, so we suggest you use it in combination with the modernizer to ensure backward compatibility. Official website:

Responsive GS is a fluid grid CSS framework for rapid development of responsive web sites. Response GS offers three styles: 12, 16, and 24 columns, and supports all standard devices using media queries. Official website:

Amazium is a responsive CSS framework based on the 960 Grid system, using 960px width to accommodate most 1024 * 768 resolution screens. Amazium uses four main media queries to adjust the resolution. Official website:

Golden grid system is a folding grid designed to enhance the compatibility of web pages. It has four characteristics: column, cross page, bottom line and script. Official website: grid-system

Centurion is a responsive web framework based on sass and CSS3. Official website:

The 1140 grid is perfect for 1280 resolution displays. On smaller displays, it can change into a fluid form based on the width of the browser and adapt to the browsing window. Official website:

Frameless is similar to golden grid system in that it adapts to page layout through column by column rather than pixel by pixel. Frameless is not a framework, because it does not contain any code, it is just a specific type of adaptive grid idea, you can use it as a good starting point for design work. Official website:

The framework is used for projects running on a small screen (tablet, mobile phone) with less code, and supports IE6 +. Official website: http://inuit

Fluid baseline grid system is an HTML5 & CSS3 development kit, which provides a solid foundation for the rapid design of websites. Official website:

HTML5 boilerplate is based on HTML / CSS / JS template, which can help developers to use HTML5 technology to quickly develop robust and full-featured websites. You can use it as your new project template and build your own project on top of it. This template contains the components and some excellent best practices to help develop HTML5 sites and applications. It can provide a very solid foundation for the project with the least preliminary work of developers. In addition, the template is highly customizable and can easily remove some features that are not needed. Official website: http://html5

320 and up uses a small screen style sheet to prevent the mobile device from loading desktop resources. The style sheet contains some setting properties such as color, layout, etc. Official website:

The above are 17 commonly used responsive Web UI frameworks, ranking in no order. The best one is the one that suits you.

Original link