Share the responsive frameworks commonly used by web design masters (summary)

This article introduces and shares the responsive frameworks commonly used by web design masters (summary), and shares them with you. The details are as follows:

With the increasing popularity of HTML5 and CSS3, responsive design frameworks are becoming more and more popular and are becoming more and more popular among webmasters and designers. However, the public has different attitudes and opinions on responsive frameworks. Some people think that a professional designer who understands HTML5 and CSS3 should write his own framework so that he can create a unique website; others think that responsive design frameworks can help designers quickly and effectively build a practical and beautiful website, which is indispensable in saving time and energy. Regarding this debate, Xiaofei tends to support the latter point of view. Xiaofei believes that even the most experienced web front-end developers should study the responsive framework carefully, which can provide us with some reference and convenience. In today's fast-paced era, it is too time-consuming for designers to write frameworks to build websites (reasonably arrange grids, layouts, and media queries). In addition, when using a responsive framework, designers can also give full play to their creativity, customize some features, and create innovative websites. Today, Xiaofei will introduce some responsive frameworks that are currently commonly used by designers. You can choose to use them according to your actual needs.

Bootstrap

Bootstrap is an open source toolkit for front-end development launched by Twitter. It is currently the most popular HTML5 framework, with the largest user base and the highest popularity in China. Bootstrap's slogan is "Simple, intuitive, powerful, making web development faster and simpler", and it is indeed working hard to achieve this: it basically covers all components for building responsive websites, such as the bootstrap editor, customized jQuery plug-ins, which can realize custom form elements, Javascript interactivity, cross-browser compatibility and other functions. For most webmasters, Bootstrap is convenient and simple, and it is also very fast in building a more beautiful responsive website. It is their number one choice. Xiaofei is also a fan of it. Many exquisite templates of the Qifeipage self-service website building platform are also created based on the Bootstrap framework.

However, Bootstrap is not perfect. Although Bootstrap is compatible with multiple browsers such as Chrome, Firefox, Safari, Opera, 360 and Sogou, it is developed based on HTML5 and CSS3. Some features are not so friendly to IE browsers and may not be displayed on IE browsers. Also, if your website has too much customized design content, using bootstrap as the underlying framework for modification will generally involve duplication of a large number of styles, which may cause confusion in the CSS hierarchy and is not conducive to the later maintenance of the website.

Foundation

Foundation is based on a flexible grid and uses the latest technology, making it a representative of advanced responsive front-end frameworks. Its overall framework design concept is mobile-first, so one of its most prominent features is that it performs better on mobile devices such as mobile phones. At the same time, Foundation supports users to use customized services (define grids, colors, font sizes, etc.), and provides a variety of Web UI components, such as forms, buttons, etc., which are also flexible in operation. Compared with the widely used Bootstrap, Foundation is relatively low-key in China due to the lack of Chinese version documents and tutorials. However, many webmasters believe that there are too many people using the Bootstrap framework to build websites, and the websites they make are like they were carved out of the same mold, making it impossible for their websites to stand out from their competitors. At this time, they will be more inclined to use Foundation to build a high-end and unique website. However, this framework also has its own shortcomings, that is, the compatibility issue. Foundation 4 has given up compatibility with IE8. Xiao Fei is not sure whether Foundation's behavior is beneficial or detrimental in the domestic browser environment.

Skeleton

Compared with the first two, Skeleton does not have such a high status in the minds of domestic users. It uses a simple grid system and has a collection of CSS and JS files, which enables Skeleton-based websites to be quickly adjusted according to devices with different resolutions (computers, tablets, mobile phones, etc.), making the user interface more friendly and optimizing the user experience. Although Skeleton only defines some standard HTML elements and a 960px standard template, it does not affect the general website building requirements. It is for this reason that it is easier to use and is especially suitable for building some small projects.

Golden Grid System

If you are interested in the grid system, Golden Grid System must be your best choice. It starts out as a 16-column grid, but you can collapse it to reduce the viewport to an 8-column or 4-column layout for tablet and phone viewing. In summary, it is a foldable grid designed to increase the compatibility of web design, with four obvious features: columns, cross-page, bottom line, and script. There are many advantages to using the Golden grid system framework to build a website. For example, it can help establish clear and regular layouts to increase the readability of web pages; serve as a bridge between web designers and front-end developers to facilitate their communication; and achieve responsiveness and change the layout to adapt to screens of different sizes. With so many benefits, are you still not tempted?

Less Framework

Less Framework is one of the classic responsive frameworks. It is an adaptive CSS grid system that covers 4 layouts and 3 font presets to meet the needs of different windows such as computers, tablets, and mobile phones. Less Framework works on a single grid, changing the number of layout columns and the width of the outer margins to create different layouts. As a non-programming language, CSS is relatively difficult for many designers. The emergence of Less just solves this problem. It greatly simplifies the writing of CSS codes, reduces the maintenance cost of web pages, and allows designers to create better websites with less code. This echoes its name less, no wonder so many designers fall in love with this framework.

Gumby

If you are new to responsive website design, the Gumby framework is definitely a good place for you to start. Gumby is a responsive CSS framework based on SASS (a CSS extension language parser). It comes with templates and Web UI toolkits, with various good-looking buttons, tables, navigations, labels, JS files, and fast response speed. It also supports no-coding design, so it is simple to operate even if you don’t understand technology. It is easy to get started and there are no obstacles in later maintenance.

320 and UP

This framework is first aimed at small screens and uses a small screen style sheet that includes some setting properties such as color, typography layout, etc., to ensure that the content of the website is given priority. It can adapt well to small screens, and there will be no problem on large screens.

1140px CSS Grid System

A responsive website doesn’t just mean catering to the needs of small-resolution devices, it also requires a layout that looks good on average computer screens while adapting to larger resolutions. The 1140 grid frame does just that, and it fits perfectly on a 1280 resolution monitor. On smaller displays, it can become fluid and adapt to the browser width.

The above is an introduction to the responsive framework. Different responsive frameworks have their own advantages and disadvantages, and no responsive framework is perfect. Also, remember that using a framework to build a website does not mean we can be a hands-off boss. We still need to reasonably evaluate our needs, customize some content appropriately, and combine the framework with our own ideas. Only in this way can we give full play to the positive role of the responsive framework in website construction and make a beautiful and practical responsive website while saving time. If you have no foundation in the framework and are confused about the knowledge introduced today, it doesn’t matter, you can come to the Qifeipage self-service website building platform to have a look. Qiqiye self-service website building platform provides numerous responsive templates. You can quickly build an H5 responsive website that adapts to all devices without coding or any professional skills. Come to Qiqiye self-service website building platform to build a website!

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.