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 homepage](https://i-blog.csdnimg.cn/blog_migrate/5fc367561fc93141273e040f61273e90.png)
Bootstrap还提供了许多示例来帮助您入门。
![引导示例 Bootstrap examples](https://i-blog.csdnimg.cn/blog_migrate/c3c3c078a54679d3ca738d310eeb3a4b.jpeg)
使用Bootstrap,您可以将不同的组件和布局缝合在一起,以创建有趣的页面设计。 它还提供了大量详细的文档。
![引导文档 Bootstrap documentation](https://i-blog.csdnimg.cn/blog_migrate/77c685aec04a5667fff922349c1b18de.jpeg)
Bootstrap的GitHub存储库列出了19,000多个提交和1,100个贡献者。 它基于MIT许可证,因此(与该列表中的所有框架一样),您也可以参与其中并做出贡献。
![Bootstrap GitHub Bootstrap GitHub](https://i-blog.csdnimg.cn/blog_migrate/cd3637205e05cd3dc6528e5d69a193bc.jpeg)
图案飞
PatternFly是Red Hat的开放源代码(根据MIT许可)CSS框架。 PatternFly采用与Bootstrap不同的方法:Bootstrap是为有兴趣创建漂亮网站的任何人而设计的,而PatternFly主要专注于企业应用程序开发人员,并提供了诸如条形图,图表和导航之类的组件,这些组件对于创建功能强大,指标驱动的仪表板。 实际上,Red Hat使用此CSS框架来设计其产品,例如OpenShift。
![PatternFly主页 PatternFly homepage](https://i-blog.csdnimg.cn/blog_migrate/de38a8ca4369a05886afb9a37fdb8ac2.jpeg)
除了静态HTML,PatternFly还支持ReactJS框架,这是Facebook开发的流行JavaScript框架。
![PatternFly ReactJS支持 PatternFly ReactJS support](https://i-blog.csdnimg.cn/blog_migrate/474ba3c70b9e49b84370a1e3741945d6.jpeg)
PatternFly具有许多适用于企业级应用程序的高级组件,如条形图,图表, 模式和布局。
![PatternFly图表组件 PatternFly chart component](https://i-blog.csdnimg.cn/blog_migrate/400b0533f8e1f3506417a0a9c41a73b2.png)
PatternFly的GitHub页面列出了1,050多个提交和44个贡献者。 PatternFly得到了很多关注,我们非常欢迎您提供帮助。
![PatternFly GitHub PatternFly GitHub](https://i-blog.csdnimg.cn/blog_migrate/47bb4478cdd0386f9a42931580177552.jpeg)
网络的材料组件
Google凭借非常成功的Android平台,以称为Material Design的概念设定了自己的标准设计准则。 材料设计标准旨在在所有Google产品中得到体现,并且根据MIT许可,也可为公众和开源使用。
![材料设计主页 Material Design homepage](https://i-blog.csdnimg.cn/blog_migrate/241ecf9c426afa4cc3cc75ab9c4c7977.jpeg)
Material Design有许多组件 ,“用于创建用户界面的交互式构建块”。 这些按钮,卡片,背景等可用于创建网站或移动应用程序的任何类型的用户界面。
![材料组件页面 Material Components webpage](https://i-blog.csdnimg.cn/blog_migrate/9c317fa631f92ae69fd7134577428a21.jpeg)
维护人员为不同的平台提供详尽的文档。
![材料设计文档 Material Design documentation](https://i-blog.csdnimg.cn/blog_migrate/12adf90218f7b6848afdfb308a0503a8.png)
还有分步教程,其中包含用于实现不同目标的练习。
![材料设计教程 Material Design tutorial](https://i-blog.csdnimg.cn/blog_migrate/d894afc353d861bda36fa3e6f2835671.jpeg)
“材料组件GitHub”页面托管用于不同平台的存储库,包括用于网站开发的Web的材料组件(MDC Web) 。 MDC Web拥有5700多个提交和349个贡献者。
![MDC Web GitHub MDC Web GitHub](https://i-blog.csdnimg.cn/blog_migrate/8cba95f0e80711e59cca70786abb9efb.jpeg)
纯
Bootstrap,Patternfly和MDC Web是功能非常强大CSS框架,但是它们可能非常繁琐和复杂。 如果您想要一个轻量级CSS框架,它本身更接近于编码CSS,但又可以帮助您构建一个漂亮的网页,请尝试使用Pure.css 。 Pure是具有最小占用空间的轻量级CSS框架。 它由Yahoo开发,根据BSD许可是开源的。
![Pure.css主页 Pure.css homepage](https://i-blog.csdnimg.cn/blog_migrate/9e7139d53744c7fa9f8bd117b7e3efa8.png)
尽管它的体积很小,但Pure提供了许多构建漂亮网页所需的组件。
![Pure.css组件 Pure.css components](https://i-blog.csdnimg.cn/blog_migrate/f0ff55d373b97e583630b60d7df1943c.png)
Pure的GitHub页面显示了565多个提交和59个贡献者。
![Pure.css GitHub Pure.css GitHub](https://i-blog.csdnimg.cn/blog_migrate/c222112c8ab818221279b15d71e7667a.jpeg)
基础
Foundation声称是世界上最先进的响应式前端框架。 它提供了用于构建专业网站的高级功能和教程。
![基金会主页 Foundation homepage](https://i-blog.csdnimg.cn/blog_migrate/2f53f27c2f8fc9c00ec90d59513fedfe.jpeg)
许多公司,组织甚至政治家都使用该框架,并且该框架具有大量可用的文档。
![基金会文件 Foundation documentation](https://i-blog.csdnimg.cn/blog_migrate/68d409df2169971525b46707e8afef2b.jpeg)
Foundation的GitHub页面显示了将近17,000个提交和1,000个贡献者。 像该列表中的大多数其他框架一样,它可以在MIT许可证下获得。
![基金会GitHub Foundation GitHub](https://i-blog.csdnimg.cn/blog_migrate/08d6f9ebcfa46cc9b79bac65b125a494.jpeg)
布尔玛
Bulma是一个基于Flexbox的开源框架,可根据MIT许可证获得。 Bulma是一个非常轻量级的框架,因为它只需要一个CSS文件。
![布尔玛主页 Bulma homepage](https://i-blog.csdnimg.cn/blog_migrate/fdccb974b60370ee0abfe9fc6f9c2527.jpeg)
Bulma的文档简洁明了,可轻松选择您想要探索的主题。 它还具有许多Web组件,您可以在设计中使用它们。
![布尔玛文件 Bulma documentation](https://i-blog.csdnimg.cn/blog_migrate/c4e8ba3db13c4f8e082b6db49e727e9b.png)
Bulma的GitHub页面列出了1,400多个提交和300个贡献者。
![Bulma GitHub Bulma GitHub](https://i-blog.csdnimg.cn/blog_migrate/702be6844653a77b9680f735d2b16f1a.jpeg)
骨架
如果甚至Pure对您来说太沉重,也有一个重量更轻的框架称为Skeleton 。 Skeleton库只有大约400行,并且该框架仅提供开始CSS框架之旅的基本组件。
![骨架首页 Skeleton homepage](https://i-blog.csdnimg.cn/blog_migrate/9860f98973565fb632704172a2ccd8ac.png)
尽管简单,但Skeleton提供了详细的文档来帮助您立即上手。
![骨架文档 Skeleton documentation](https://i-blog.csdnimg.cn/blog_migrate/46cd94a6a156296e7d9f27b298e89466.png)
Skeleton的GitHub列出了167个提交和22个贡献者。 但是,这不是最活跃的项目。 它的最新更新是在2014年,因此使用它之前可能需要维护。 由于它是根据麻省理工学院的许可证发布的,您可以自己做。
![骨架GitHub Skeleton GitHub](https://i-blog.csdnimg.cn/blog_migrate/7d606d5efddd18b988fd526c9771b423.jpeg)
物化
Materialize是一个基于Google的Material Design的响应式前端框架,具有由Materialize的贡献者开发的其他主题和组件。
![实现主页 Materialize homepage](https://i-blog.csdnimg.cn/blog_migrate/1ec800d92d42b43f5c6a346fe6f0e8c9.png)
Materialize的文档页面很全面,并且很容易遵循。 其组件页面包括按钮,卡片,导航等。
![实现文档 Materialize documentation](https://i-blog.csdnimg.cn/blog_migrate/9790dc8f87496ea252e3c16e1bbc57b6.png)
Materialize是根据MIT许可获得的一个开源项目,其GitHub列出了3,800多个提交和250个贡献者。
![实现GitHub Materialize GitHub](https://i-blog.csdnimg.cn/blog_migrate/0cb9abb76386671106199be5d53eafea.jpeg)
靴子
Bootflat是从Twitter的Bootstrap派生的开源CSS框架。 与Bootstrap相比,Bootflat更简单,并且框架组件重量更轻。
![Bootflat主页 Bootflat homepage](https://i-blog.csdnimg.cn/blog_migrate/0173112cc44b2baacb0dea3e2eab3c40.png)
Bootflat的文档似乎几乎受到了IKEA的启发-它显示每个组件的图像而没有太多文字。
![Bootflat文档 Bootflat docs](https://i-blog.csdnimg.cn/blog_migrate/a3ed12892947b1d97776b79a7875e559.jpeg)
Bootflat在MIT许可证下可用,其GitHub页面包含159个提交和八个贡献者。
![Bootflat GitHub Bootflat GitHub](https://i-blog.csdnimg.cn/blog_migrate/4ce1fbad019b6851a009e23363348fa8.jpeg)
您应该选择哪个CSS框架?
让其中一些旋转一下,看看要在下一个项目中使用哪个旋转。 另外,我是否错过了任何有趣的开源CSS框架? 请在下面的评论中分享您的反馈和想法。
翻译自: https://opensource.com/article/20/4/open-source-css-frameworks
web前端开源框架