当大多数人想到 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 的开源扁平化 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 使用此 CSS 框架来设计其产品，例如 OpenShift。
除了静态 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 的 文档 几乎受到了宜家的启发——它显示了每个组件的图像，没有太多文字。
Bootflat 在 MIT 许可证下可用，截至撰写本文时，其 GitHub 页面包含 159 个提交和 8 个贡献者。
您应该选择哪个 CSS 框架？
您有很多开源 CSS 框架可供选择，具体取决于您希望工具的功能有多丰富或多简单。 像所有的技术决策一样，没有适用于所有事情或所有人的唯一正确答案； 只有适用于特定时间和特定项目的正确选择。
试用其中的几个，看看您想在下一个项目中使用哪个。 另外，我是否遗漏了任何有趣的开源 CSS 框架？ 请在下面的评论中分享您的反馈和想法。
16 条评论