关键词：
看看 CSS 在过去几年的巨大变化和快速发展，你就不会对它今年的开源工具大产量感到惊讶了。这些 CSS 库、框架和工具的建立不仅给我们提供了学习的视角，更给我们的工作与生活带来了便利。
本文精选了 50 款 2016 年发布的 CSS 库、框架和工具供大家享用，希望它们对您有所帮助。
分类快速预览：CSS 库，CSS Spinners，CSS 图像特效，CSS 实用程序，设计指南工具，响应式邮件与通讯列表框架，Flexbox 布局工具和框架，CSS 布局框架和 material design 框架。
CSS 库
hamburgers：CSS 动画图标集
传送门：https://jonsuh.com/hamburgers/
Balloon.css：一款非常小巧的提示框组件。
传送门：http://kazzkiq.github.io/balloon.css/
StarWarsIntro.css：模拟星球大战片头滚动字幕特效的 CSS 库
传送门：https://polarnotion.github.io/starwarsintro/
EQCSS：让你能够编写元素查询式的 CSS 样式
传送门：http://elementqueries.com/
Basscss：轻量级的 CSS 基本元素样式、工具、颜色和布局模块，用开开发高性能 Web 页面。
Tootik：纯 CSS 工具提示库
传送门：https://eliorshalev.github.io/tootik/
PostCSS.parts：可搜索的 PostCSS 插件目录
voxel.css：轻量级 3D CSS 体素库
wysiwyg.css：使用单个 CSS 类即可对 TinyMCE 或 Markdown 生成的内容进行样式化
传送门：http://jgthms.com/wysiwyg.css/
Tipograf：轻量级的纯 CSS 字体排版库
传送门：https://github.com/tiaanduplessis/tipograf
Spinners & Loading 动画库
Spinners：用 HTML 和 CSS 实现的“加载图标”动画的集合
传送门：https://boguz.github.io/Spinners/
loading indicators：纯文本，纯 CSS，不依赖字体的内联加载指示器
传送门：http://tawian.io/text-spinners/
CSS Loader：简单的 loader/spinner 库，使用一个 DIV 和 CSS 即可创建
传送门：http://www.raphaelfabeni.com.br/css-loader/
CSS 图像特效
Imagehover.css：可扩展的、轻量级的图像悬停效果 CSS 库
HUE.css：含 49 项逼真的 CSS 渐变背景样式
传送门：http://evankarageorgos.github.io/hue/grid.html
Diffee Checker：利用 CSS blend mode 来即时查看两个网页的视觉差异
CSS Image Filters：CSS Filter 教程，库和工具的集合
传送门：https://speckyboy.com/css-image-filter-toolbox/
CSSgram：用 CSS filter 和 blend mode 来模拟 Instagram 风格的滤镜
CSSCO：灵感来自 VSCO 和 CSSgram 的 CSS 摄影滤镜集合
CSS 实用程序
stylelint：强大的现代 CSS linter 工具
CSS Purge：每看一次你都能给你的网站节约 1KB 流量
cssnano：基于 PostCSS 生态系统的 CSS 压缩工具
WAIT! Animate：用以计算 CSS 动画关键帧百分比
传送门：http://waitanimate.wstone.io/#/
MaintainableCSS：用以编写模块化，可扩展和可维护的 CSS
传送门：http://maintainablecss.com/
Brand-Colors：400 多种品牌颜色的集合（SCSS，Less，Sass，Stylus＆CSS）
设计指南工具和资源
Styleguide：轻松创建你的在线 styleguide
传送门：http://livingstyleguide.devbridge.com/
Atomic Docs：前端样式指南生成器和 SASS 组件管理器
Styleguide Toolbox：模板, UI 部件, 工具和生成器集合
传送门：https://speckyboy.com/styleguide-toolbox/
响应式电子邮件和通讯列表框架
Foundation for Emails 2：快速创建响应式电子邮件
MJML：标识语言，让响应式邮件编写更轻松
传送门：https://mjml.io/
Flexbox 布局工具和框架
Flex Layout Attribute（FLA）：CSS Flexbox 布局助手
传送门：http://progressivered.com/fla/
Flexbox Grid：基于 flex 布局的网格系统
Bulma：基于 Flexbox 布局的现代 CSS 框架
传送门：http://bulma.io/
Flexbox Playground：用于学习和构建 Flexbox 布局的便利工具
传送门：http://codepen.io/enxaneta/details/adLPwv
Flexbox Patterns：用于使用 CSS flexbox 构建用户界面的资源集合
传送门：http://www.flexboxpatterns.com/home
CSS 布局框架
Driveway：纯 CSS masonry 布局助手
传送门：http://jh3y.github.io/driveway/
Bricklayer：轻量级、无依赖的 Pinterest 风格的层叠网格布局库
Simple Grid：响应式，轻量，简约的 CSS 网格系统
BlazeCSS：用于快速构建网站的开源、模块化 CSS 框架
Vital CSS Framework：用于现代 Web 应用的低入侵性的 CSS 框架
Aleut.css：具有可扩展性的强大的 web 框架
传送门：http://aleutcss.github.io/
Gutenberg.css：为打印而生的现代框架
传送门：https://github.com/BafS/Gutenberg
mini.css：小型 Sass-y 响应式移动 CSS 框架
传送门：https://chalarangelo.github.io/mini.css/
Picnic CSS：让你的项目极速起动的漂亮 CSS 库
Wing：小型 CSS 框架
RichCSS Framework：代码简洁美观, 可复用性高的 CSS 框架
Material Design 框架
Vue Material：Vue.js 的轻量级 Material Design 框架
传送门：https://marcosmoura.github.io/vue-material/#/
Materialize：基于材料设计的一个现代化的响应式前端框架
传送门：http://materializecss.com/
原文：Top 50 CSS Libraries, Frameworks and Tools from 2016
转自https://my.oschina.net/u/2903254/home
独家榜单：8月互金平台移动端影响力top50
...新闻 > 行业研究 > 详情独家榜单：8月互金平台移动端影响力TOP50发布时间：2016-09-1914:26:39来源：盈灿咨询作者： 收藏摘要：盈灿咨询发布《8月互金平台移动端影响力50强榜单报告》显示，支付宝... 查看详情
国内最火的htmlcssjavascript开源项目top榜，你知多少？
...以帮助更多的开发者扩展学习。 1.极简模块化前端UI框架Layui 评分：9.3；收藏量：873 授权协议：MIT开发语言：JavaS 查看详情
python爬虫编程思想（47）：项目实战：抓取豆瓣top250图书榜单
本文使用requests库、lxml库以及XPath抓取豆瓣网Top250图书排行榜。读者可以通过https://book.douban.com/top250访问Top250图书榜单，如图1所示。 在开始编写爬 查看详情
2021年最受程序员欢迎的开发工具top50名单出炉-
...兴工具1.FastAPIFastAPI是一个使用Python3.6+构建WebAPI的高性能框架。根据框架创建者的说法，FastAPI性能与NodeJS或Golang相当。2.GitHubCopilot作为一款AI结对编程工具，Copilot的主要定位是提供类似IntelliSense/IntelliCode的代码补全与建议功能，... 查看详情
前端vue.js开源中那些好用的工具和框架总结top45
在过去的一年里，我们比较了将近12000个Vue.js开源项目和库，并从中挑选了最好的45个（占比0.37%）。这些项目和库可以分为3类：用户界面（1~19）Vue.js工具（20~36）项目（37~45）这是一个... 查看详情
京东计算机新书销量榜top1
全球房地产企业市值榜top100
全球房地产企业市值榜TOP1002016-09-1008:52:16 和讯名家 本文首发于微信公众号：亿翰智库。文章内容属作者个人观点，不代表和讯网立场。投资者据此操作，风险请自担。全球房地产企业市值榜TOP100 ... 查看详情
2018年下载中心1月第一周资源下载top榜
...51cto.com/data/2387299NO.9下载数：84资源标题：Linuxawk高级应用和cut的使用资源地址：http://down.51cto.com/data/2387529NO.8下载数：89资源标 查看详情
css动画
CSS动画1.12D、3D（transform）2D转化值：1translate();根据给定的left(x轴)和top（y轴）参数，移动元素。例：div{transform:translate(50px,50px)}2.rotate();使元素顺时针旋转给定的角度。正数顺时针，负数逆时针，单位（deg）。3.scale();根据宽度（x... 查看详情
开源大数据热力榜单top30
本报告从102个入围项目中，评选出了TOP30热力榜单。Kibana以989.40的热力值高居榜首。ClickHouse（数据查询与分析）、Airflow（数据调度与编排）、Flink（流处理）、Airbyte（数据集成）分别摘得各自... 查看详情
中国独角兽企业估值榜top300
2016年中国独角兽企业估值榜TOP300【完整榜单】类型：品牌资讯/名企动态 阅读：6735次 来源：中商情报网 我要评论 摘要：独角兽公司是什么？独角兽公司指的是那些估值达到10亿美元以上的初创型公司。无疑，跻... 查看详情
2018年5月第一二周下载中心资源下载top榜
...a/2446518NO.2下载数：121资源标题：WindowsServer2016中的工作组和多域故障转移群集资源地址：http://down.51cto 查看详情
开源大数据热力榜单top30
...#xff0c;成为热力趋势中的“常青树”。感谢开源中国、InfoQ和阿里云开发者社区的战略支持；感谢对本报告内容产出做出重要贡献的32位专家和贡献者；感谢CSDN、DataFun、Segmentfault思否、开源社等社区合作。报告下载地址... 查看详情
开源大数据热力榜单top30
...#xff0c;成为热力趋势中的“常青树”。感谢开源中国、InfoQ和阿里云开发者社区的战略支持；感谢对本报告内容产出做出重要贡献的32位专家和贡献者；感谢CSDN、DataFun、Segmentfault思否、开源社等社区合作。报告下载地址... 查看详情
使用jquery获取css的top和left属性
使用jquery获取css的top和left属性因为left和top也都是普通的css属性所以可以使用如下代码来获取 varleft=$(‘#test‘).css(‘left‘);vartop=$(‘#test‘).css(‘top‘ 查看详情
神奇javascript框架---top5
...,供您参考观点源自作者的使用经验和日常研究排名基于框架的受欢迎度,语法结构,易用性等特性希望大家能够基于此视频找到最适合自己的框架下面介绍的都是严格的前端框架和库前言Top5:PolymerPolymer是由谷歌Chorme组织内的前端... 查看详情
前端读者|css三角形和饼图
@羯瑞三角形.triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:redbluegreenyellow;}.triangle_top{width:0;height:0;border-width:50px;border-style:solid;border-color:redtransparenttr 查看详情
前端常用的css代码
1、垂直居中对齐.vc{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}.vc{position:absolute;top:50%;left:50%;width:100px;height:100px;margin:-50px0-50px;}2、全屏显示html,body{position:fixed;width: 查看详情