What are the front-end frameworks of html5

htmlFront-end frameworks include: Bootstrap, AUI, Amaze UI, Frozen UI, Frozen UI, WeUIi, SUI, AUI, MUI, Semantic UI, Foundation, UiKit, Pure, etc.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

HTML5 front-end framework

Bootstrap

First of all, let’s talk about Bootstrap. You may have guessed it. Let me start by saying that there may definitely be this (haha), which shows how powerful it is, and has the momentum to frame a whole country. When I first entered Taoism, I was determined to let myself grow by typing out any letter in the code myself, otherwise I would be defeated. As a result, I was attracted by various gay friends around me and started my Bootstrap journey. Although I am a unique talent in front-end design, God only allowed me to use PS and various design tools but did not give me the same aesthetic as the design girls. So this is one of the reasons why I initially chose Bootstrap. At least what I made can look cool in front of girls, but after a long time, I will inevitably find Bootstrap so beautiful that it makes people irritated. But fortunately, every version of it will have great changes, and it will not make people feel that it is a website made by myself. It will collide with many websites. The usage of Bootstrap is so simple (this may be the result of the Bootstrap author reading countless sieges and understanding their pain) that even a small front-end can get started quickly with almost no learning cost.

Official website: http://getbootstrap.com/

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

Summary: Bootstrap’s biggest advantage is this It is very popular. Popularity means that if you have a problem, there will be many people to help you solve it. It means that it is a powerful tool. It also has a harmonious interface and is easy to use. Children who pay attention to it should find that the latest V4 version also starts to support FlexBox layout. , this is a very good upgrade experience. The disadvantage is that the class naming is not semantic enough and has various abbreviations, so that I am a noob without documentation. Recently I started to build a hybrid APP. When choosing a framework, it is the first choice. However, I never paid attention to it when I was working on PC, and then I started working on hybrid right-click attributes. When I looked at it, a cool breeze hit me instantly. Bootstrap was so small that I had to choose another framework.

AUI

The third one is AUI that has just emerged recently. Although the author claims that it is a UI framework specially designed for APICloud developers, in fact it still solves the problem. It 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 aggressive and uses various advanced CSS3s everywhere, which makes me have to check the compatibility of these CSS3s. Living up to expectations, I chose all the attributes that are compatible with each other. I was so excited that I learned a few good things from my seniors. The framework also provides components such as chat interfaces and counting lists, which solved many complex problems that made me curse. The layout can now be taken and used directly.

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

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

Summary: This framework works for me One of the advantages is the pure CSS framework. I have used Pure before and I have some JS skills. If it is not a complicated effect, I can just find a pure CSS framework and modify it by myself. Now CSS3 can also do animation. Efficiency, quality, and efficiency are all taken into consideration, so I chose this CSS framework. One thing I am dissatisfied with is that the documentation of this framework is really good, and it is said to be superior.

Amaze UI

The second introduction is Amaze UI. I first used it because I met a designer who loves to be obsessed with details. Once she talked to me. The font was really high-end, but she praised her with a BOOS that was worth a thousand words, so I had to solve it based on her ideas, and finally found the Amaze UI framework (I don't mind if you call me lazy), which according to the official words is " A cross-screen front-end framework built based on community open source projects, with mobile priority, from small screens to large screens, and ultimately realizes adaptation to all screens to adapt to the trend of mobile Internet." But in fact, I just like it to solve the cross-screen adaptation and compatibility problems of domestic browsers.

Official website: http://amazeui.org/

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

Summary: Amaze UI is generally Adding more elements that are in line with the characteristics of the Chinese market, the framework has done a better job of handling cross-screen and adaptation, and has prepared a series of commonly used web components to reduce the overtime of compatibility and adaptation of various keyboards. The dogs’ hours at work make a big contribution. , the framework is also optimized for Chinese typesetting, is compatible with China's mainstream browsers, is lightweight, is not only suitable for desktops, but also more suitable for mobile terminals, and contains some packaged Widgets. But since then I have felt that the Amaze UI documentation is a bit too much, such as "people won't care about the traffic of jQuery." To be honest, it doesn't matter here, but I will never say it (haha), There are not many outstanding points in the code and design.

Frozen UI

Some time ago I saw that QQ suddenly became more powerful. Then I asked around and found out that the QQ customer service also uses hybrid development. Among them, the QQ member front-end uses Frozen UI, and this framework is open source. I am so happy that I can’t bear it. I just started using it and tried it out. For the first time, I felt that the basic style and effect were simple and the colors were refreshing. There is a relatively active community, so the components are relatively rich.

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

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

Summary: If you use Frozen UI Some, such as APICloud, are cool when used to make hybrid APPs, or native turkeys are used to nest in applications for front-end development. This framework is compatible with android 2.3 and ios 4.0, or can be used to make Web Apps. An excellent choice. The disadvantages can be seen from the UI level. Who let it be born on the front end of QQ members?

Frozen UI

The third one is Frozen UI. I saw QQ instantly becoming more powerful for a while, and then I asked around and found out that QQ customer service also uses HTML. Mixed development, in which the QQ member front-end uses Frozen UI, and this framework is open source. I was so happy that I couldn't bear the loneliness in my heart. I just started using it three times, five times, five times and two times, and tried it once. The first experience was that the basic style and effect were simple. The colors are refreshing, and there is a relatively active community, so the components are relatively abundant.

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

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

Summary: If you use Frozen UI Some, such as APICloud, are cool when used to make hybrid apps, or native turkeys are used to nest in applications for front-end development, and this framework is compatible with android 2.3 and ios 4.0, or used to make web apps. It is also an excellent choice, but if it is placed in WeChat, the WeUI framework, which is more suitable than this, is the first choice. The disadvantages can be seen from the UI level. Who let it be born on the front end of QQ members?

WeUIi

The fourth one is that WeUI and FrozenUI are both similar to WeUi. It is also a relatively specialized framework. WeUI should be said to be more specialized than FrozenUI. First, it doesn’t even have an official website. All questions and answers are solved in gitHub Issues. This framework is extremely simple. Needless to say, the size is not to mention. There are only about 7 modules. However, although the size is small, it is good. Judging from the reputation The star is enough. The github star since the framework was released on 16/1/23 has exceeded 7K, but it does not rule 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/

Summary: After reading WeChat This set of DEMO designed by the design team, without saying a word, if you want to be a WeChat public, this without saying a word must be the first choice. The disadvantage of the framework, in short, is that the framework itself probably has not considered allowing users to use it in non-WeChat scenarios.

SUI

"SUI is a front-end component library developed based on bootstrap. It is also a set of design specifications. Through SUI, it is very convenient to design and Achieve beautiful pages”. Sure enough, it is better to directly quote the boring official advertisement to save your own brain cells (囧...). Of course, as the advertisement said, if you have used Bootstrap before, you can easily switch to SUI. This may be what Taobao gives to the front-end losers. Welfare. .

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

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

Star: 120

AUI

The sixth one is the AUI that has just come up recently, although the author claims that it is specially designed for APICloud developers. It is a UI framework, but 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 and uses various advanced CSS3s everywhere, which also makes me have to check the compatibility of these CSS3s. Living up to expectations, I chose all the attributes that are compatible with each other. I was so excited that I learned a few good things from my seniors. The framework also provides components such as chat interfaces and counting lists, which solved many complex problems that made me curse. The layout can now be taken and used directly.

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

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

Summary: This framework works for me One of the advantages is the pure CSS framework. I have used Pure before and I have some js skills. If it is not a complicated effect, I can find a pure CSS framework and modify it by myself to achieve the effect. Now CSS3 can also do it. Various animations, efficiency, quality, and efficiency were all considered, so I chose this CSS framework. What I have always been dissatisfied with is that the documentation of this framework is really good, and it is said to be superior.

MUI

I used to use the Android system, but then I saw IOS and fell in love with it. I don’t know why I like it so much every time Apple adjusts the system. Later, because of the lack of design, I specially imitated the IOS system to make UI. But I was never able to do it very well, so I accidentally discovered the MUI framework. What attracted me to this framework is that its UI is mainly designed with IOS. Of course, it also supplements the unique UI style of android. And MUI officially claims to be used for development. After in-depth development, we found that using it as an APP can also improve user fluency, and then we tried to understand and use it more deeply for a period of time.

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

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

Summary: Just As mentioned before, this framework encapsulates UI components based on two major systems. The framework itself also has a relatively active community. The not so good part is also a point that I pay special attention to. Regarding the smoothness of developing applications, of course I I know that this is the current disadvantage of H5, but after seeing the description on the official website, I still try it with expectation to see if it can be improved. However, it actually needs to be improved with the help of Webview, not the framework itself.

Semantic UI

The third from the bottom 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. Many people compare the two and criticize and praise them. You can't just raise your finger and start liking them just based on others' three or four sentences. After using them, I feel that the UI is not much different from Bootstrap, but the code naming convention But there is a big difference. I think Semantic UI just wants to do something different. Its naming is all in a compound way, and the class names are very discrete. When using it, you have to be careful about naming the classes you expand or add. Its class name conflicts.

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

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

Foundation

Foundation is considered a veteran in the framework industry. It is said that frameworks came early, and this framework is still so popular today. If you are more concerned about the embarrassing incident of Bootstrap development, , then you may consider using Foundation. Even if you use predefined UI elements, it will not be too similar to other websites, just like the official said to give developers a more flexible framework experience.

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

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

UiKit

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

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

Github: https://github.com/uikit/uikit

Pure

Finally the last one, I am as happy as you are (~￣▽￣)~), I came into contact with this framework when I was working on the management system, and I chose to use it because the framework is small and compact, and it is pure CSS , without too much involvement, easy to use in combination with other frameworks quickly.

Official website: http://purecss.io/

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

Recommended tutorial: "html Video tutorial》

The above is the detailed content of What are the front-end frameworks of html5. For more information, please follow other related articles on the PHP Chinese website!