当大多数人想到 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 在其产品（如 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 条评论