css框架有哪些，2016年 CSS 庫、框架和工具新生榜 TOP 50

CSS 于 2016 年發布的開源項目，其產量之大超出人們的預料，但縱觀 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 頁面。

傳送門：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：快速創建響應式電子郵件

傳送門：http://zurb.com/article/1432/foundation-for-emails-2-is-here

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：基于 Material Design 的一個現代化的響應式前端框架

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

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

編譯：開源中國?-?達爾文