当大多数人想到 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 主要关注企业应用程序开发人员，并提供
除了静态 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 次提交和八位贡献者。
您应该选择哪个 CSS 框架？
您有许多开源 CSS 框架可供选择，具体取决于您希望工具的功能丰富程度或简单程度。与所有技术决策一样，对于所有事物或所有人来说，没有一个绝对正确的答案；只有在给定的时间和给定的项目中做出正确的选择。
尝试其中的几个，看看您想在下一个项目中使用哪一个。另外，我是否遗漏了任何有趣的开源 CSS 框架？请在下面的评论中分享您的反馈和想法。
16 条评论