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

梦里梦外; 2022-07-13 07:46 113阅读 0赞

CSS 于 2016 年发布的开源项目，其产量之大超出人们的预料，但纵观 CSS 在过去几年的巨大变化与快速发展，此结果的出现似乎又在情理之中。这些 CSS 库、框架和工具的建立不仅给我们提供了学习的视角，更给我们的工作与生活带来了便利。

本文精选了 50 款 2016 年发布的 CSS 库、框架和工具供大家享用，希望它们对您有所帮助。

分类快速预览：CSS 库，CSS Spinners，CSS 图像特效，CSS 实用程序，设计指南工具，响应式邮件与通讯列表框架，Flexbox 布局工具和框架，CSS 布局框架和 material design 框架。

## CSS 库 ##

[hamburgers][]：CSS 动画图标集

![164915_tCSO_2903254.png][]

传送门：[https://jonsuh.com/hamburgers/][https_jonsuh.com_hamburgers]

[Balloon.css][]：一款非常小巧的提示框组件。

![165227_GHvV_2903254.gif][]

传送门：[http://kazzkiq.github.io/balloon.css/][http_kazzkiq.github.io_balloon.css]

StarWarsIntro.css：模拟星球大战片头滚动字幕特效的 CSS 库

![165543_Lhab_2903254.jpg][]

传送门：[https://polarnotion.github.io/starwarsintro/][https_polarnotion.github.io_starwarsintro]

EQCSS：让你能够编写元素查询式的 CSS 样式

![165911_zx24_2903254.jpg][]

传送门：[http://elementqueries.com/][http_elementqueries.com]

[Basscss][]：轻量级的 CSS 基本元素样式、工具、颜色和布局模块，用以开发高性能 Web 页面。

![170443_CtrQ_2903254.jpg][]

传送门：[http://basscss.com/][http_basscss.com]

Tootik：纯 CSS 工具提示库

![170658_zOHa_2903254.jpg][]

传送门：[https://eliorshalev.github.io/tootik/][https_eliorshalev.github.io_tootik]

PostCSS.parts：可搜索的 PostCSS 插件目录

![170941_8tRe_2903254.jpg][]

传送门：[http://postcss.parts/][http_postcss.parts]

voxel.css：轻量级 3D CSS 体素库

![171300_TQVA_2903254.png][]

传送门：[http://www.voxelcss.com/][http_www.voxelcss.com]

wysiwyg.css：使用单个 CSS 类即可对 TinyMCE 或 Markdown 生成的内容进行样式化

![171754_5CGI_2903254.jpg][]

传送门：[http://jgthms.com/wysiwyg.css/][http_jgthms.com_wysiwyg.css]

Tipograf：轻量级的纯 CSS 字体排版库

![172131_XS3a_2903254.jpg][]

传送门：[https://github.com/tiaanduplessis/tipograf][https_github.com_tiaanduplessis_tipograf]

## Spinners & Loading 动画库 ##

Spinners：用 HTML 和 CSS 实现的“加载图标”动画的集合

![172403_ArCm_2903254.jpg][]

传送门：[https://boguz.github.io/Spinners/][https_boguz.github.io_Spinners]

loading indicators：纯文本，纯 CSS，不依赖字体的内联加载指示器

传送门：[http://tawian.io/text-spinners/][http_tawian.io_text-spinners]

CSS Loader：简单的 loader/spinner 库，使用一个 DIV 和 CSS 即可创建

![172852_jW08_2903254.gif][]

传送门：[http://www.raphaelfabeni.com.br/css-loader/][http_www.raphaelfabeni.com.br_css-loader]

## CSS 图像特效 ##

Imagehover.css：可扩展的、轻量级的图像悬停效果 CSS 库

![173138_GS74_2903254.png][]

传送门：[http://imagehover.io/][http_imagehover.io]

HUE.css：含 49 项逼真的 CSS 渐变背景样式

![173635_cMZm_2903254.jpg][]

传送门：[http://evankarageorgos.github.io/hue/grid.html][http_evankarageorgos.github.io_hue_grid.html]

Diffee Checker：利用 CSS blend mode 来即时查看两个网页的视觉差异

![173822_7mCK_2903254.jpg][]

传送门：[http://diffee.me/][http_diffee.me]

CSS Image Filters：CSS Filter 教程，库和工具的集合

![173948_Juxn_2903254.png][]

传送门：[https://speckyboy.com/css-image-filter-toolbox/][https_speckyboy.com_css-image-filter-toolbox]

[CSSgram][]：用 CSS filter 和 blend mode 来模拟 Instagram 风格的滤镜

![174123_ozfm_2903254.jpg][]

传送门：[http://una.im/CSSgram/][http_una.im_CSSgram]

CSSCO：灵感来自 VSCO 和 CSSgram 的 CSS 摄影滤镜集合

![174240_v8sm_2903254.jpg][]

传送门：[http://www.cssco.co/][http_www.cssco.co]

## CSS 实用程序 ##

[stylelint][]：强大的现代 CSS linter 工具

传送门：[http://stylelint.io/][http_stylelint.io]

CSS Purge：每看一次你都能给你的网站节约 1KB 流量

![175423_MGzR_2903254.jpg][]

传送门：[http://www.csspurge.com/][http_www.csspurge.com]

cssnano：基于 PostCSS 生态系统的 CSS 压缩工具

![175537_GnIB_2903254.jpg][]

传送门：[http://cssnano.co/][http_cssnano.co]

WAIT! Animate：用以计算 CSS 动画关键帧百分比

![175701_pT78_2903254.jpg][]

传送门：[http://waitanimate.wstone.io/\#/][http_waitanimate.wstone.io]

MaintainableCSS：用以编写模块化，可扩展和可维护的 CSS

![175847_PDOi_2903254.jpg][]

传送门：[http://maintainablecss.com/][http_maintainablecss.com]

Brand-Colors：400 多种品牌颜色的集合（SCSS，Less，Sass，Stylus＆CSS）

![180021_rPga_2903254.png][]

传送门：[http://brand-colors.com/][http_brand-colors.com]

## 设计指南工具和资源 ##

Styleguide：轻松创建你的在线 styleguide

![180226_7k4f_2903254.jpg][]

传送门：[http://livingstyleguide.devbridge.com/][http_livingstyleguide.devbridge.com]

Atomic Docs：前端样式指南生成器和 SASS 组件管理器

传送门：[http://atomicdocs.io/][http_atomicdocs.io]

Styleguide Toolbox：模板, UI 部件, 工具和生成器集合

传送门：[https://speckyboy.com/styleguide-toolbox/][https_speckyboy.com_styleguide-toolbox]

## 响应式电子邮件和通讯列表框架 ##

Foundation for Emails 2：快速创建响应式电子邮件

![180535_G9EZ_2903254.jpg][]

传送门：[http://zurb.com/article/1432/foundation-for-emails-2-is-here][http_zurb.com_article_1432_foundation-for-emails-2-is-here]

[MJML][]：标识语言，让响应式邮件编写更轻松

![180651_XKel_2903254.jpg][]

传送门：[https://mjml.io/][https_mjml.io]

## Flexbox 布局工具和框架 ##

Flex Layout Attribute（FLA）：CSS Flexbox 布局助手

传送门：[http://progressivered.com/fla/][http_progressivered.com_fla]

[Grd][]：使用 [Flexbox][] 布局的 CSS 网格框架

![180939_yHnc_2903254.png][]

传送门：[http://flexboxgrid.com/][http_flexboxgrid.com]

Flexbox Grid：基于 flex 布局的网格系统

传送门：[http://flexboxgrid.com/][http_flexboxgrid.com]

Bulma：基于 Flexbox 布局的现代 CSS 框架

![181240_zPQk_2903254.png][]

传送门：[http://bulma.io/][http_bulma.io]

Flexbox Playground：用于学习和构建 Flexbox 布局的便利工具

![181342_YRWO_2903254.png][]

传送门：[http://codepen.io/enxaneta/details/adLPwv][http_codepen.io_enxaneta_details_adLPwv]

Flexbox Patterns：用于使用 CSS flexbox 构建用户界面的资源集合

传送门：[http://www.flexboxpatterns.com/home][http_www.flexboxpatterns.com_home]

## CSS 布局框架 ##

Driveway：纯 CSS masonry 布局助手

![181732_yIVW_2903254.jpg][]

传送门：[http://jh3y.github.io/driveway/][http_jh3y.github.io_driveway]

Bricklayer：轻量级、无依赖的 Pinterest 风格的层叠网格布局库

![181846_WYCL_2903254.jpg][]

传送门：[http://bricklayer.js.org/][http_bricklayer.js.org]

Simple Grid：响应式，轻量，简约的 CSS 网格系统

![182110_JXOD_2903254.jpg][]

传送门：[http://simplegrid.io/][http_simplegrid.io]

BlazeCSS：用于快速构建网站的开源、模块化 CSS 框架

![182310_x5y9_2903254.jpg][]

传送门：[http://blazecss.com/][http_blazecss.com]

Vital CSS Framework：用于现代 Web 应用的低入侵性的 CSS 框架

![182432_OvYD_2903254.jpg][]

传送门：[https://vitalcss.com/][https_vitalcss.com]

Aleut.css：具有可扩展性的强大的 web 框架

![182536_mgtJ_2903254.png][]

传送门：[http://aleutcss.github.io/][http_aleutcss.github.io]

Gutenberg.css：为打印而生的现代框架

![182647_UEf3_2903254.jpg][]

传送门：[https://github.com/BafS/Gutenberg][https_github.com_BafS_Gutenberg]

mini.css：小型 Sass-y 响应式移动 CSS 框架

传送门：[https://chalarangelo.github.io/mini.css/][https_chalarangelo.github.io_mini.css]

Picnic CSS：让你的项目极速起动的漂亮 CSS 库

![183011_ZfWy_2903254.jpg][]

传送门：[http://picnicss.com/][http_picnicss.com]

Wing：小型 CSS 框架

![183144_DEuW_2903254.jpg][]

传送门：[http://usewing.ml/][http_usewing.ml]

RichCSS Framework：代码简洁美观, 可复用性高的 CSS 框架

![183312_jJF5_2903254.jpg][]

传送门：[http://www.richcss.com/][http_www.richcss.com]

## Material Design 框架 ##

Vue Material：Vue.js 的轻量级 Material Design 框架

![183452_bRlK_2903254.jpg][]

传送门：[https://marcosmoura.github.io/vue-material/\#/][https_marcosmoura.github.io_vue-material]

[Materialize][]：基于 Material Design 的一个现代化的响应式前端框架

![183637_aVHV_2903254.png][]

传送门：[http://materializecss.com/][http_materializecss.com]

原文：[Top 50 CSS Libraries, Frameworks and Tools from 2016][Top 50 CSS Libraries_ Frameworks and Tools from 2016]

编译：[开源中国 ][Link 1]\- [达尔文][Link 2]

[hamburgers]: https://www.oschina.net/p/hamburgers
[164915_tCSO_2903254.png]: https://static.oschina.net/uploads/space/2016/1220/164915_tCSO_2903254.png
[https_jonsuh.com_hamburgers]: https://jonsuh.com/hamburgers/
[Balloon.css]: https://www.oschina.net/p/balloon-css
[165227_GHvV_2903254.gif]: https://static.oschina.net/uploads/space/2016/1220/165227_GHvV_2903254.gif
[http_kazzkiq.github.io_balloon.css]: http://kazzkiq.github.io/balloon.css/
[165543_Lhab_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/165543_Lhab_2903254.jpg
[https_polarnotion.github.io_starwarsintro]: https://polarnotion.github.io/starwarsintro/
[165911_zx24_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/165911_zx24_2903254.jpg
[http_elementqueries.com]: http://elementqueries.com/
[Basscss]: https://www.oschina.net/p/basscss
[170443_CtrQ_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/170443_CtrQ_2903254.jpg
[http_basscss.com]: http://basscss.com/
[170658_zOHa_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/170658_zOHa_2903254.jpg
[https_eliorshalev.github.io_tootik]: https://eliorshalev.github.io/tootik/
[170941_8tRe_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/170941_8tRe_2903254.jpg
[http_postcss.parts]: http://postcss.parts/
[171300_TQVA_2903254.png]: https://static.oschina.net/uploads/space/2016/1220/171300_TQVA_2903254.png
[http_www.voxelcss.com]: http://www.voxelcss.com/
[171754_5CGI_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/171754_5CGI_2903254.jpg
[http_jgthms.com_wysiwyg.css]: http://jgthms.com/wysiwyg.css/
[172131_XS3a_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/172131_XS3a_2903254.jpg
[https_github.com_tiaanduplessis_tipograf]: https://github.com/tiaanduplessis/tipograf
[172403_ArCm_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/172403_ArCm_2903254.jpg
[https_boguz.github.io_Spinners]: https://boguz.github.io/Spinners/
[http_tawian.io_text-spinners]: http://tawian.io/text-spinners/
[172852_jW08_2903254.gif]: https://static.oschina.net/uploads/space/2016/1220/172852_jW08_2903254.gif
[http_www.raphaelfabeni.com.br_css-loader]: http://www.raphaelfabeni.com.br/css-loader/
[173138_GS74_2903254.png]: https://static.oschina.net/uploads/space/2016/1220/173138_GS74_2903254.png
[http_imagehover.io]: http://imagehover.io/
[173635_cMZm_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/173635_cMZm_2903254.jpg
[http_evankarageorgos.github.io_hue_grid.html]: http://evankarageorgos.github.io/hue/grid.html
[173822_7mCK_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/173822_7mCK_2903254.jpg
[http_diffee.me]: http://diffee.me/
[173948_Juxn_2903254.png]: https://static.oschina.net/uploads/space/2016/1220/173948_Juxn_2903254.png
[https_speckyboy.com_css-image-filter-toolbox]: https://speckyboy.com/css-image-filter-toolbox/
[CSSgram]: https://www.oschina.net/p/cssgram
[174123_ozfm_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/174123_ozfm_2903254.jpg
[http_una.im_CSSgram]: http://una.im/CSSgram/
[174240_v8sm_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/174240_v8sm_2903254.jpg
[http_www.cssco.co]: http://www.cssco.co/
[stylelint]: https://www.oschina.net/p/stylelint
[http_stylelint.io]: http://stylelint.io/
[175423_MGzR_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/175423_MGzR_2903254.jpg
[http_www.csspurge.com]: http://www.csspurge.com/
[175537_GnIB_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/175537_GnIB_2903254.jpg
[http_cssnano.co]: http://cssnano.co/
[175701_pT78_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/175701_pT78_2903254.jpg
[http_waitanimate.wstone.io]: http://waitanimate.wstone.io/#/
[175847_PDOi_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/175847_PDOi_2903254.jpg
[http_maintainablecss.com]: http://maintainablecss.com/
[180021_rPga_2903254.png]: https://static.oschina.net/uploads/space/2016/1220/180021_rPga_2903254.png
[http_brand-colors.com]: http://brand-colors.com/
[180226_7k4f_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/180226_7k4f_2903254.jpg
[http_livingstyleguide.devbridge.com]: http://livingstyleguide.devbridge.com/
[http_atomicdocs.io]: http://atomicdocs.io/
[https_speckyboy.com_styleguide-toolbox]: https://speckyboy.com/styleguide-toolbox/
[180535_G9EZ_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/180535_G9EZ_2903254.jpg
[http_zurb.com_article_1432_foundation-for-emails-2-is-here]: http://zurb.com/article/1432/foundation-for-emails-2-is-here
[MJML]: https://www.oschina.net/p/mjml
[180651_XKel_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/180651_XKel_2903254.jpg
[https_mjml.io]: https://mjml.io/
[http_progressivered.com_fla]: http://progressivered.com/fla/
[Grd]: https://www.oschina.net/p/grd
[Flexbox]: http://www.oschina.net/search?scope=project&q=flexbox
[180939_yHnc_2903254.png]: https://static.oschina.net/uploads/space/2016/1220/180939_yHnc_2903254.png
[http_flexboxgrid.com]: http://flexboxgrid.com/
[181240_zPQk_2903254.png]: https://static.oschina.net/uploads/space/2016/1220/181240_zPQk_2903254.png
[http_bulma.io]: http://bulma.io/
[181342_YRWO_2903254.png]: https://static.oschina.net/uploads/space/2016/1220/181342_YRWO_2903254.png
[http_codepen.io_enxaneta_details_adLPwv]: http://codepen.io/enxaneta/details/adLPwv
[http_www.flexboxpatterns.com_home]: http://www.flexboxpatterns.com/home
[181732_yIVW_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/181732_yIVW_2903254.jpg
[http_jh3y.github.io_driveway]: http://jh3y.github.io/driveway/
[181846_WYCL_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/181846_WYCL_2903254.jpg
[http_bricklayer.js.org]: http://bricklayer.js.org/
[182110_JXOD_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/182110_JXOD_2903254.jpg
[http_simplegrid.io]: http://simplegrid.io/
[182310_x5y9_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/182310_x5y9_2903254.jpg
[http_blazecss.com]: http://blazecss.com/
[182432_OvYD_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/182432_OvYD_2903254.jpg
[https_vitalcss.com]: https://vitalcss.com/
[182536_mgtJ_2903254.png]: https://static.oschina.net/uploads/space/2016/1220/182536_mgtJ_2903254.png
[http_aleutcss.github.io]: http://aleutcss.github.io/
[182647_UEf3_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/182647_UEf3_2903254.jpg
[https_github.com_BafS_Gutenberg]: https://github.com/BafS/Gutenberg
[https_chalarangelo.github.io_mini.css]: https://chalarangelo.github.io/mini.css/
[183011_ZfWy_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/183011_ZfWy_2903254.jpg
[http_picnicss.com]: http://picnicss.com/
[183144_DEuW_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/183144_DEuW_2903254.jpg
[http_usewing.ml]: http://usewing.ml/
[183312_jJF5_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/183312_jJF5_2903254.jpg
[http_www.richcss.com]: http://www.richcss.com/
[183452_bRlK_2903254.jpg]: https://static.oschina.net/uploads/space/2016/1220/183452_bRlK_2903254.jpg
[https_marcosmoura.github.io_vue-material]: https://marcosmoura.github.io/vue-material/#/
[Materialize]: https://www.oschina.net/p/materialize-css-framework-
[183637_aVHV_2903254.png]: https://static.oschina.net/uploads/space/2016/1220/183637_aVHV_2903254.png
[http_materializecss.com]: http://materializecss.com/
[Top 50 CSS Libraries_ Frameworks and Tools from 2016]: https://speckyboy.com/top-50-css-libraries-frameworks-tools-2016/?utm_source=tuicool&utm_medium=referral
[Link 1]: https://www.oschina.net/
[Link 2]: https://my.oschina.net/u/2903254