关闭

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

标签: css框架开源项目
1761人阅读 评论(0) 收藏 举报
分类:

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/

0
0
查看评论

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

原文地址:http://www.chinastor.org/gdcc/9103.html?ref=myreadCSS 于 2016 年发布的开源工具,其产量之大超出人们的预料,但纵观 CSS 在过去几年的巨大变化与快速发展,此结果的出现似乎又在情理之中。这些 CSS 库、框架和工具的建立不仅给我们提...
  • xtfge0915
  • xtfge0915
  • 2016-12-22 10:14
  • 535

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

2016年 CSS 库、框架和工具新生榜 TOP 50
  • qq_34149805
  • qq_34149805
  • 2016-12-23 12:40
  • 492

2016福布斯中国名人榜-中国明星排行榜

中国名人排行榜。
  • Orzboyz1024
  • Orzboyz1024
  • 2017-03-25 20:23
  • 1781

总结:2016年的顶尖优秀开发工具

想知道2017年究竟该选择什么开发工具?专业的开发者工具及服务分享平台StackShare公布了第三届奖项的名单。通过对数以千计的资料进行分析,他们总结出了2016年度最热门的开发工具。 2016年度最热门最优秀的开发工具包括: 应用程序及数据工具实用工具DevOps工具商用工具新工...
  • xiaobing_122613
  • xiaobing_122613
  • 2017-02-06 09:47
  • 1126

浙江理工大学zstu2016新生赛题解

A:Save the Princess 题目:点击打开链接 题意:n个人横向排好队,其中左数第k个是公主,LYF和BH分别可以杀掉队列最左边的或者最右边的人,直到某个人拯救公主,两个人都会选择最佳杀人方案,LYF先杀,问谁能拯救公主。 分析:当公主在队列两端时,LYF先行动,所以LYF是赢家,其他情...
  • pan1197349032
  • pan1197349032
  • 2016-11-21 17:37
  • 1607

2016年高校保送生拟录取名单(清华大学)

2016年高校保送生拟录取名单 (清华大学) 姓名 性别 省份 毕业学校名称 保送特征 院校考核成绩 院校考核合格标准 拟录取专业 贾泽宇 男 北京 中国人民大学附属中学 奥赛国家队集...
  • xcntime
  • xcntime
  • 2016-06-24 16:48
  • 11045

常用的Java库、框架和工具清单

原文地址:http://www.indiageeks.in/list-of-commonly-used-java-libraries-frameworks-and-tools/ Java库和框架: 1.      内核: Apache commons...
  • dragon_dream
  • dragon_dream
  • 2014-04-04 19:21
  • 1344

2015杭电新生赛1001搬砖【dfs】

搬砖 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others) Total Submission(s): 5132   ...
  • wlx65003
  • wlx65003
  • 2015-12-03 17:14
  • 626

从今天起开始使用 CSS 属性 calc()

原文地址:Getting Started With CSS calc() 四年前,看了CSS3 Click Chart这篇文章之后,我第一次发现了calc() ,我当然非常高兴能够看到,基本的数学运算-加法,减法,乘法和除法-能够在CSS中应用。大部分人可能会觉着预处理就可以实现逻辑运算。但是预处理...
  • YITA90
  • YITA90
  • 2016-06-03 09:55
  • 9150

关于CSS中left:50%; top:50%; margin-left: -150px; margin-top: -75px;

#login_box { width: 300px; height: 150px; background: #eee; border: 1px solid #ccc; position: absolute; left:50%; ...
  • qq_38454121
  • qq_38454121
  • 2017-12-06 22:41
  • 59
    个人资料
    • 访问:132330次
    • 积分:1519
    • 等级:
    • 排名:千里之外
    • 原创:36篇
    • 转载:6篇
    • 译文:0篇
    • 评论:19条
    最新评论