当大多数人想到 Web 开发时，通常会想到 HTML 或 JavaScript。他们通常会忘记对网站的体验能力影响更大的技术：层叠样式表 (CSS)。根据维基百科，CSS 是任何网页最重要的和最常被遗忘的部分之一，即使它是万维网的三大基石技术之一。
本文探讨了九个流行的、强大的开源框架，这些框架使 CSS 开发变得简单明了，从而可以构建漂亮的网站前端。
| 名称 | 它是什么 | 许可证 |
|---|---|---|
| Bootstrap | 最流行的 CSS 框架；由 Twitter 出品 | MIT |
| PatternFly | 开源框架；由 Red Hat 出品 | MIT |
| Material Components for the web | 开源框架；由 Google 出品 | MIT |
| Pure | 开源框架；由 Yahoo 出品 | BSD |
| Foundation | 前端框架；由 Zurb Foundation 出品 | MIT |
| Bulma | 基于 Flexbox 的现代 CSS 框架 | MIT |
| Skeleton | 轻量级 CSS 框架 | MIT |
| Materialize | 基于 Material Design 的 CSS 框架 | MIT |
| Bootflat | 基于 Bootstrap 3.3.0 的开源 Flat UI 工具包 | MIT |
如果您更喜欢观看我的视频来了解实时探索过程，可以观看我的视频。
Bootstrap
Bootstrap 无疑是最流行的 CSS 框架，也是所有前端 Web 设计的开端。Bootstrap 由 Twitter 开发，提供了可用性、功能性和可扩展性。
Bootstrap 还提供了大量的示例来帮助您入门。
使用 Bootstrap，您可以将不同的组件和布局拼接在一起，创建有趣的页面设计。它还提供了大量详细的文档。
Bootstrap 的 GitHub 仓库列出了超过 19,000 次提交和 1,100 位贡献者。它基于 MIT 许可证，因此（与此列表中的所有框架一样），您可以参与并贡献力量。
PatternFly
PatternFly 是 Red Hat 的一个开源（在 MIT 许可证下）CSS 框架。PatternFly 采用的方法与 Bootstrap 不同：Bootstrap 旨在为任何有兴趣创建漂亮网站的人提供服务，而 PatternFly 主要专注于企业应用程序开发人员，并提供组件，例如条形图、图表和导航，这些组件对于创建强大的、指标驱动的仪表板非常有吸引力。事实上，Red Hat 在其产品（例如 OpenShift）的设计中使用了这个 CSS 框架。
除了静态 HTML，PatternFly 还支持 ReactJS 框架，这是一个由 Facebook 开发的流行的 JavaScript 框架。
PatternFly 具有许多高级组件，例如条形图、图表、模态框和布局，这些组件适用于企业级应用程序。
PatternFly 的 GitHub 页面列出了超过 1,050 次提交和 44 位贡献者。PatternFly 越来越受到关注，非常欢迎您贡献力量。
Material Components for the web
凭借其非常成功的 Android 平台，Google 通过一个名为 Material Design 的概念，设定了自己的标准设计指南。Material Design 标准旨在反映在所有 Google 产品中，它们也向公众开放，并在 MIT 许可证下开源。
Material Design 有许多组件，“用于创建用户界面的交互式构建块”。这些按钮、卡片、背景幕等可用于为网站或移动应用程序创建任何类型的用户界面。
维护者为不同的平台提供了详尽的文档。
还有逐步教程，其中包含用于完成不同目标的练习。
Material Components GitHub 页面托管了不同平台的仓库，包括用于网站开发的 Material Components for the web (MDC Web)。MDC Web 有超过 5,700 次提交和 349 位贡献者。
Pure
Bootstrap、Patternfly 和 MDC Web 是非常强大的 CSS 框架，但它们可能非常庞大和复杂。如果您想要一个更轻量级的 CSS 框架，它更接近于自己编写 CSS，但又能帮助您构建漂亮的网页，请尝试 Pure.css。Pure 是一个轻量级的 CSS 框架，占用空间极小。它由 Yahoo 开发，并在 BSD 许可证下开源。
尽管 Pure 体积小巧，但它提供了构建美观网页所需的许多组件。
Pure 的 GitHub 页面显示了超过 565 次提交和 59 位贡献者。
Foundation
Foundation 声称是世界上最先进的响应式前端框架。它为构建专业的网站提供了高级功能和教程。
许多公司、组织甚至政治家都在使用这个框架，并且它有大量的文档可供使用。
Foundation 的 GitHub 页面显示了近 17,000 次提交和 1,000 位贡献者。与此列表中的大多数其他框架一样，它在 MIT 许可证下可用。
Bulma
Bulma 是一个基于 Flexbox 的开源框架，并在 MIT 许可证下可用。Bulma 是一个非常轻量级的框架，因为它只需要一个 CSS 文件。
Bulma 拥有简洁明了的文档，您可以轻松选择要浏览的主题。它还有许多 Web 组件，您可以直接选择并在您的设计中使用。
Bulma 的 GitHub 页面列出了超过 1,400 次提交和 300 位贡献者。
Skeleton
如果即使 Pure 对您来说也太重了，那么还有一个更轻量级的框架，名为 Skeleton。Skeleton 库只有大约 400 行代码，并且该框架仅提供启动 CSS 框架之旅所需的基本组件。
尽管 Skeleton 非常简单，但它提供了详细的文档来帮助您立即入门。
Skeleton 的 GitHub 列出了 167 次提交和 22 位贡献者。但是，它不是最活跃的项目；它的最后一次更新是在 2014 年，因此在使用它之前可能需要进行一些维护。由于它是在 MIT 许可证下发布的，因此您可以随意自行维护。
Materialize
Materialize 是一个响应式前端框架，基于 Google 的 Material Design，并由 Materialize 的贡献者开发了其他主题和组件。
Materialize 的文档页面内容全面且易于理解。它的组件页面包括按钮、卡片、导航等等。
Materialize 是一个在 MIT 许可证下的开源项目，其 GitHub 列出了超过 3,800 次提交和 250 位贡献者。
Bootflat
Bootflat 是一个源自 Twitter Bootstrap 的开源 CSS 框架。与 Bootstrap 相比，Bootflat 更简单，框架组件更轻量级。
Bootflat 的 文档 几乎像是受到 IKEA 的启发——它显示了每个组件的图像，没有太多文字。
Bootflat 在 MIT 许可证下可用，截至撰写本文时，其 GitHub 页面包含 159 次提交和 8 位贡献者。
您应该选择哪个 CSS 框架？
您有许多开源 CSS 框架可供选择，具体取决于您希望工具的功能丰富程度或简单程度。与所有技术决策一样，对于所有事物或每个人来说，没有唯一的正确答案；只有在给定时间和给定项目下的正确选择。
尝试一下这些框架，看看您想在下一个项目中使用哪个。此外，我是否遗漏了任何有趣的开源 CSS 框架？请在下面的评论中分享您的反馈和想法。
16 条评论