10 个最受欢迎的开源前端 Web UI 工具包

您可以通过使用前端 UI 工具包来节省大量的开发时间。 最受欢迎的是 Bootstrap，尽管有太多同类网站依赖于该框架。

为了给你一些多样性，我挑选了一些最好的新开源 UI 框架。

这些都有自己独特的样式和对动态组件的不同级别的支持。 但是，如果您将这些框架与一些 JavaScript 插件配对，您几乎可以构建任何东西。

您可能还喜欢：20 个响应式和轻量级的 CSS 框架，用于快速入门。

1. UIKit

UIKit 框架是轻量级的，易于定制，易于附加。 它遵循模块化结构，您将在其中使用可重用的类构建页面元素。

它非常适合构建新页面，而无需编写自己的网格或滚动自己的字体堆栈。 这个框架甚至带有一个独特的图标集，您可以使用网络字体将其添加到您的页面中。

使用 UIKit，您可以与任何包管理器（通常是 npm）一起运行 Sass 或 Less。

再加上大量的组件，您可以嵌入从上传字段到面包屑等等的任何内容。

2. 基础

Zurb 的 Foundation 库就在 Twitter 的 Bootstrap 之上。 但是，Foundation 似乎由于其不太风格化的界面而受到较少关注。

使用 Foundation，您可以访问自定义界面元素、组件和默认网格。 构建一个出色的前端所需的一切都可以在 Foundation 库中找到。

如果您想了解更多信息，请查看他们的展示页面。 它包含大量运行 Foundation 的大型站点，具有自定义网格、响应式功能，基本上，您在新 Web 项目中所需的一切。

3. 毫克

对于前端开发的极简方法，请查看 Milligram。 这个开源 CSS 库非常小，并带有一堆非常简单的界面功能。

它通过 Bower、Yarn 和 npm 工作，因此可以适应任何包管理工作流程。

唯一的问题是 Milligram 需要 Normalize 库，因此您必须将其添加到您的页面中。 但是如果你有一个 CSS 缩小工具，你可以轻松地将这两个库组合在一起并减少你的 HTTP 请求。

4. 一个节点

这是一个较新的前端库，它实际上提供了一些非常疯狂的模块。

One-Nexus 框架非常庞大。 它支持响应式设计和触摸设备，在 Sass 上运行，并与自动构建工具一起使用。 但是，我确实认为这是开始时更复杂的框架之一。

如果您已经熟悉框架和命令行，那么 One-Nexus 真的很棒。 它有如此多的模块，它会让你头晕目眩！

但是可能需要一些时间来适应设置并正确配置初始布局。

5.语义UI

如果您正在寻找经过测试的框架，请查看 Semantic UI。 这是一个漂亮的前端库，目前在 v2.2 中，具有大量功能。

我认为 Semantic 就像未知的用于前端开发的 Bootstrap。 它在主流编码器中并不流行，但它具有与 Bootstrap 相同的优点。

语义库包括按钮、选项卡、下拉菜单以及您需要的一切。 Plus 提供了简单的调试和一堆很棒的主题，所以你可以从一开始就自定义你的布局。

6.纯CSS

我在一些小项目中使用了 Pure CSS，并且非常喜欢它。 这是最酷的框架之一，因为它允许您自定义文件以包含您需要的任何功能。

您可以在入门页面上找到更多信息，其中包括下载链接和一些设置指南。

请注意，Pure 的美学感觉非常简约，但不是太简单。 他们模仿了一点 Bootstrap 以及来自谷歌材料设计的一些指针。 一个有趣的库，可用于任何个人和商业项目。

7. 墨水接口套件

使用 Ink Interface Kit，您可以构建一些令人难以置信的响应式页面。 它们看起来很简单，并且遵循非常简单的代码格式，但这通常是您在前端框架中想要的。

Ink 甚至带有自己的 JS 库，您可以在 vanilla JS 之上运行。 如果您以前从未使用过 Ink，则需要进行一些调整。 然而，它是一个庞大的库，在语法上可与 jQuery 相媲美。

它在 Sass 上运行，与语义 HTML 一起工作，感觉就像任何出色的前端框架。

8.基础CSS

我还没有对 GroundworkCSS 做很多测试，但这是一个强大的响应式框架。

目前在 2.x 版本中，您可以下载两种样式的整个 Groundwork 库：基本的 HTML/CSS/JS 或 Ruby on Rails 的模板。

两者的工作方式相同，并且都为编码可用页面提供了强大的前端系统。

查看他们的演示布局，了解它在您的网站中的外观。

9.物化.css

自从谷歌宣布他们转向材料设计以来，它已经成为最大的 UI 设计语言之一。 虽然它最初是为 Android 构建的，但它通过许多框架（如 Materialise 克隆样式）进入了网络。

整个框架按照您的预期运行：完全响应、符合标准，并支持所有浏览器的自定义重置。

唯一的区别是您的默认元素采用材料设计风格。

虽然这可能是我最喜欢的可用材料框架，但您可以浏览其他框架，看看还有什么吸引您的眼球。

10. 面漆

在性能方面，您不能忽视代码的质量。 Topcoat 将此作为一个考虑到性能的框架。

它是完全可主题化的，并且非常容易使用易于阅读的 HTML 和 CSS 进行自定义。 您所做的任何编辑都将遵循一个清晰的结构，其中包含 CSS 的 BEM 命名约定。

Topcoat 的真正好处是负载测试和对性能的关注。 任何需要快速加载的自定义布局的人都应该研究 Topcoat。

11. 花瓣

Petal 是市场上最新的 CSS 框架之一。 同样，它完全响应，100% 开源，并且可以支持此列表中的任何其他主要框架。

但它非常小，意味着要保持这种状态。 它基于 Less CSS 预处理器，并且也需要 Normalize。

最终，这是一个超小型的框架，应该会吸引 Less CSS 开发人员。 您也可以查看在线文档以获取代码片段和页面元素的实时示例。