Semantic-UI and several other front-end frameworks_html/css_WEB-ITnose

Originally, I wanted to introduce Semantic-UI, but if I only introduce this framework, there is not much content. There is no need to mention it on the framework-related feature site, so I simply list a few front-end frameworks that I commonly use as a guide. Staged summary.

The core of this article is focused on HTML/CSS frameworks. JS frameworks or JS-core frameworks are not discussed (such as YUI); multi-screen is an established fact, although not all development must consider adaptability. , but the adaptive function at least shows that this framework will not be eliminated in the short term, so frameworks without adaptive functions will not be discussed (such as flaminwork); frameworks that are not open source, not commercially available, or require payment (such as easyframework) will not be discussed ).

Let’s talk about Bootstrap first. I have been using it for the past two years. Nowadays, Bootstrap is a bit bad, and it is inevitable that I am a little tired of aesthetics. But think about it. Before the emergence of frameworks like Bootstrap, the interfaces made by programmers were really terrible. Now they have been upgraded to at least the level of "readable", so the problem of "overflow" cannot be concealed. I usually develop a small tool and use it as the interface, write a low-level script and use it as the document interface. It can also be used for prototypes or layouts in the work environment. Everyone can understand it and there is no learning cost. Overall, this framework has really contributed to the beautification of the Internet.

The advantage of Bootstrap is that it can be used immediately and saves time. The disadvantage is that classes are everywhere (maybe it has improved by the time you read this article, but it does not affect my current complaints), and it is not semantic enough, and it is not suitable for customization. At most, you can change the color. If it is adaptive If you have customization needs, you can consider using Foundation instead. I originally used this framework to write product prototypes (this use has now been replaced by Bootstrap). As a result, in the 3.0 version of the Foundation, the title was changed to "the most advanced responsive front-end framework in the world". world), whether it is the most advanced is debatable, but its customization in terms of adaptability is indeed better than Bootstrap, and it has all the controls of Bootstrap.

I have never used Foundation in a production environment. When it was transformed from a prototyping tool into a front-end framework in June 2012, Bootstrap was already very popular. With Twitter as the technical backing, it was unlikely to convince the program Members turned to Foundation. The current 4.0 version replaces jQuery with Zepto. If Zepto is used in the project, you can consider using it instead of Bootstrap.

The next step is the focus of this article? Semantic-UI. The name is its main selling point: semantics. Semantic-UI is more semantic than Bootstrap and uses easier-to-understand tag names: navigation is nav, main content is main, and the class name is also very clear, and it does not require many layers like Bootstrap. Bootstrap is very versatile and has good compatibility, even compatible with lower versions of IE. Semantic-UI is more geeky and has many CSS3 features, such as Shape and Reveal, which are very interesting. In terms of interface design style, Semantic is flatter than Bootstrap(2):

These features are very fancy, but I now use Semantic-UI to replace Boostrap, mainly because of its JS plug-in ( Modules) are easier to operate, and some commonly used animations are preset. Comments and dynamic information (Feed) in Views are really helpful. Anyway, it has all the Bootstrap functions I need, so I happily changed to Semantic-UI. Most of the style effects Semantic-UI requires less code than Bootstrap, and can be developed faster than Bootstrap with the same proficiency. And it provides a variety of themes, which to a certain extent avoids the problem of Bootstrap being one-sided.

Looking for shortcomings, when I first started using it, I was fooled by the Grid of Semantic-UI. As for the adaptive problem, bootstrap defines the display under different screen widths through md/sm/xs. Although it is troublesome, it is easy to control. Semantic-UI is implemented using Stackable/Doubling, and it can be adjusted manually, so it can be broken without even realizing it. It seems that the design of this framework is closer to Ruby's philosophy rather than Python's. There are many ways to achieve the same requirement. For example, if I want to implement a list, I can use List or Items; if I want to implement a sidebar, I can use Rail or Grid. Having so many choices can sometimes be a confusing problem. Also, the complete library file of Semantic-UI is very large. The JS CSS file is close to 500kb in size. Considering the domestic Internet speed, this size seems a bit huge. You can use NodeJS to build it yourself, provided you know what each component does specifically.

The above framework is suitable for programmers who are good at implementing functions (front-end JS and background-related interactions) but not good at design. Using the above framework, you can quickly make a good Web interface. Another scenario is that you can design it yourself, or have a professional designer design it and then convert it into HTML/CSS. The above framework is too heavy and many functions cannot be used.

In this case, I usually only need a frame for layout (Grid). In 2010, I wrote an article introducing the reason why web design often uses 960px width. At that time, 960gs was still used, but 960gs met the adaptive needs. No, I used lessfreamwork for a while. Recently, the author of 960gs developed unsemantic, so he changed it to unsemantic. When writing adaptive web pages, you need to load different css files according to different devices. Unsemantic has divided them for you, saving time and effort.

Finally, let’s talk about Topcoat, which can be considered Semantic-UI - unsemantic = Topcoat. Sometimes I only need a single page, and I don’t even need a navigation bar. I use the Topcoat layout framework to do it. Topcoat can make various page elements more beautiful, implemented in pure CSS, with small file size, more flexibility and easier customization.

Above, I once again emphasize that the purpose of this article is for evangelism. Programmers developing personal projects can consider trying Semantic-UI. The risk of replacing the front-end framework is small and there are more guinea pigs. No , it will be more conducive for this framework to be used in a production environment after actual users. If you need examples, please refer to: Erya - a content publishing system based on SemanticUI Django. The DEMO address is: http://bbs.dmyz.org/

http://dmyz.org/archives /548