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