当大多数人想到 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 主要关注企业应用程序开发人员，并提供
除了静态 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 条评论