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

2024-05-24 15:16:49

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

编译：开源中国 - 达尔文

2016年 CSS 库、框架和工具新生榜 TOP 50相关推荐

IT：前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略
IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/Node/IDE/中后台/体验管理/ ...
JS+库+框架+工具
JS+库+框架+工具要做WEB前端,就需要知道前端到底是什么,需要学习那些知识:前端至少要懂的三个部分:HTML,CSS,JavaScript(简称JS),那首先先明确这三个概念: HTML负责结构 ...
写在2021: 值得关注/学习的前端框架和工具库
前言最近在知乎看到了这么个问题:学完Vue还有必要学习React和Node吗?[1], 有很奇妙的感觉,因为我在最开始入门前端时,也是以Vue入的门,在"学完"Vue之后, 我也 ...
Top 10 盘点：2019 Java 开发者必学的测试框架、工具和库！
@Java 开发者,2019 要先学点啥? 有答曰:"学习千万条,自动化测试第一条".如今,"自动化测试的重要性正在呈指数级增长",而本文便重点介绍了 10 大 ...
CV：计算机视觉技最强学习路线之CV简介(传统视觉技术/相关概念)、早期/中期/近期应用领域(偏具体应用)、经典CNN架构(偏具体算法)概述、常用工具/库/框架/产品、环境安装、常用数据集、编程技巧
CV:计算机视觉技最强学习路线之CV简介(传统视觉技术/相关概念).早期/中期/近期应用领域(偏具体应用).经典CNN架构(偏具体算法)概述.常用工具/库/框架/产品.环境安装.常用数据集.编程技巧 ...
AI常用框架和工具丨1. 科学计算库NumPy
科学计算库NumPy,AI常用框架和工具之一.理论知识结合代码实例,希望对您有所帮助. 文章目录环境说明一.NumPy简介二.数组 2.1 NumPy数组的优势 2.2 ndarray对象 2. ...
自动化测试库、框架和工具之间的区别
库的英文单词叫Library,库是由代码集合成的一个产品,供程序员调用.面向对象的代码组织形式的库叫类库,面向过程的代码组织形成的库叫函数. 框架的英文单词叫Framework,框架是为解决一个或一类 ...
golang 比较完美的通用框架，kratos v2.0 学习，一套轻量级 Go 微服务框架，包含大量微服务相关框架及工具。涵盖了互联网开发的常用功能模块的开发库。
目录前言 1,关于kratos v2.0 2,Principles 原则 2,Features 特色 3,Architecture 架构 4,总结前言本文的原文连接是: https://blog ...
AI常用框架和工具丨2. 数据分析处理库Pandas
数据分析处理库Pandas,AI常用框架和工具之一.理论知识结合代码实例,希望对您有所帮助. 文章目录环境说明一.Pandas简介二. Pandas中的数据结构 2.1 Series 2.2 D ...

最新文章

热门文章