web前端开源框架_9个用于前端Web开发的开源CSS框架

web前端开源框架

当大多数人想到Web开发时，通常会想到HTML或JavaScript。 他们通常会忘记对访问网站的能力有更大影响的技术： 级联样式表（CSS） 。 根据Wikipedia的说法，CSS既是网页中最重要也是最常被遗忘的部分之一，尽管它是万维网的三大基础技术之一。

本文探讨了九个流行，强大且开放源代码的框架，这些框架使CSS开发可以轻松地构建漂亮的网站前端。

名称	这是什么	执照
Bootstrap	最受欢迎CSS框架； 通过推特	麻省理工学院
PatternFly	开源框架； 通过红帽	麻省理工学院
Material Components for the web	开源框架； 由Google	麻省理工学院
Pure	开源框架； 由Yahoo	BSD
Foundation	前端框架； 由Zurb Foundation提供	麻省理工学院
Bulma	基于Flexbox的现代CSS框架	麻省理工学院
Skeleton	轻量级CSS框架	麻省理工学院
Materialize	基于Material DesignCSS框架	麻省理工学院
Bootflat	基于Bootstrap 3.3.0的开源Flat UI套件	麻省理工学院

如果您喜欢我在现场直播时继续观看，可以观看我的视频。

引导程序

Bootstrap无疑是最流行CSS框架，它是开始所有前端Web设计的框架。 Bootstrap由Twitter开发，提供可用性，功能和可扩展性。

Bootstrap还提供了许多示例来帮助您入门。

使用Bootstrap，您可以将不同的组件和布局缝合在一起，以创建有趣的页面设计。 它还提供了大量详细的文档。

Bootstrap的GitHub存储库列出了19,000多个提交和1,100个贡献者。 它基于MIT许可证，因此（与该列表中的所有框架一样），您也可以参与其中并做出贡献。

图案飞

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得到了很多关注，我们非常欢迎您提供帮助。

网络的材料组件

Google凭借非常成功的Android平台，以称为Material Design的概念设定了自己的标准设计准则。 材料设计标准旨在在所有Google产品中得到体现，并且根据MIT许可，也可为公众和开源使用。

Material Design有许多组件 ，“用于创建用户界面的交互式构建块”。 这些按钮，卡片，背景等可用于创建网站或移动应用程序的任何类型的用户界面。

维护人员为不同的平台提供详尽的文档。

还有分步教程，其中包含用于实现不同目标的练习。

“材料组件GitHub”页面托管用于不同平台的存储库，包括用于网站开发的Web的材料组件（MDC Web） 。 MDC Web拥有5700多个提交和349个贡献者。

纯

Bootstrap，Patternfly和MDC Web是功能非常强大CSS框架，但是它们可能非常繁琐和复杂。 如果您想要一个轻量级CSS框架，它本身更接近于编码CSS，但又可以帮助您构建一个漂亮的网页，请尝试使用Pure.css 。 Pure是具有最小占用空间的轻量级CSS框架。 它由Yahoo开发，根据BSD许可是开源的。

尽管它的体积很小，但Pure提供了许多构建漂亮网页所需的组件。

Pure的GitHub页面显示了565多个提交和59个贡献者。

基础

Foundation声称是世界上最先进的响应式前端框架。 它提供了用于构建专业网站的高级功能和教程。

许多公司，组织甚至政治家都使用该框架，并且该框架具有大量可用的文档。

Foundation的GitHub页面显示了将近17,000个提交和1,000个贡献者。 像该列表中的大多数其他框架一样，它可以在MIT许可证下获得。

布尔玛

Bulma是一个基于Flexbox的开源框架，可根据MIT许可证获得。 Bulma是一个非常轻量级的框架，因为它只需要一个CSS文件。

Bulma的文档简洁明了，可轻松选择您想要探索的主题。 它还具有许多Web组件，您可以在设计中使用它们。

Bulma的GitHub页面列出了1,400多个提交和300个贡献者。

骨架

如果甚至Pure对您来说太沉重，也有一个重量更轻的框架称为Skeleton 。 Skeleton库只有大约400行，并且该框架仅提供开始CSS框架之旅的基本组件。

尽管简单，但Skeleton提供了详细的文档来帮助您立即上手。

Skeleton的GitHub列出了167个提交和22个贡献者。 但是，这不是最活跃的项目。 它的最新更新是在2014年，因此使用它之前可能需要维护。 由于它是根据麻省理工学院的许可证发布的，您可以自己做。

物化

Materialize是一个基于Google的Material Design的响应式前端框架，具有由Materialize的贡献者开发的其他主题和组件。

Materialize的文档页面很全面，并且很容易遵循。 其组件页面包括按钮，卡片，导航等。

Materialize是根据MIT许可获得的一个开源项目，其GitHub列出了3,800多个提交和250个贡献者。

靴子

Bootflat是从Twitter的Bootstrap派​​生的开源CSS框架。 与Bootstrap相比，Bootflat更简单，并且框架组件重量更轻。

Bootflat的文档似乎几乎受到了IKEA的启发-它显示每个组件的图像而没有太多文字。

Bootflat在MIT许可证下可用，其GitHub页面包含159个提交和八个贡献者。

您应该选择哪个CSS框架？

让其中一些旋转一下，看看要在下一个项目中使用哪个旋转。 另外，我是否错过了任何有趣的开源CSS框架？ 请在下面的评论中分享您的反馈和想法。

翻译自: https://opensource.com/article/20/4/open-source-css-frameworks

web前端开源框架