Comparison of the 5 most popular front-end frameworks

There are tons of CSS front-end frameworks out there, but there are only a few really good ones.

This article will compare five of the best frameworks. Each framework has its own advantages and disadvantages, as well as specific application areas, and you can choose according to your specific project needs. Additionally, many options are modular, allowing you to use only the components you need, or even a mix of components from different frameworks.

This article is introduced in order according to the GitHub popularity of each framework.

Bootstrap

Bootstrap is the undisputed leader of the currently available frameworks. Its popularity is growing, and you can choose this framework with confidence without worrying that your project will fail, as a framework with a widely used base is less likely to be abandoned.

• Creators:  Mark Otto  and  Jacob Thornton .
• Release: 2011
• Current version: 3.3.7
• Popularity: 111,000 stars on GitHub
• Description: "Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile web projects on the web.
• Core concepts/principles:  RWD and mobile first.
• Frame size: 154 KB
• Preprocessors:  Less and Sass
• Responsive layout: yes
• Modular: yes
• Startup Template/Layout: Yes
• Icon Set:  Glyphicons  Halflings Set
• Add-ons/Add-ons: No bundles, many 3rd party plugins available.
• Unique Component: Jumbotron
• Documentation resources: good
• Customization: Basic GUI customizer. But you need to enter the color value manually because there is no color picker available.
• Browser Support: Firefox, Chrome, Safari, IE8+ (you need Respond.js for IE8 )
• License:  MIT

Bootstrap Instructions

Bootstrap's widespread popularity is its strength. Technically, it's not necessarily better than the other frameworks on this list, but it offers more resources (articles and tutorials, third-party plugins and extensions, theme builders, etc.) than the other four. In short, Bootstrap is everywhere and that's the main reason why people continue to choose.

 

Foundation

Foundation is the second-place framework. Solid companies like ZURB have been supporting Foundation, so the framework has a strong foundation. Foundation is now used by many large websites including Facebook, Mozilla, Ebay, Yahoo! and National Geographic.

• Creator: ZURB
• Release: 2011
• Current version: 6.3.1
• Popularity: 25,400 stars on GitHub
• Description: "The world's most advanced responsive front-end framework"
• Core Concepts/Principles: RWD, Mobile First, Semantics.
• Frame size: 197.5 KB
• Preprocessor: Sass
• Responsive layout: yes
• Modular: yes
• Startup Template/Layout: Yes
• Icon Sets:  Basic Icon Fonts
• Extras/Add-ons: Yes
• Unique Components: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
• Documentation resources: Good, with many additional resources.
• Customization: Basic GUI customizer, similar to Bootstrap customization tool.
• Browser Support: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
• License: MIT

Foundation Description

Foundation is a true professional framework that provides business support, training and consulting. It also provides many resources to help you learn and use the framework faster and easier.

 

Semantic UI

Semantic UI是一个语义化设计的前端开源框架。它利用自然语言原理，从而使代码更加可读和可理解。

• 创作者： Jack Lukic
• 发行： 2013
• 当前版本： 2.2
• 人气： GitHub上有34,762颗星
• 说明： “基于自然语言原则的UI组件框架”。
• 核心概念/原则：Semantic, tag ambivalence, responsive。
• 框架大小： 806 KB
• 预处理器：少
• 响应式布局：是
• 模块化：是
• 启动模板/布局：是，并提供了一些基本的入门模板
• 图标集： Font Awesome
• 额外/附加组件：否
• 独特的部件：Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape。
• 文档资源：非常好，Semantic提供了一个非常有组织的文档，另外还有一个单独的网站提供入门指南、自定义和创建主题。
• 自定义：没有GUI定制器，只有手动定制。
• 浏览器支持： Firefox，Chrome，Safari，IE10 +（仅IE9浏览器前缀），Android 4，Blackberry 10
• 许可证：MIT

Semantic UI说明

Semantic是这里所讨论的所有框架中，最具创新性和全功能的框架。其框架的总体结构、类中清晰逻辑的命名约定方式和语义方面也超过了其它框架。

 

Pure

Pure是一种轻量级的模块化框架，采用纯CSS编写，具有可根据需要一起使用或单独使用的组件。

• 创作者：雅虎
• 发行： 2013
• 当前版本： 0.6.2
• 流行度： GitHub上有16,637颗星
• 说明： “一套小而灵活的CSS模块，能够在每个Web项目中使用。”
• 核心概念/原则： SMACSS，极简主义。
• 框架大小： 16 KB
• 预处理：无
• 响应式布局：是
• 模块化：是
• 启动模板/布局：是
• 图标集：无。可以改用Font Awesome。
• 额外/附加组件：无
• 独特组件：无
• 文档资源：很好
• 自定义：基本GUI皮肤生成器
• 浏览器支持：最新版本的Firefox，Chrome，Safari; IE7 +; iOS 6.x，7.x; Android 4.x
• 许可证： Yahoo! Inc. BSD

Pure说明

Pure为你的项目提供了一个干净的开始，只提供基本框架。对于不需要全功能框架但仅包含在其工作中的特定组件的人来说，pures是一个理想的选择。

 

UIkit

UIkit是一个易于使用和自定义的组件的简洁集合。虽然它不像其它框架那样受欢迎，但它提供了相同的功能和质量。

• 创造者： YOOtheme
• 发行： 2013
• 当前版本： 3.0.0
• 人气：GitHub GitHub上有9,422颗星
• 说明： “用于开发快速而强大的Web界面的轻量级和模块化的前端框架”。
• 核心概念/原则： RWD，移动端优先
• 框架大小： 326.9 KB（如果包含uikit-icons.min.js与SVG图标相关的功能，则为384.4 KB ）
• 预处理器：少，Sass
• 响应式布局：是
• 模块化：是
• 启动模板/布局：是
• 图标集： UIkit自带SVG图标系统和类库，其中包含越来越多的大纲图标。
• 额外/附加组件：是
• 独特的组件：Article, Flex, Cover, HTML Editor
• 文件：好
• 自定义：高级GUI定制程序仅在版本2（以前的版本）中可用
• 浏览器支持： Chrome，Firefox，Safari，IE9 +
• 许可证：MIT

UIkit说明

UIkit成功应用在许多WordPress主题中。它提供了灵活和强大的手动定制机制（以前版本的框架还提供了高级GUI定制程序）。

 

什么是最适合你的框架？

在选择框架时，可以从以下几个方面考虑：

• 所选的框架有足够的人气吗？更多的人气意味着更多的人参与项目，也意味着有更多的教程和社区文章、更多的实例和网站、更多的第三方扩展、更好的相关的Web产品可与其集成。受欢迎程度也意味着框架更具前瞻性，因为具有更大社区的框架不太可能被抛弃。
• 框架是否正在积极发展？一个好的框架需要不断地使用最新的web技术，特别是在移动端方面。
• 框架是否达到成熟？如果一个特定的框架在现实项目中还没有被使用和测试，那么将其用于你的专业项目，可能不是一个明智的选择。
• 框架是否提供了良好的文档？为了方便学习过程，总是需要良好的文档。
• 框架的特异性是什么？这里的要点是，与具有高级别特异性的框架相比，更通用的框架更容易使用。在大多数情况下，最好选择一个应用最小样式的框架，因为它更容易自定义。与重写现有的CSS规则相比，添加新的CSS规则是一个更方便有效的做法。

如果你还不确定使用哪个框架，那么可以采用混合搭配的方式。当某个特定的框架不能满足你的需求时，可以混合使用两个或多个项目的组件。

最后值得一提的是，现在Flexbox和Grid Layout在主流浏览器的最新版本中得到很好的支持，比以往任何时候都更容易构建复杂的布局。这可能会鼓励更多的开发人员放弃前端框架，从头开始编写他们自己想要的布局。

前端开发工具介绍：

Wijmo是一款用TypeScript编写的新一代JavaScript/HTML5控件集。在全球率先支持AngularJS，并提供性能卓越、零依赖的FlexGrid表格控件和图表等多个控件，是构建企业应用程序的全套控件集。

原文链接：https://www.sitepoint.com/5-most-popular-frontend-frameworks-compared/

转载请注明出自：葡萄城控件