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

作者：開源中國 - 達爾文

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

本文精選了 50 款 2016 年發布的 CSS 庫、框架和工具供大家享用，希望它們對您有所幫助。

分類快速預覽：CSS 庫，CSS Spinners，CSS 圖像特效，CSS 實用程序，設計指南工具，響應式郵件與通訊列表框架，Flexbox 布局工具和框架，CSS 布局框架和 material design 框架。

CSS 庫

hamburgers：hamburgers首頁、文檔和下載 - CSS 動畫圖標集 - 開源中國社區

CSS 動畫圖標集

傳送門：Hamburgers

Balloon.css：Balloon.css首頁、文檔和下載 - CSS 實現提示框 - 開源中國社區 一款非常小巧的提示框組件。

StarWarsIntro.css：模擬星球大戰片頭滾動字幕特效的 CSS 庫

傳送門：StarWarsIntro.css : The Star Wars Intro Crawl in Pure CSS

EQCSS：讓你能夠編寫元素查詢式的 CSS 樣式

傳送門：EQCSS ? Element Query CSS | Scoped CSS, Meta-Selectors, Element Queries

Basscss：Basscss首頁、文檔和下載 - CSS 框架 - 開源中國社區 輕量級的 CSS 基本元素樣式、工具、顏色和布局模塊，用以開發高性能 Web 頁面。

傳送門：Basscss

Tootik：純 CSS 工具提示庫

傳送門：Tootik a pure CSS Tooltip library.

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

傳送門：postcss.parts

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

傳送門：voxel.css

wysiwyg.css：使用單個 CSS 類即可對 TinyMCE 或 Markdown 生成的內容進行樣式化

傳送門：wysiwyg.css

Tipograf：輕量級的純 CSS 字體排版庫

傳送門：tiaanduplessis/tipograf

Spinners & Loading 動畫庫

Spinners：用 HTML 和 CSS 實現的「載入圖標」動畫的集合

傳送門：Spinners

loading indicators：純文本，純 CSS，不依賴字體的內聯載入指示器

傳送門：text-spinners - tawian

CSS Loader：簡單的 loader/spinner 庫，使用一個 DIV 和 CSS 即可創建

傳送門：CSS Loader

CSS 圖像特效

Imagehover.css：可擴展的、輕量級的圖像懸停效果 CSS 庫

傳送門：Imagehover.css - A Pure CSS Image Hover Library

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

傳送門：A huge pack of 49 photorealistic CSS3 backdrops

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

傳送門：Diffee Checker

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

傳送門：CSS Image Filter Tools & Resources

CSSgram：CSSgram首頁、文檔和下載 - CSS 圖片過濾庫 - 開源中國社區 用 CSS filter 和 blend mode 來模擬 Instagram 風格的濾鏡

傳送門：CSSGram

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

傳送門：CSSCO

CSS 實用程序

stylelint：stylelint首頁、文檔和下載 - CSS linter 工具 - 開源中國社區 強大的現代 CSS linter 工具

傳送門：stylelint

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

傳送門：CSSPurge - Saving the web 1kb at a time

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

傳送門：cssnano: A modular minifier based on the PostCSS ecosystem.

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

傳送門：WAIT! Animate

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

傳送門： MaintainableCSS - an approach to writing modular, scalable and maintainable CSS | By Adam Silver

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

傳送門：brand-colors

設計指南工具和資源

Styleguide：輕鬆創建你的在線 styleguide

傳送門：Living Styleguide by Devbridge

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

傳送門：Atomic Docs

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

傳送門：Styleguide Toolbox - Templates, UI Kits, Tools & Generators

響應式電子郵件和通訊列表框架

Foundation for Emails 2：快速創建響應式電子郵件

傳送門：Foundation for Emails 2 is Here!

MJML：MJML首頁、文檔和下載 - 響應式郵件標識語言 - 開源中國社區 標識語言，讓響應式郵件編寫更輕鬆

傳送門：https://mjml.io/

Flexbox 布局工具和框架

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

傳送門：Flex Layout Attribute (FLA)

Grd：Grd首頁、文檔和下載 - CSS網格框架 - 開源中國社區 使用 Flexboxhttp://www.oschina.net/search?scope=project&q=flexbox 布局的 CSS 網格框架

傳送門：Flexbox Grid

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

傳送門：Flexbox Grid

Bulma：基於 Flexbox 布局的現代 CSS 框架

傳送門：Bulma: a modern CSS framework based on Flexbox

Flexbox Playground：用於學習和構建 Flexbox 布局的便利工具

傳送門：Flexbox playground

Flexbox Patterns：用於使用 CSS flexbox 構建用戶界面的資源集合

傳送門：http://www.flexboxpatterns.com/home

CSS 布局框架

Driveway：純 CSS masonry 布局助手

傳送門：pure CSS masonry layout aid

Bricklayer：輕量級、無依賴的 Pinterest 風格的層疊網格布局庫

傳送門：Bricklayer

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

傳送門：Simple Grid

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

傳送門：Open Source Modular CSS Toolkit

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

傳送門：Vital | CSS Framework

Aleut.css：具有可擴展性的強大的 web 框架

傳送門：Aleut.css

Gutenberg.css：為列印而生的現代框架

傳送門：BafS/Gutenberg

mini.css：小型 Sass-y 響應式移動 CSS 框架

傳送門：mini.css - Minimal, responsive, style-agnostic CSS toolkit

Picnic CSS：讓你的項目極速起動的漂亮 CSS 庫

傳送門：Picnic CSS

Wing：小型 CSS 框架

傳送門：Wing

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

傳送門：RichCSS - Beautiful, DRY, Clean and Reusable CSS - The CSS Framework for your Team

Material Design 框架

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

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

Materialize：https://www.oschina.net/p/materialize-css-framework- 基於 Material Design 的一個現代化的響應式前端框架

傳送門：Documentation - Materialize

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

編譯：開源中國 - 達爾文