Semantic-ui and several other front-end frames

Originally wanted to introduce Semantic-ui, but if only introduce this framework, nothing, frame related feature site There is no need to say, so simply list their usual several front-end framework, is to do a phased summary.

The core of this paper is to focus on the framework of HTML/CSS, JS frame or JS as the core of the framework is not discussed (such as Yui); multi-screen is already a established fact, although not all development should be considered adaptive, but there is an adaptive function at least that the framework will not be eliminated in the short term, so no adaptive framework (such as Flaminwork), non-open source, not commercial, or pay-as-you-use frameworks are not discussed (such as Easyframework).

First said Bootstrap, these two years are used it, now bootstrap a bit rotten street, inevitably some aesthetic fatigue. But think of the bootstrap before this framework, the programmer's interface is really miserable, and now at least to upgrade to "can see" level, so "flooding" this problem is his flaws. Usually develop a small tool to use it to do the interface, write a bottom script to use it to do the document interface, the work environment can also be used to make prototypes or layouts, who understand no learning costs. On the whole, the framework is essential for the beautification of the Internet.

The advantage of bootstrap is that it can be used to save time. The downside is that class is flying around (maybe when you see this article it's getting better but it doesn't affect my current stage of The spit), and it's not semantic enough, and it's not suitable for customization--up to the color change, and if there's a custom need for adaptation, you can consider using foundation instead. This framework I originally used to write a prototype of the product (the use has now been replaced by Bootstrap), the result to the 3.0 version of the foundation changed to title "The world's most advanced front-end adaptive Framework" (most of responsive Front-End framework in the world, whether the most advanced is debatable, but its self-adaptive aspect of the customization is indeed better than Bootstrap, bootstrap some control it has.

I didn't do it in a production environment. foundation,12 years June when it was transformed from prototype tools into a front-end framework, Bootstrap was already popular, with Twitter as a technical backing and unlikely to persuade programmers to move to foundation. The current version 4.0 replaces jquery with Zepto, and if you use Zepto in your project, consider replacing it with Bootstrap.

Next is the focus of this article--semantic-ui. This name is the main selling point of it: semantics. Semantic-ui is more semantic than bootstrap, using a more easily understandable label name: NAV, the main content is Main,class name is also very clear, and unlike Bootstrap need to set a lot of layers. Bootstrap is very versatile, compatibility is good, even the lower version of the Ie,semantic-ui is more geek, there are many CSS3 features, such as shape and reveal is very interesting. From the interface design style, semantic is flatter than bootstrap (2):

These features are very fancy, but I now replace the boostrap with Semantic-ui, mainly because it's JS plugin (Modules) easier to operate, preset some common animations, views (view) in the comments (Comment) and dynamic information (Feed) It was really a big help. Anyway I need to use the bootstrap function it all have, so happy to replace the semantic-ui. Most style effects Semantic-ui are less than bootstrap code, and are developed faster than bootstrap at the same level of proficiency. and provide a variety of topics, to a certain extent, to avoid the bootstrap thousand station side of the problem.

Look for the shortcomings, I was just beginning to use, the Semantic-ui grid pit. The adaptive problem, bootstrap, is defined by md/sm/xs in different screen widths, although cumbersome, but easy to control. Semantic-ui is used stackable/doubling to achieve, but also can be manually adjusted, unknowingly be played bad. It seems that the design of this framework is close to Ruby's philosophy rather than Python, the same requirements have many ways to achieve, such as I want to implement the list, you can use list or items, to implement the sidebar, you can use rail or grid, choose more and sometimes very tangled problem. Also, Semantic-ui complete library file is very large, js+css file has close to 500kb size, considering the domestic speed, this volume seems a bit large. You can build yourself with Nodejs, provided you know exactly what each component is.

The above framework is suitable for programmers who are good at implementing functions (front-end JS and background-related interactions) but are not good at design, using the above framework can quickly make a good web interface. Another scenario is that they will design, or by professional designers out of the design, and then turn into HTML/CSS, the above framework is too heavy, many functions are not used.

In this case, I usually only need the framework to do the layout (Grid), 10 wrote an article on the web design for the 960px width of the reason, was still in use 960GS, but the adaptive demand 960GS can not meet, it took a period of time lessfreamwork. The author of the 960GS recently developed the unsemantic and replaced it with unsemantic. In the writing of adaptive Web pages, depending on the device to load different CSS files, unsemantic are divided for you, save time and effort.

Finally have to say topcoat, can think semantic-ui-unsemantic = topcoat. Sometimes I just need a single page, and I don't even need a navigation bar, I do it using the Topcoat+ layout class framework. Topcoat can make all kinds of page elements more beautiful, pure CSS implementation, file small, more flexible and easier to customize.

Above, once again emphasize the purpose of this article is evangelism, in the development of personal project of the program can consider trying Semantic-ui, the front-end frame replacement risk is small, there are more mice, no, the actual user is more conducive to the framework is used in the production environment. Examples can be found in: Erya-based on Semanticui + Django Content Publishing System, demo address is: http://bbs.dmyz.org/

http://dmyz.org/archives/548

Semantic-ui and several other front-end frames