今天就和大家分享9个流行的、强大的前端开源框架，帮助你轻松构建漂亮的网站前端。下面来和小编一起看一看吧!
1、Bootstrap
Bootstrap无疑是最流行的CSS框架，它是最早的Web前端框架，由Twitter开发。Bootstrap还提供了许多示例来帮助你入门。
使用Bootstrap，你可以将不同的组件和布局组合在一起，从而创建有趣的页面设计。它还提供了大量详细的文档。目前在Github上已经有1100多个贡献者，19000多个提交。(Github地址：https://github.com/twbs/bootstrap)
2、PatternFly
PatternFly是Red
Hat的开源CSS框架，和Bootstrap不同的是，Bootstrap是为那些想要创建漂亮网站的人而设计的，而PatternFly主要专注于企业应用程序开发人员，提供诸如条形图、图表、导航之类的组件，实际上Red
Hat就是使用它创建了OpenShift。
除了静态HTML，PatternFly还支持ReactJS框架，这是Facebook开发的流行JavaScript框架。PatternFly具有许多适用于企业级应用程序的高级组件，如条形图，图表，模式和布局。
PatternFly在GitHub上一共有1,050多个提交和44个贡献者。(Github地址：https://github.com/patternfly/patternfly)
3、MaterialComponentsfortheweb
MaterialComponentsfortheweb(MDCWeb)，是谷歌专为Web设计的全新前端框架。MDC
Web可帮助开发人员执行Material
Design，组件由谷歌的核心工程师团队和UX设计人员开发。这些组件可以建立可靠的开发工作流程，以构建美观且功能强大的Web项目。
MDC
Web在Github上共有5700多个提交和349个贡献者。(Github地址：https://github.com/material-components/material-components-web)
4、Pure
Bootstrap，Patternfly和MDC
Web是功能非常强大的CSS框架，但它们可能非常繁琐和复杂。如果你想要一个轻量级的CSS框架，可以尝试Pure.css，它本身更接近于CSS编程，但又可以帮助你构建一个不错的网页。Pure是具有最小占用空间的轻量级CSS框架，它由Yahoo开发，根据BSD许可是开源的。
Pure在Github上共有565多个提交和59个贡献者。(Github地址：https://github.com/pure-css/pure)
5、Foundation
Foundation声称是世界上最先进的响应式前端框架。它提供了用于构建专业网站的高级功能和教程。许多公司，组织都使用该框架，并且该框架具有大量可用的文档。
Foundation在Github上有将近17000个提交和1000个贡献者。(Github地址：https://github.com/foundation/foundation-sites)
6、Bulma
Bulma是一个基于Flexbox的开源框架，可根据MIT许可证开源。Bulma是一个非常轻量级的框架，因为它只需要一个CSS文件。Bulma拥有简洁明了的文档，可轻松选择你想要的主题。它还具有许多Web组件，你可以在设计中使用它们。
Bulma在Github上有1400多个提交和300个贡献者。(Github地址：https://github.com/jgthms/bulma)
7、Skeleton
如果说还有什么框架比Pure更加轻量级，那一定是Skeleton。Skeleton库只有大约400行，并且该框架仅提供一些基本的CSS框架组件。尽管如此，Skeleton还是提供了详细的文档来帮助你快速上手。
Skeleton在Github上共有167个提交和22个贡献者，但它不是最活跃的项目，它最新一次的更新是在2014年。(Github地址：https://github.com/dhg/Skeleton)
8、Materialize
Materialize是一个基于Material
Design风格的一个现代化的响应式前端框架，解决了最繁重的工作，结合你的自定义组件，为你提供默认的样式。Materialize的文档页面非常全面，并且很容易遵循。其组件页面包括按钮，卡片，导航等。
Materialize在Github上共有3800多个提交和250个贡献者。(Github地址：https://github.com/Dogfalo/materialize)
9、Bootflat
Bootflat是从Twitter的Bootstrap派生的开源CSS框架。与Bootstrap相比，Bootflat更简单，并且更加轻量级。Bootflat的文档似乎几乎受到了IKEA的启发，大部分都是图像，没有太多的文字。
Bootflat是在MIT许可证下开源的，在Github上有159个提交和8个贡献者。(Github地址：https://github.com/bootflat/bootflat.github.io)
以上就是小编今天为大家分享的关于Web前端开发必备的开源框架有哪些的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利！
开源最前线(ID：OpenSourceTop)猿妹编译
链接：#/article/20/4/open-source-css-frameworks
《GitHub精选》是我们分享Github中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个使用纯CSS实现动画加载效果的项目——SpinKit。
SpinKit通过使用transform和opacity属性实现了包括方块翻转、圆点旋转、圆环缩放和九宫格渐变等10余种动画加载的效果。
部分效果代码：
其他效果：
GitHub: https://github.com/tobiasahlin/SpinKit
在致力于开源事业的同时，Github也使用一些非常优秀的开源项目的来打造自己的平台与服务，本文总结了Github所用到各种开源项目，它们分别扮演着不同的角色。1.Linguist
Linguist直译是语言学家的意思，采用Ruby开发。使用它可以自动分辨项目所使用的开发语言。Github使用该开源项目主要是用来探测代码所用语言，突出显示代码、忽略二进制文件、防止文件生成存在差异以及生成语言分解图等。
托管地址： https://github.com/github/linguist
2.pjax
pjax是对ajax + pushState的封装，让你可以很方便的使用pushState技术。同时支持缓存和本地存储，再次访问的时候可以直接读取本地数据。展现方式支持动画技术，可以使用系统自带的动画方式，也可以自定义动画展现方式。
官网： http://pjax.heroku.com/
托管地址： https://github.com/defunkt/jquery-pjax
3.Elasticsearch
Elasticsearch是一个实时的、分布式的RESTful搜索引擎，基于Apache Lucene开发。具备高可靠性，支持非常多的企业级搜索用例。它对外提供一系列基于Java和HTTP的API，用于索引、检索、修改大多数配置。
官网： http://www.elasticsearch.org/
托管地址： https://github.com/elasticsearch/elasticsearch
4.Ruby on Rails
Rails是一个使用Ruby语言写的开源Web应用框架，它是严格按照MVC结构开发的。它努力使自身保持简单，来使实际的应用开发代码更少，使用最少的配置。
官网： http://rubyonrails.org/
托管地址： https://github.com/rails/rails
5.redis
Redis是一个开源、支持网络、基于内存、键值对存储的数据库。基于C语言开发，与其他很多键值对数据库的不同之处在于， Redis不仅支持简单的字符串键值对，它还提供了一系列数据结构类型值，比如列表、哈希、集合和有序集， 并在这些数据结构类型上定义了一套强大的API。
官网： http://redis.io/
托管地址： https://github.com/antirez/redis
6.sprockets
sprockets是一个Ruby库，用于编译和服务Web资产。它可以用来检查JavaScript和CSS等文件之间的依赖关系，它还拥有一个强大的预处理器管道，允许开发者在CoffeeScript、Sass、SCSS和LESS等语言里编写资产。
托管地址： https://github.com/sstephenson/sprockets
7.libgit2
libgit2是一个可移植、纯C语言实现的Git核心开发包，作为一款带有稳固API的可重入链接库，libgit2允许你使用任何语言来编写Git应用。此外，libgit2可以应用在各个平台上，包括Unix、Linux、MacOS X、Windows等。
官网： http://libgit2.github.com/
托管地址： https://github.com/libgit2/libgit2
8.Rugged
Rugged是一个C语言实现的库，主要用来支持在Ruby中访问libgit2开发包。
托管地址： https://github.com/libgit2/rugged
9.bcrypt-ruby
bcrypt-ruby是一个用于OpenBSD bcrypt()密码哈希算法的Ruby绑定，开发者可以使用它把用户密码变成哈希数，安全地存储用户密码，预防黑客攻击。
官网： http://bcrypt-ruby.rubyforge.org
托管地址： https://github.com/codahale/bcrypt-ruby
10.html-pipeline
Github HTML处理过滤器和工具，是由几个HTML工具打包而成的。该模块还包含一个基于内容过滤来定义DOM的小型框架。
托管地址： https://github.com/jch/html-pipeline
11.gemoji
gemoji里面主要包含emoji表情的图片和名称。
托管地址： https://github.com/github/gemoji
12.Jekyll
Jekyll是一个静态站点生成器，它会根据网页源码生成静态文件。它提供了模板、变量、插件等功能，所以实际上可以用来编写整个网站。
官网： http://jekyllrb.com/
托管地址： https://github.com/jekyll/jekyll
13.Gollum
Gollum是一个简单的基于Git的wiki系统，Github的wiki就是由它实现的。支持markdown编写。它同时带有一个本地的前端，你可以在浏览器里编写保存页面，系统会在后端自动提交。因为它是一个Git repo，所以你也可以把它push到GitHub。
托管地址： https://github.com/gollum/gollum
14.Octokit
Octokit是Github API客户端库集合，允许开发者使用自己擅长的编程语言来访问Github API。Octokit项目包含Ruby、Objective-C和.NET、GO客户端。
托管地址： https://github.com/octokit
15.Hubot
Hubot是Github开源的运维机器人，它在Github员工的日常生活中扮演着非常重要的角色。它非常灵活，任何人都可以编写自己的脚本来扩展基本功能。脚本使用的语言是CoffeeScript，而Hubot运行在Node.js上。
官网： http://hubot.github.com/
托管地址： https://github.com/github/hubot
16.D3.js
D3.js是一个基于JavaScript数据展示库，用于操作基于数据的HTML文档。它能够帮助我们以HTML或SVG的形式快速可视化展示，进行交互处理，合并平稳过渡，在Web页面演示动画。它既可以作为一个可视化框架（如Protovis），也可以作为构建页面的框架（如jQuery）。
官网： http://d3js.org/
托管地址： https://github.com/mbostock/d3
17.Plax
Plax是一个jQuery插件，可以通过鼠标的悬浮或移动来触发视差滚动效果。开发者可以使用它制作404、500以及About页面。
官网： [/url][url=http://cameronmcefee.com/plax/]http://cameronmcefee.com/plax/
托管地址： [/url][url=https://github.com/cameronmcefee/plax]https://github.com/cameronmcefee/plax
18.Ace
Ace是一个开源的、独立的、基于浏览器的代码编辑器，可以嵌入到任何Web页面或JavaScript应用程序中。Ace支持超过40种语言语法高亮，并能够处理代码多达400万行的大型文档。Ace开发团队称，Ace在性能和功能上可以媲美本地代码编辑器（如Sublime Text、TextMate和Vim等）。
官网： [/url][url=http://ace.c9.io/]http://ace.c9.io/
托管地址： [/url][url=https://github.com/ajaxorg/ace]https://github.com/ajaxorg/ace
19.Zepto.js
Zepto是为现代浏览器打造的轻量级JavaScript库，它与jQuery有着类似的API。如果你会jQuery，那么也就会使用Zepto了。
官网： http://zeptojs.com/
托管地址： [/url][url=https://github.com/madrobby/zepto]https://github.com/madrobby/zepto
20.ZeroClipboard
ZeroClipboard使用一个不可视化的Adobe Flash动画和一个JavaScript接口即可轻易把文本的拷贝到粘贴板的库。
官网： [/url][url=http://zeroclipboard.org/]http://zeroclipboard.org/
托管地址： https://github.com/zeroclipboard/zeroclipboard
21.Charlock Holmes
Charlock Holmes是一个字符编码检测库，主要用于检测字符和代码转换，以确保代码字符为UTF-8。
托管地址： https://github.com/brianmario/charlock_holmes
22.Puppet
Puppet是一个自动管理引擎，可以适用于Linux、Unix以及Windows平台。所谓配置管理系统，就是管理机器里面诸如文件、用户、进程、软件包这些资源。无论是管理1台，还是上万台机器Puppet都能轻松搞定。
官网： http://www.puppetlabs.com/puppet/introduction/
托管地址： https://github.com/puppetlabs/puppet
23.Moment.js
Moment.js是一款非常轻量且健壮的JavaScript日期处理类库，提供了日期格式转换、日期验证等功能。Github使用它主要用来显示前端时钟。
官网： http://momentjs.com/
托管地址： [/url][url=https://github.com/moment/moment]https://github.com/moment/moment
24.Bower
Bower是由Twitter开源的一款包管理器，主要用于Web前端开发。它提供了一套通用、客观的解决方案。它通过一个API暴露包之间的依赖模型，这样更利于使用更合适的构建工具。Bower没有系统级的依赖，在不同App之间也不互相依赖，依赖树是扁平的。
官网： http://bower.io/
托管地址： [/url][url=https://github.com/bower/bower]https://github.com/bower/bower
25.Resque
Resque是一个基于Redis的后端Ruby库，由Github开源。其主要用来创建后台任务、并且把这些任务安置在多个队列上，等待处理。它还自带前台管理功能，方便查看执行情况。
托管地址： [/url][url=https://github.com/github/resque]https://github.com/github/resque
可以说，开源成就了Github，Github也推动了全球开源事业的发展。越来越多的互联网公司重视开源事业的发展，并且积极投身到开源事业当中。
