A big pot of 10 H5 front-end frameworks

As a siege fighter who has been working on the front-end for 6 years and is extremely lazy, I have read many front-end frameworks from well-known to very well-known in the past few years. I originally wanted to share 15-20 frameworks, but when I asked several seniors for advice on writing skills, I was ruthlessly hit back. So here I will be low-key and only take out 10 frameworks to make a brief introduction. The whole show will end when I have enough words.

I originally wanted to write this article around CSS frameworks, but since the most popular and widespread frameworks in the industry are still JS+CSS frameworks, and I have a little JS knowledge, I want to focus on CSS, so in the end I will just talk about a lot of them. There is no order of precedence for the frameworks below, I just write whatever comes to my mind (as a front-end developer, I am always so willful ^_^ ).

Bootstrap

Let's talk about Bootstrap first. I guess you can guess that this will be mentioned first or it will definitely be mentioned (haha). This shows its strength and its momentum of being a framework. When I first started, I was determined to type out every letter of the code myself, and I wanted to grow up. As a result, I was lured by various friends around me and started the Bootstrap journey. Although I am a rare talent in design + front-end, God only allows me to use PS and various design tools but does not give me the same aesthetics as the design girl, so this is one of the reasons why I chose Bootstrap in the first place. It allows me to make things that can at least show off in front of girls, but after a long time, it is inevitable that I feel that Bootstrap is so beautiful that it makes people irritated, but fortunately, each version of it will have a big change, so people will not feel that the website they make will look like many other websites. The usage of Bootstrap is very simple (this may also be the result of the author of Bootstrap reading countless sieges and understanding their pain), so that even a small front-end can be quickly started, and there is almost no learning cost.

Official website: http://getbootstrap.com/

Github: https://github.com/twbs/bootstrap/

Authors: Mark Otto and Jacob Thornton Star: 93,112

Summary: The biggest advantage of Bootstrap is that it is very popular. Popularity means that if you have a problem, there will be many people to help you solve it, which means that it is a powerful tool. In addition, the interface is relatively harmonious and easy to use. Friends who pay attention to it should find that the latest V4 version also supports FlexBox layout, which is a very good upgrade experience. The disadvantage is that the class naming is not semantic enough and there are various abbreviations, so I am a novice without documents. Recently, I started to build a hybrid APP, and it was the first choice when choosing a framework. But I didn’t pay attention to it before when I was working on PC. Later, when I looked at it in the right-click properties of the hybrid, a cool breeze suddenly hit me. Bootstrap is so small, so small that I had to choose another framework.

AUI

The third one is AUI, which has just emerged recently. Although the author claims that it is a UI framework designed for APICloud developers, it actually solves many common problems in mobile front-end development and is a CSS framework mainly for hybrid development. It seems that the author is quite rampant, using all kinds of advanced CSS3 everywhere, which forced me to check the compatibility of these CSS3. As expected, the properties selected are all compatible. I laughed excitedly and boldly learned a few good things from my predecessors. The framework also provides components such as chat interface and count list, which solves many complex layouts that make me curse. Now I can just take it away and use it.

Github: https://github.com/liulangnan/aui

Official website: http://www.auicss.com/

Author: Wandering Man Star: 92

Summary: This framework has an advantage for me, that is, it is a pure CSS framework. I have used Pure before, and I have some JS skills. If it is not a complex effect, I can find a pure CSS framework and modify it myself. Now CSS3 can also do animation, efficiency, quality, and high efficiency, so I still choose this CSS framework. One thing I am dissatisfied with is that the documentation of this framework is really good, it is said to be high-end.

Amaze UI

The second one I want to introduce is Girl UI. I first used it because I met a designer who was obsessed with details. Once she had a serious argument with my fonts, and the boss praised her. I had to solve it according to her ideas, and finally found the Amaze UI framework (I don’t mind you calling me lazy). According to the official words, it is "a cross-screen front-end framework built based on community open source projects, with mobile first, from small screens to large screens, and finally to achieve all screen adaptation, adapting to the trend of mobile Internet." But in fact, I just like it because it can solve the cross-screen adaptation and compatibility problems existing in domestic browsers.

Official website: http://amazeui.org/

Github: https://github.com/amazeui/amazeui

Company: Cloud Adaptation Star: 6710

Summary: Amaze UI generally adds more elements that are in line with the characteristics of the Chinese market. The framework has done a good job of handling cross-screen and adaptation, and has prepared a series of commonly used web components, which has made a significant contribution to reducing the working time of overtime dogs who are engaged in compatibility and adaptation of various keyboards. The framework also optimizes Chinese typesetting, is compatible with mainstream browsers in China, is lightweight, and is not only suitable for desktops, but also more suitable for mobile terminals, and contains some packaged Widgets. However, I also feel that the Amaze UI document is a bit too much, such as "People don't care about jQuery's traffic." To be honest, there is really nothing here, but I never say it (haha), and I don't think there are many outstanding points in the code and design.

Frozen UI

There was a time when I thought QQ was so high-end. Later, I asked around and found out that the QQ client also used hybrid development, and the QQ member front-end used Frozen UI, and this framework was open source. I was so excited that I couldn't bear the loneliness in my heart and tried it directly. My first experience felt that the basic style was simple and the color was refreshing. There was a relatively active community, so the components were also relatively rich.

Github: https://github.com/frozenui/frozenui

Official website: http://frozenui.github.io/

Author: QQVIP FD Team Star: 1,067

Summary: It would be cool to use Frozen UI with some tools like APICloud to make hybrid apps, or native turkeys can use it to embed it in applications for front-end development. This framework is compatible with Android 2.3 + and iOS 4.0 +, or it is also a great choice for Web App. The disadvantages can be seen from the UI level, because it was born on the front end of QQ membership.

Frozen UI

The third one is Frozen UI. I felt that QQ looked so high-end for a while. Later, I asked around and found out that QQ client also used HTML mixed development. The QQ member front-end used Frozen UI, and this framework is open source. I was so excited that I couldn’t stand the loneliness in my heart. I tried it out in a few seconds and started to use it. My initial experience was the basic style with simple effects and refreshing colors. There is a relatively active community so the components are also relatively rich.

Github: https://github.com/frozenui/frozenui

Official website: http://frozenui.github.io/

Author: QQVIP FD Team Star: 1,067

Summary: It would be cool to use Frozen UI with something like APICloud to make a hybrid app, or you can use it to embed it in an application for front-end development. This framework is compatible with Android 2.3 + and iOS 4.0 +, or it is a great choice to use it to make a Web app. However, if it is used in WeChat, the more suitable WeUI framework is the first choice. The disadvantages can be seen from the UI level, because it was born in the front end of QQ membership.

WeI

The fourth one is WeUI, which is similar to FrozenUI. It is also a more specialized framework. WeUI is more specialized than FrozenUI. It doesn’t even have an official website. All questions are answered on gitHub Issues. This framework is extremely simple, not to mention its size. There are only about 7 modules, but it is well made despite its small size. The reputation can be judged by the number of stars. The framework has more than 7K github stars since its release on 16/1/23. However, it is not ruled out that users have no place to vent so they all go to git, haha.

Github: https://github.com/weui/weui

DEMO: http://weui.github.io/weui/

Stars: 7,129

Summary: After watching this DEMO designed by the WeChat design team, if you want to be a WeChat public account, this one must be your first choice. In short, the bad thing about the framework is that the framework itself should not have considered allowing users to use it in non-WeChat scenarios.

SUI

"SUI is a front-end component library based on Bootstrap, and it is also a set of design specifications. With SUI, you can easily design and implement beautiful pages." Sure enough, I still directly quoted the boring advertisement given by the official website to save my brain cells (囧…). Of course, as the advertisement said, if you have used Bootstrap before, you can easily switch to SUI. This may be the benefit that Taobao gives to front-end losers. .

Github: https://github.com/sdc-alibaba/sui

Official website: http://sui.taobao.org/sui/docs/index.html

Star: 120

AUI

The sixth one is AUI, which has just emerged recently. Although the author claims that it is a UI framework designed for APICloud developers, it actually solves many common problems in mobile front-end development. It is a CSS framework mainly for hybrid development. So it seems that the author is quite rampant, using all kinds of advanced CSS3 everywhere, which also forced me to check the compatibility of these CSS3. As expected, all the properties with good compatibility were selected. I laughed excitedly and boldly learned some good things from my predecessors. The framework also provides components such as chat interface and count list, which solves many complex layouts that make me curse. Now I can just take it away and use it.

Github: https://github.com/liulangnan/aui

Official website: http://www.auicss.com/

Author: Wandering Man Star: 92

Summary: For me, this framework has an advantage that it is a pure CSS framework. I have used Pure before and I have some JS skills. If it is not a complex effect, I can find a pure CSS framework and modify it myself. Now CSS3 can also achieve various animations. I still choose this CSS framework after considering efficiency, quality, and high efficiency. What I have always been dissatisfied with is that the documentation of this framework is really good. It is said to be high-end.

MUI

I used to use Android, but when I saw IOS, I decided to switch to it. I don’t know why I always like Apple’s system changes. Later, because I lacked design, I imitated IOS to make UI, but I couldn’t do it well. I accidentally found the MUI framework. What attracted me to this framework was that its UI was designed based on IOS, and of course it also supplemented the Android-specific UI style. And the official MUI claimed that after using it for in-depth development, it was found that using it to make APPs can also improve the user experience. Then I tried to understand it more deeply and used it for a while.

Official website: http://dev.dcloud.net.cn/mui/

Github: https://github.com/dcloudio/mui

Star: 2,450

Summary: As mentioned before, this framework encapsulates UI components with reference to the two major systems. The framework itself also has a relatively active community. The not-so-good aspects are also what I pay special attention to. Regarding the fluency of application development, I certainly know that this is the current disadvantage of H5, but after seeing the description given on the official website, I still have the expectation to try and see if it can be improved. However, it actually still needs to be improved with the help of Webview, not the framework itself.

Semantic UI

The third from the last is Semantic UI. I came into contact with this framework because of Bootstrap. As soon as Semantic UI was launched on github, it attracted the attention of a large number of developers, so much so that many people compared the two and found faults with them and praised them in various ways. Whether it is good or bad cannot be praised just based on a few words from others. After using it, I feel that there is not much difference between it and Bootstrap in terms of UI, but the code naming standards are quite different. I think Semantic UI wants to do something different. Its naming is all in a composite way, and the class names are particularly discrete. When using it, you have to be careful not to conflict with its class names when you extend or add new classes.

Official website: http://www.semantic-ui.cn/

Github: https://github.com/semantic-org/semantic-ui/

Foundation

Foundation is considered a veteran in the framework world. It is said that frameworks are old, and this framework is still so popular. If you mind the embarrassing things of Bootstrap development, then you can consider using Foundation. Even if you use predefined UI elements, it will not be too similar to other websites. Just as the official said, it gives developers a more flexible framework experience.

Official website: http://foundation.zurb.com/

Github: https://github.com/zurb/foundation-sites

Stars: 22,736

UiKit

UIkit is developed by the YOOtheme team and is used in many WordPress themes (that is, if you are a WordPress enthusiast, this framework should be more suitable for in-depth study), and the framework can be edited through the GUI editor and manually, so it provides a flexible and powerful customization mechanism. The framework uses the unique features of LESS, jQuery, normalize.css and FontAwesome open source projects to integrate such a lightweight and modular front-end framework.

Official website: http://www.getuikit.com/
Github: https://github.com/uikit/uikit
Author: YOOtheme Stars: 6,372

Pure

Finally the last one, I am as happy as you (～￣▽￣)～). I came across this framework when I was working on a management system. I chose to use it because it is small and pure CSS, without too much involvement, and can be quickly combined with other frameworks.

Official website: http://purecss.io/

Github: https://github.com/yahoo/pure/

Stars: 13,592

After the introduction, I guess you should have figured out that I only use frameworks when I encounter needs, so there is no good or particularly good framework. You can only tell what your needs are and whether this framework is suitable for you. Various frameworks are roughly the same to use. If you can use one, it will become simple and easy to get started. I think people who can write frameworks are all outdoor talents.