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

原文地址：http://www.chinastor.org/gdcc/9103.html?ref=myread

CSS 於 2016 年發佈的開源工具，其產量之大超出人們的預料，但縱觀 CSS 在過去幾年的巨大變化與快速發展，此結果的出現彷佛又在情理之中。這些 CSS 庫、框架和工具的創建不只給咱們提供了學習的視角，更給咱們的工做與生活帶來了便利。

本文精選了 50 款 2016 年發佈的 CSS 庫、框架和工具供你們享用，但願它們對您有所幫助。

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 頁面。

傳送門： http://basscss.com/

Tootik ： 純 CSS 工具提示庫

傳送門： https://eliorshalev.github.io/tootik/

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

傳送門： http://postcss.parts/

voxel.css ： 輕量級 3D CSS 體素庫

傳送門： http://www.voxelcss.com/

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 庫

傳送門： http://imagehover.io/

HUE.css ：含 49 項逼真的 CSS 漸變背景樣式

傳送門： http://evankarageorgos.github.io/hue/grid.html

Diffee Checker ： 利用 CSS blend mode 來即時查看兩個網頁的視覺差別

傳送門： http://diffee.me/

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

傳送門： https://speckyboy.com/css-image-filter-toolbox/

CSSgram ： 用 CSS filter 和 blend mode 來模擬 Instagram 風格的濾鏡

傳送門： http://una.im/CSSgram/

CSSCO ： 靈感來自 VSCO 和 CSSgram 的 CSS 攝影濾鏡集合

傳送門： http://www.cssco.co/

CSS 實用程序

stylelint ：強大的現代 CSS linter 工具

傳送門： http://stylelint.io/

CSS Purge ： 每看一次你都能給你的網站節約 1KB 流量

傳送門： http://www.csspurge.com/

cssnano ： 基於 PostCSS 生態系統的 CSS 壓縮工具

傳送門： http://cssnano.co/

WAIT! Animate ： 用以計算 CSS 動畫關鍵幀百分比

傳送門： http://waitanimate.wstone.io/#/

MaintainableCSS ： 用以編寫模塊化，可擴展和可維護的 CSS

傳送門： http://maintainablecss.com/

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

傳送門： http://brand-colors.com/

設計指南工具和資源

Styleguide ：輕鬆建立你的在線 styleguide

傳送門： http://livingstyleguide.devbridge.com/

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

傳送門： http://atomicdocs.io/

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/

Grd ： 使用 Flexbox佈局的 CSS 網格框架

傳送門： http://flexboxgrid.com/

Flexbox Grid ： 基於 flex 佈局的網格系統

傳送門： http://flexboxgrid.com/

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 風格的層疊網格佈局庫

傳送門： http://bricklayer.js.org/

Simple Grid ： 響應式，輕量，簡約的 CSS 網格系統

傳送門： http://simplegrid.io/

BlazeCSS ： 用於快速構建網站的開源、模塊化 CSS 框架

傳送門： http://blazecss.com/

Vital CSS Framework ： 用於現代 Web 應用的低入侵性的 CSS 框架

傳送門： https://vitalcss.com/

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 庫

傳送門： http://picnicss.com/

Wing ： 小型 CSS 框架

傳送門： http://usewing.ml/

RichCSS Framework ： 代碼簡潔美觀, 可複用性高的 CSS 框架

傳送門： http://www.richcss.com/

Material Design框架

Vue Material ：Vue.js 的輕量級 Material Design 框架

傳送門： https://marcosmoura.github.io/vue-material/#/

Materialize ：基於材料設計的一個現代化的響應式前端框架