2015年50+ CSS 工具、框架、库合集

简介:

CSS动画工具 & 库

1. Animate Plus

一个可以帮你创建CSS属性和SVG属性的JavaScript动画库。

201512-css-tools-1

2. Rocket

一个创建WEB动画的简单的工具。

201512-css-tools-2

3. Tuesday

新奇CSS动画库。

201512-css-tools-3

4. Shift.css

创建定时CSS动画的简单框架。

201512-css-tools-4

5. MOTION UI

用于创建灵活的CSS过渡和动画的SASS库。

201512-css-tools-5

6. Transformicons

使用SVG和CSS的动画图标、符号、按钮。

201512-css-tools-6

CSS实用程序和工具

7. sanitize.css

让浏览器渲染元素一致,并允许您以当前最佳实践的方式,即装即用。

201512-css-tools-7

8. CSS Stats

CSS状态统计可视化工具。

201512-css-tools-8

9. cssfmt

自动格式化CSS源代码的工具。

201512-css-tools-9

10. PurifyCSS

很方便的检测你的应用使用了那些CSS选择器的工具,并创建一个未被使用的CSS的文件。

201512-css-tools-10

Flexbox工具

11. Flexbox in 5 Minutes

CSS 的 flexbox属性主要特性的互动之旅。

201512-css-tools-11

12. Flexbugs

Flexbox常见问题及狂浏览器解决方案

201512-css-tools-12

13. cssPlus

基于 Flexbox 的稳健、快速、跨浏览器的布局脚手架。

201512-css-tools-13

14. Sketch Flex Layout

允许CSS Flexbox布局的Sketch 插件

201512-css-tools-14

CSS工具包

15. CSSGram

重塑Instagram过滤器的微型CSS库。

201512-css-tools-15

16. Flickity

创建画廊与轮播图的CSS库。

201512-css-tools-16

17. Marx

201512-css-tools-17

18. Pushy

使用CSS转换和过渡效果的响应式导航菜单。

201512-css-tools-18

19. Rucksack

CSS 工具包

201512-css-tools-19

20. Drop

用于创建下拉菜单和其他浮动元素的库。

201512-css-tools-20

21. Tufte CSS

使用Edward Tufte的理念展示文章的工具

201512-css-tools-21

22. Gradify

CSS渐变占位符图像

201512-css-tools-22

23. Stretchy

表单元素大小自动调整

201512-css-tools-23

24. CSSketch

开源的Sketch的CSS插件

201512-css-tools-24

25. SassyFlags

为你的网站添加旗帜的简单库

201512-css-tools-25

26. ai2html

把Illustrator文档转为HTML和CSS的开源工具

201512-css-tools-26

CSS工具包

27. Crayon.css

CSS颜色变量名与16进制对应列表。

201512-css-tools-27

响应的网页框架和用户界面工具包

28. Juiced

Flexbox CSS 框架

201512-css-tools-28

29. Primer

CSS工具包与指南

201512-css-tools-29

30. Neutron

创建灵化、简洁网页布局的SASS框架。

201512-css-tools-30

31. Basscss

基本元素类型和不可改变的实用程序的轻量级集合。

201512-css-tools-31

32. flexible.gs

灵活的响应式栅格布局CSS框架

201512-css-tools-32

33. Rin

201512-css-tools-33

34. Wee

用于创建复杂逻辑、响应式的轻量级前端框架。

201512-css-tools-34

35. Scooter

SCSS框架和UI库

201512-css-tools-35

36. spaceBase

基于SASS的响应式CSS框架

201512-css-tools-36

37. Decorator

HTML, CSS, and JavaScrip 前端框架

201512-css-tools-37

38. Rebar

Sass/Stylus 栅格布局框架

201512-css-tools-38

39. Concise CSS

使用SASS的轻量级易用框架

201512-css-tools-39

40. Workbench

加快开发速度的前端样板

201512-css-tools-40

41. Lost

SCSS 或 Stylus 栅格布局

201512-css-tools-41

42. minigrid()

只有2KB的零依赖栅格布局

201512-css-tools-42

材料设计框架

43. Material

HTML5 UI 框架

201512-css-tools-43

44. LumX

基于 AngularJS & Material Design 的框架

201512-css-tools-44

45. MUI

轻量级WEB框架

201512-css-tools-45

基于Web的CSS工具和应用程序

46. CSS Gradient Animator

动态生成gradients的WEB工具

201512-css-tools-46

47. CIRCULUS.SVG

SVG圆形菜单生成器

201512-css-tools-47

48. CSS Ruler

201512-css-tools-48

49. SVGOMG

优化和配置SVGO的WEB应用

201512-css-tools-49

50. Blend

生成简单漂亮CSS3 gradients的工具

201512-css-tools-50

51. Filter Blend

CSS的混合模式和过滤器生成器

201512-css-tools-51

52. SVG Path Builder App

使用GUI快速创建SVG path

201512-css-tools-52

53. .resizr

测试  CSS media queries 的轻量级应用

201512-css-tools-53

54. css2sass

把CSS代码转成SASS的应用

201512-css-tools-54



来源:51CTO

相关文章
|
2月前
|
资源调度 前端开发 CDN
纯css动画库animate.css的用法
纯css动画库animate.css的用法
50 0
|
5月前
|
JavaScript
vue中如何使用animate.css库
vue中如何使用animate.css库
|
4月前
|
前端开发
【第18期】一文读懂原子CSS框架
【第18期】一文读懂原子CSS框架
91 0
|
12天前
|
缓存 前端开发 IDE
【专栏:工具与技巧篇】HTML与CSS代码压缩与合并
【4月更文挑战第30天】本文探讨了优化Web性能的关键——HTML和CSS代码压缩与合并。代码压缩通过移除空白字符、注释和缩短标识符减小文件大小,而代码合并则减少HTTP请求。开发者可借助在线工具、构建工具插件、编辑器扩展或手动方式实现压缩和合并。最佳实践中,应保留未压缩备份,测试压缩效果,利用缓存并自动化流程。同时,注意适度优化,避免影响首屏渲染速度。关注新工具和策略以维持网站性能和可维护性。
|
12天前
|
前端开发 UED
【专栏:工具与技巧篇】CSS Sprites 与图标字体:优化网页图标加载
【4月更文挑战第30天】本文探讨了网页图标优化的两种方法:CSS Sprites和图标字体。CSS Sprites通过合并图标减少HTTP请求,提高加载速度,但维护复杂;图标字体则提供良好扩展性和定制性,易于调整大小和颜色。两者各有优劣,适用于不同场景。在实际应用中,应结合使用,根据项目需求灵活选择,以实现最佳性能优化和用户体验。
|
12天前
|
存储 移动开发 前端开发
【专栏:工具与技巧篇】高效的 HTML 与 CSS 编写技巧
【4月更文挑战第30天】本文探讨了提高HTML和CSS编写效率的技巧,包括使用语义化标签、精简代码、利用HTML5新特性;使用CSS预处理器、模块化设计、优化选择器及媒体查询;协同技巧如一致的类名规划和理解盒模型;选择高效工具如Visual Studio Code和代码格式化工具;以及性能优化方法如代码压缩、减少HTTP请求和图片优化。通过案例分析,展示如何在实践中应用这些技巧,以创建结构良好、样式优美且性能卓越的网站。
|
12天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS实践篇】CSS框架(Bootstrap/Foundation)快速上手
【4月更文挑战第30天】Bootstrap和Foundation是两种流行的CSS框架,用于构建响应式网页。它们包含预定义的样式、栅格系统和组件,加速开发流程。Bootstrap以其12列栅格系统闻名,而Foundation提供更定制化和模块化选项。了解并熟练运用这些框架的基本概念和组件,结合最佳实践和性能优化,能帮助开发者高效创建符合现代设计趋势的网页项目。
|
12天前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
|
4月前
|
Java BI 数据库
基于SSM框架实现面向小微企业的简历管理系统企业简历管理系统(分前后台spring+springmvc+mybatis+maven+jsp+css+echarts)
基于SSM框架实现面向小微企业的简历管理系统企业简历管理系统(分前后台spring+springmvc+mybatis+maven+jsp+css+echarts)
|
15天前
|
前端开发 JavaScript API
【热门话题】PostCSS:现代前端开发中的CSS增强工具
**PostCSS** 是一个JavaScript库,用于转换CSS,通过插件系统解析、优化代码,确保兼容性和效率。它提供插件化架构、向后/向前兼容性、代码质量提升和与其他工具链集成。PostCSS工作原理包括解析CSS成抽象语法树,插件遍历并转换AST,最后生成增强版CSS。主要功能包括Autoprefixer(自动添加浏览器前缀)、CSS变量、CSS Modules、Linting、预处理器支持等。在实际项目中,PostCSS可通过配置文件集成到Webpack等构建工具中,持续优化工作流,助力现代前端开发。
26 3