2016 年 CSS 库、框架和工具新生榜 TOP 50

   <p>CSS 于 2016 年发布的开源工具，其产量之大超出人们的预料，但纵观 CSS 在过去几年的巨大变化与快速发展，此结果的出现似乎又在情理之中。这些 CSS 库、框架和工具的建立不仅给我们提供了学习的视角，更给我们的工作与生活带来了便利。</p>    <p>本文精选了 50 款 2016 年发布的 CSS 库、框架和工具供大家享用，希望它们对您有所帮助。</p>    <p>分类快速预览 ：CSS 库，CSS Spinners，CSS 图像特效，CSS 实用程序，设计指南工具，响应式邮件与通讯列表框架，Flexbox 布局工具和框架，CSS 布局框架和 material design 框架。</p>    <h2>CSS 库</h2>    <p><a href="/misc/goto?guid=4959731077477765707" rel="nofollow,noindex">hamburgers</a> ：CSS 动画图标集</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5b15ab91b27eec9a8c32a77d61f29127.png"></p>    <p>传送门： <a href="/misc/goto?guid=4959731077569035551" rel="nofollow,noindex">https://jonsuh.com/hamburgers/</a></p>    <p><a href="/misc/goto?guid=4959731077646862233" rel="nofollow,noindex">Balloon.css</a> ：一款非常小巧的提示框组件。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/9f9c18cbe00ab773465b5d4c2e3f8043.gif"></p>    <p>传送门： <a href="/misc/goto?guid=4959731077731309219" rel="nofollow,noindex">http://kazzkiq.github.io/balloon.css/</a></p>    <p><strong>StarWarsIntro.css</strong> ：模拟星球大战片头滚动字幕特效的 CSS 库</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3c524cd0d326573e0c81406633c1b34e.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731077808969049" rel="nofollow,noindex">https://polarnotion.github.io/starwarsintro/</a></p>    <p><strong>EQCSS</strong> ：让你能够编写元素查询式的 CSS 样式</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7172bd68f9379f48f495cfca33a0e5b5.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731077900591399" rel="nofollow,noindex">http://elementqueries.com/</a></p>    <p><a href="/misc/goto?guid=4959731077982552643" rel="nofollow,noindex">Basscss</a> ： 轻量级的 CSS 基本元素样式、工具、颜色和布局模块，用以开发高性能 Web 页面。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/a7774d51a853d4e731ccf9ce2b6f76c7.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731078068628399" rel="nofollow,noindex">http://basscss.com/</a></p>    <p>Tootik ： 纯 CSS 工具提示库</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e3e7657e32d63356a1aee7b4c565771e.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731078154479331" rel="nofollow,noindex">https://eliorshalev.github.io/tootik/</a></p>    <p>PostCSS.parts ： 可搜索的 PostCSS 插件目录</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/dae406246b6e426009a85f508c7b0882.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959664202851997728" rel="nofollow,noindex">http://postcss.parts/</a></p>    <p>voxel.css ： 轻量级 3D CSS 体素库</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/bfb7e84aa4ac753677c1718e6a82fd24.png"></p>    <p>传送门： <a href="/misc/goto?guid=4959731078274128738" rel="nofollow,noindex">http://www.voxelcss.com/</a></p>    <p>wysiwyg.css ： 使用单个 CSS 类即可对 TinyMCE 或 Markdown 生成的内容进行样式化</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e5b3c0a28d2ab9daf41c8f5719ccbcd8.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731078356187002" rel="nofollow,noindex">http://jgthms.com/wysiwyg.css/</a></p>    <p>Tipograf ： 轻量级的纯 CSS 字体排版库</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e5e41e517489686356a5fea2a57695d2.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731078439014786" rel="nofollow,noindex">https://github.com/tiaanduplessis/tipograf</a></p>    <h2>Spinners & Loading 动画库</h2>    <p>Spinners ： 用 HTML 和 CSS 实现的“加载图标”动画的集合</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/be93a4e6437ba7ce38cdcade69b442cc.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731078520505239" rel="nofollow,noindex">https://boguz.github.io/Spinners/</a></p>    <p><strong>loading indicators</strong> ：纯文本，纯 CSS，不依赖字体的内联加载指示器</p>    <p>传送门： <a href="/misc/goto?guid=4959731078602064128" rel="nofollow,noindex">http://tawian.io/text-spinners/</a></p>    <p>CSS Loader ： 简单的 loader/spinner 库，使用一个 DIV 和 CSS 即可创建</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/75636a7620211bd6019aab10110425c6.gif"></p>    <p>传送门： <a href="/misc/goto?guid=4959727501759032367" rel="nofollow,noindex">http://www.raphaelfabeni.com.br/css-loader/</a></p>    <h2>CSS 图像特效</h2>    <p><strong>Imagehover.css</strong> ：可扩展的、轻量级的图像悬停效果 CSS 库</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/6372c4a9c28d7410f4d61c2b30da507d.png"></p>    <p>传送门： <a href="/misc/goto?guid=4959731078722896537" rel="nofollow,noindex">http://imagehover.io/</a></p>    <p>HUE.css ：含  49 项逼真的 CSS 渐变背景样式</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c5d06553876adbc307a6910a4b4d052b.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731078800614716" rel="nofollow,noindex">http://evankarageorgos.github.io/hue/grid.html</a></p>    <p>Diffee Checker ： 利用 CSS blend mode 来即时查看两个网页的视觉差异</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/47f5742882076eb12ec4935cf45e64d3.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731078883524120" rel="nofollow,noindex">http://diffee.me/</a></p>    <p>CSS Image Filters ： CSS Filter 教程，库和工具的集合</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/90c475df67dadd12fc2f8f066d4d74a0.png"></p>    <p>传送门： <a href="/misc/goto?guid=4959731078964628384" rel="nofollow,noindex">https://speckyboy.com/css-image-filter-toolbox/</a></p>    <p><a href="/misc/goto?guid=4959731079047612571" rel="nofollow,noindex">CSSgram</a> ： 用 CSS filter 和 blend mode 来模拟 Instagram 风格的滤镜</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/eb2bae30c1bf1cd7f83178f9343ce260.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4958974099223814948" rel="nofollow,noindex">http://una.im/CSSgram/</a></p>    <p>CSSCO ： 灵感来自 VSCO 和 CSSgram 的 CSS 摄影滤镜集合</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/9e790320cb011fd80116ee48c3dd542f.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731079158361393" rel="nofollow,noindex">http://www.cssco.co/</a></p>    <h2>CSS 实用程序</h2>    <p><a href="/misc/goto?guid=4959731079254081405" rel="nofollow,noindex">stylelint</a> ：强大的现代 CSS linter 工具</p>    <p>传送门： <a href="/misc/goto?guid=4959714688925498527" rel="nofollow,noindex">http://stylelint.io/</a></p>    <p>CSS Purge ： 每看一次你都能给你的网站节约 1KB 流量</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/9a18de7d71f9e5c04374135850ea66d8.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731079362520304" rel="nofollow,noindex">http://www.csspurge.com/</a></p>    <p>cssnano ： 基于 PostCSS 生态系统的 CSS 压缩工具</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/a70a87714195fc1804bd4c32557a760d.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959714688585930572" rel="nofollow,noindex">http://cssnano.co/</a></p>    <p>WAIT! Animate ： 用以计算 CSS 动画关键帧百分比</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/fa7a07cc923370d60bd79f29c38de90b.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731079467915841" rel="nofollow,noindex">http://waitanimate.wstone.io/#/</a></p>    <p>MaintainableCSS ： 用以编写模块化，可扩展和可维护的 CSS</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e39d29e1a473fbb9b687036b0488d3da.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731079557424510" rel="nofollow,noindex">http://maintainablecss.com/</a></p>    <p>Brand-Colors ： 400 多种品牌颜色的集合（SCSS，Less，Sass，Stylus＆CSS）</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/acf7dc48513a5885cd20423842c04560.png"></p>    <p>传送门： <a href="/misc/goto?guid=4959731079637167232" rel="nofollow,noindex">http://brand-colors.com/</a></p>    <h2>设计指南工具和资源</h2>    <p><strong>Styleguide</strong> ：轻松创建你的在线 styleguide</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/a705f641e9036a9ec76a3a6f7087dea6.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731079718918208" rel="nofollow,noindex">http://livingstyleguide.devbridge.com/</a></p>    <p>Atomic Docs ： 前端样式指南生成器和 SASS 组件管理器</p>    <p>传送门： <a href="/misc/goto?guid=4959731079802063159" rel="nofollow,noindex">http://atomicdocs.io/</a></p>    <p>Styleguide Toolbox ： 模板, UI 部件, 工具和生成器集合</p>    <p>传送门： <a href="/misc/goto?guid=4959731079880862705" rel="nofollow,noindex">https://speckyboy.com/styleguide-toolbox/</a></p>    <h2>响应式电子邮件和通讯列表框架</h2>    <p><strong>Foundation for Emails 2</strong> <strong>：</strong> 快速创建响应式电子邮件</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/31313eb9a8e1fb1513830b1337fc47b2.jpg"></p>    <p><a href="/misc/goto?guid=4959731079963674787" rel="nofollow,noindex">MJML</a> ： 标识语言，让响应式邮件编写更轻松</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ae7f58b87fe9cae84385c9f4c4cc95c9.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4958985581926857124" rel="nofollow,noindex">https://mjml.io/</a></p>    <h2>Flexbox 布局工具和框架</h2>    <p><strong>Flex Layout Attribute（FLA）</strong> ：CSS Flexbox 布局助手</p>    <p>传送门： <a href="/misc/goto?guid=4959731080070929058" rel="nofollow,noindex">http://progressivered.com/fla/</a></p>    <p><a href="/misc/goto?guid=4959731080154300911" rel="nofollow,noindex">Grd</a> ： 使用 Flexbox布局的 CSS 网格框架</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/0c3a772ee9e9718e37c2ebd31fc8cdb2.png"></p>    <p>传送门： <a href="/misc/goto?guid=4958831228663940843" rel="nofollow,noindex">http://flexboxgrid.com/</a></p>    <p>Flexbox Grid ： 基于 flex 布局的网格系统</p>    <p>传送门： <a href="/misc/goto?guid=4958831228663940843" rel="nofollow,noindex">http://flexboxgrid.com/</a></p>    <p>Bulma ： 基于 Flexbox 布局的现代 CSS 框架</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/61fd8cbc1d04fcd8b632f0e3e53f08f3.png"></p>    <p>传送门： <a href="/misc/goto?guid=4958986647632958097" rel="nofollow,noindex">http://bulma.io/</a></p>    <p>Flexbox Playground ： 用于学习和构建 Flexbox 布局的便利工具</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/112f520653d16943d297e15e576691c0.png"></p>    <p>传送门： <a href="/misc/goto?guid=4959731080308420581" rel="nofollow,noindex">http://codepen.io/enxaneta/details/adLPwv</a></p>    <p>Flexbox Patterns ： 用于使用 CSS flexbox 构建用户界面的资源集合</p>    <p>传送门： <a href="/misc/goto?guid=4959663786757744611" rel="nofollow,noindex">http://www.flexboxpatterns.com/home</a></p>    <h2>CSS 布局框架</h2>    <p><strong>Driveway</strong> ：纯 CSS masonry 布局助手</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/789243fc250dbeadff0fa355b193bafa.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731080419303298" rel="nofollow,noindex">http://jh3y.github.io/driveway/</a></p>    <p>Bricklayer ： 轻量级、无依赖的 Pinterest 风格的层叠网格布局库</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/94ddfd5e99143fffea56eb7850bfd0b8.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731080496755527" rel="nofollow,noindex">http://bricklayer.js.org/</a></p>    <p>Simple Grid ： 响应式，轻量，简约的 CSS 网格系统</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8d23c81ed3c8a691ec37ead4248721f0.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731080577769140" rel="nofollow,noindex">http://simplegrid.io/</a></p>    <p>BlazeCSS ： 用于快速构建网站的开源、模块化 CSS 框架</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/0b892fc288117cbd6ad4cee560cd56c2.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4958984602070157905" rel="nofollow,noindex">http://blazecss.com/</a></p>    <p>Vital CSS Framework ： 用于现代 Web 应用的低入侵性的 CSS 框架</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7e1582b7efc77269897036c213b70013.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731080686015342" rel="nofollow,noindex">https://vitalcss.com/</a></p>    <p>Aleut.css ： 具有可扩展性的强大的 web 框架</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/308ff6da4deb6e8e4a2313f0583df051.png"></p>    <p>传送门： <a href="/misc/goto?guid=4959731080771683883" rel="nofollow,noindex">http://aleutcss.github.io/</a></p>    <p>Gutenberg.css ： 为打印而生的现代框架</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/05af8dd599f197883d2051336443c211.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731080854461986" rel="nofollow,noindex">https://github.com/BafS/Gutenberg</a></p>    <p>mini.css ： 小型 Sass-y 响应式移动 CSS 框架</p>    <p>传送门： <a href="/misc/goto?guid=4959731080928217776" rel="nofollow,noindex">https://chalarangelo.github.io/mini.css/</a></p>    <p>Picnic CSS ： 让你的项目极速起动的漂亮 CSS 库</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/361d61e1b1fb8a2d63aecbeb12f3d607.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959659558409201467" rel="nofollow,noindex">http://picnicss.com/</a></p>    <p>Wing ： 小型 CSS 框架</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7ddca6b6c0f429661a6ccc4ba12ed74a.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731081036055739" rel="nofollow,noindex">http://usewing.ml/</a></p>    <p>RichCSS Framework ： 代码简洁美观, 可复用性高的 CSS 框架</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/4f6d046a04509ab84260088696967e18.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959731081126316185" rel="nofollow,noindex">http://www.richcss.com/</a></p>    <h2>Material Design框架</h2>    <p><strong>Vue Material</strong> ：Vue.js 的轻量级 Material Design 框架</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3e3223c62e6dc9c7914b90af46694775.jpg"></p>    <p>传送门： <a href="/misc/goto?guid=4959727502341946952" rel="nofollow,noindex">https://marcosmoura.github.io/vue-material/#/</a></p>    <p><a href="/misc/goto?guid=4959731081228226169" rel="nofollow,noindex">Materialize</a> ：基于材料设计的一个现代化的响应式前端框架</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c4beffe5858a62f00123a30db5771b77.png"></p>    <p>传送门： <a href="/misc/goto?guid=4958862032806464243" rel="nofollow,noindex">http://materializecss.com/</a></p>    <p> </p>    <p> </p>    <p>来自：https://my.oschina.net/u/2903254/blog/809874</p>    <p> </p>