文档章节

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

达尔文
 达尔文
发布于 2016/12/21 20:50
字数 1285
阅读 16958
收藏 651

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 FiltersCSS 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-Colors400 多种品牌颜色的集合(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

编译:开源中国 - 达尔文

© 著作权归作者所有

达尔文

达尔文

粉丝 449
博文 25
码字总数 34746
作品 0
深圳
运营/编辑
私信 提问
加载中

评论(18)

昵称什么的最讨厌了
昵称什么的最讨厌了
感觉CSS Purge的描述应该改为 这个网站可以给你一些流行网站和框架排名的有效统计数据,可维持的 CSS. 它可以展现 CSS 文件大小的数据,具体的排名和使用的 CSS 属性。 这样会更好
SingerWiki
SingerWiki
非常棒。。。赞无数个。。。
子弹兄
子弹兄
真好!就是没有时间一一细看!
达尔文
达尔文 博主

引用来自“hentai”的评论

基本没听说过,看来out了
因为都是今年新发的
91porn
91porn
基本没听说过,看来out了
壮士
壮士
nice ~
wuyiw
wuyiw
6
卖爷爷的老红薯
卖爷爷的老红薯
666666
taozishow
taozishow
很实用的工具
楼下有家面馆
很好很强大
2015年50+ CSS 工具、框架、库合集

CSS动画工具 & 库 1. Animate Plus 一个可以帮你创建CSS属性和SVG属性的JavaScript动画库。 2. Rocket 一个创建WEB动画的简单的工具。 3. Tuesday 新奇CSS动画库。 4. Shift.css 创建定时CSS...

柠檬酷
2015/12/15
127
0
TIOBE 10月编程语言排行榜 : GO 问鼎本年度语言 ?

距离2016年度编程语言的公布只剩3个月了,谁将夺得桂冠? 与去年同期相比,2016年只有Go语言和Groovy语言的增长率超过了1%。 需要注意的是,Groovy语言2015年以一个爆炸性增长的收尾,所以到...

凝小紫
2016/10/09
21.5K
57
六大最受欢迎的Bootstrap UI编辑器推荐

  【IT168 评论】现在有不少商业活动是基于网站导向的,因此,网站设计至关重要。除了网站的布局,对不同浏览器和设备的兼容性也很重要,如手机,平板电脑等,这也是网络和UI开发人员最大的...

it168网站
2016/12/19
0
0
D2 日报 2019年5月29日

📰 新闻 ➡️ 《HelloGitHub》第 38 期 github.com ➡️ Apple iPod touch Apple 悄然上架了新款的 iPod touch www.apple.com ➡️ 快看点 快手内部孵化新闻资讯类 app「快看点」,主打看新...

D2开源组
05/28
0
0
Egg.js 1.0.0 正式发布 - 企业级 Node.js 框架

时光如梭,转眼间 Egg.js 已经开源半年了,我们很荣幸地宣布,Egg.js 正式发布 1.0 版本。 官网传送门:https://eggjs.org GitHub:https://github.com/eggjs/egg Egg.js 英文文档:与 Swif...

天猪
2017/03/24
13
0

没有更多内容

加载失败,请刷新页面

加载更多

kibana汉化

kibana5 / 6 需要下载补丁包,https://github.com/anbai-inc/Kibana_Hanization 其中 v6 版本原生支持国际化,只需要添加资源文件并且配置即可 kibana7 v7版本官方内置汉化资源,在配置文件 ...

细肉云吞
15分钟前
4
0
spring boot 自定义日志 log4j2

使用默认的日志在实际开发中会存在很多问题,比如备份文件名称无法自动重命名、各个等级的日志被放在一个文件中等,所以实际开发中为了更好满足我们的需求,我们一般都会自定义采用配置的方式...

雷开你的门
20分钟前
5
0
PCB设计-Allegro软件入门系列-设计参数配置(上)

前言 经历了导入网表,和放置器件后,我们就要画板子了,但是必要的设计参数也要先准备好,磨刀不误砍柴工。 《一》显示参数 这里主要设置DRC报错标志大小和飞线显示类型 (1)DRC标志可以适当...

demyar
21分钟前
5
0
js实现微博、微信分享

html <!-- 分享 --><div class="share-box"> <b style="vertical-align: middle;">分享到:</b> <a title="分享到新浪微博" class="shareSina"><span class="share-icon"></span><......

张兴华ZHero
36分钟前
5
0
创龙TMS320DM8168浮点DSP C674x + ARM Cortex-A8的CPU、NAND FLASH、NOR FLASH

TL6678-EasyEVM是广州创龙基于SOM-TL6678核心板而研发的一款多核高性能DSP开发板。开发板采用核心板+底板方式,底板采用沉金无铅工艺的四层板设计,尺寸为200mm*106.65mm,它为用户提供了SOM...

Tronlong创龙
40分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部