Several responsive frameworks suitable for web programmers

Now more and more frameworks have entered our development world. In this article, we will share with you several responsive frameworks suitable for web programmers. We hope that you can find many frameworks that suit you through the content of this article.

As HTML5 and CSS3 continue to become more popular, responsive design frameworks are becoming more and more popular, becoming more and more popular among webmasters and designers. However, the public has different attitudes and views on responsive frameworks. Some people think that a professional designer who understands HTML5 and CSS3 should write the framework himself so that he can create a unique website; others think that responsive design frameworks can It is convenient for designers to quickly and effectively build a practical and beautiful website, which is indispensable in saving time and energy. Regarding this argument, Xiaofei still supports the latter point of view. Xiaofei believes that even experienced Web front-end developers should study the responsive framework. It can provide us with some reference and a lot of convenience. In today's era of rapid development, designers have to write frameworks to build websites ( Properly arrange grid, layout, and media queries ) is just too time consuming. In addition, designers can also give full play to their creativity when using responsive frameworks, customize some features, and create innovative websites. Today I will introduce some responsive frameworks that are commonly used by designers. You can choose to use them based on your actual needs.

Bootstrap

##Bootstrap is an open source toolkit for front-end development launched by Twitter. It can be said to be the most popular HTML5 framework at present, with the largest user base and the highest popularity in the country. The slogan of Bootstrap is "simple, intuitive and powerful, making web development faster and easier", and it is indeed striving to achieve this: basically covering all components for building responsive websites, such as bootstrap editor, customized jQuery plug-in, etc. Implements multiple features such as custom form elements, Javascript interactivity, and cross-browser compatibility. For most webmasters, Bootstrap is convenient and simple, and it is also very fast to build a beautiful and responsive website. It is their number one choice. Xiaofei is also a fan of it. Many of the exquisite templates of the self-service website building platform on the takeoff page are also created based on the Bootstrap framework.

However, Bootstrap is not impeccable. Although Bootstrap is compatible with multiple browsers such as Chrome, Firefox, Safari, Opera, 360 and Sogou, because it is developed based on HTML5 and CSS3, some features are not so friendly to IE browser and may appear on IE browser. Problems such as being unable to display. Also, if your website has too much customized design content, using bootstrap as the bottom layer of the framework for modification will generally involve copying a large number of styles, which may cause confusion at the CSS level and is not conducive to the later maintenance of the website.

Foundation

##Foundation is based on a flexible grid and uses the latest technology to become an advanced Responsive front-end framework. Its overall framework design concept is mobile-first, so one of its outstanding features is that it performs better on mobile devices such as mobile phones. At the same time, Foundation supports users to use customized services (defining grids, colors, font sizes, etc.), provides a variety of Web UI components, such as forms, buttons, etc., and is flexible enough in operation and use. . Compared with Bootstrap, which is widely used, Foundation is relatively low-key in China due to the lack of Chinese-language documents and tutorials. However, many webmasters believe that there are too many people using the Bootstrap framework to build websites, and the websites they create all look like one. It is impossible to make your website stand out among competitors if it is carved out of a mold. At this time, you will be more inclined to use Foundation to create a tall and unique website. However, this framework also has its own shortcomings, that is, compatibility issues. Foundation 4 has given up compatibility with IE8. In the domestic browser environment, whether Foundation's behavior is good or bad, Xiaofei cannot easily make a conclusion.

Golden Grid System

If you are interested in grid systems, Golden Grid System must be your best choice. It initially appears as a 16-column grid, but you can also collapse it, shrinking the viewport to an 8- or 4-column layout for tablet and mobile browsing. In summary, it is a foldable grid designed to increase web design compatibility and has four obvious characteristics: columns, cross-pages, bottom lines, and scripts. Use Golden The grid system framework has many advantages when building a website. For example, it can help establish clear and regular layout and increase the readability of web pages; it can serve as a bridge between web designers and front-end developers to facilitate their communication; it can implement responsiveness and change the layout. Adapt to different screen sizes. With so many benefits, aren’t you excited yet?

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 based on a single grid, changing the number of layout columns and the width of the outer edge to make different layouts. As a non-programming language, CSS is difficult for many designers. The emergence of Less solves this problem. It greatly simplifies the writing of CSS code, reduces the maintenance cost of web pages, and allows designers to Make 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 for you It's definitely a good place to get started. Gumby is a responsive CSS framework based on SASS (a CSS extension language parser). It comes with templates and Web UI toolkit, with various beautiful buttons, tables, navigation, labels, JS files, and fast response speed. It also supports no-coding design. Even if you don’t understand technology, it is very simple to operate, easy to get started, and there are no obstacles in later maintenance.

320 and UP

This framework is first oriented to small screens and uses a small screen style sheet, which includes some settings such as color and layout, to ensure that the website Content priority. It adapts well to small screens, and there is no problem on large screens.

1140px CSS Grid System

A responsive website does not only mean meeting the needs of small resolution devices, but also needs to display well on ordinary computer screens. Adapt layout to larger resolutions. The 1140 grid frame is able to do this, and it can fit perfectly into a 1280 resolution display. On smaller displays, it becomes fluid based on the width of the browser and adapts to the browsing window.

The above content is about these commonly used web responsive frameworks. Different frameworks have their own advantages and disadvantages. It is important to find a framework that suits you. I hope the sharing of this article can help everyone.

Related recommendations:

Several useful HTML5 mobile development frameworks

Global PHP development framework rankings

Introducing a Liruan agile development framework