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

相关文章
|
资源调度 前端开发 CDN
纯css动画库animate.css的用法
纯css动画库animate.css的用法
887 0
|
8月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
8月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
8月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
前端开发
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
1233 1
|
缓存 前端开发 IDE
【专栏:工具与技巧篇】HTML与CSS代码压缩与合并
【4月更文挑战第30天】本文探讨了优化Web性能的关键——HTML和CSS代码压缩与合并。代码压缩通过移除空白字符、注释和缩短标识符减小文件大小,而代码合并则减少HTTP请求。开发者可借助在线工具、构建工具插件、编辑器扩展或手动方式实现压缩和合并。最佳实践中,应保留未压缩备份,测试压缩效果,利用缓存并自动化流程。同时,注意适度优化,避免影响首屏渲染速度。关注新工具和策略以维持网站性能和可维护性。
546 3
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS实践篇】CSS框架(Bootstrap/Foundation)快速上手
【4月更文挑战第30天】Bootstrap和Foundation是两种流行的CSS框架,用于构建响应式网页。它们包含预定义的样式、栅格系统和组件,加速开发流程。Bootstrap以其12列栅格系统闻名,而Foundation提供更定制化和模块化选项。了解并熟练运用这些框架的基本概念和组件,结合最佳实践和性能优化,能帮助开发者高效创建符合现代设计趋势的网页项目。
364 3
|
前端开发 JavaScript API
【热门话题】PostCSS:现代前端开发中的CSS增强工具
**PostCSS** 是一个JavaScript库,用于转换CSS,通过插件系统解析、优化代码,确保兼容性和效率。它提供插件化架构、向后/向前兼容性、代码质量提升和与其他工具链集成。PostCSS工作原理包括解析CSS成抽象语法树,插件遍历并转换AST,最后生成增强版CSS。主要功能包括Autoprefixer(自动添加浏览器前缀)、CSS变量、CSS Modules、Linting、预处理器支持等。在实际项目中,PostCSS可通过配置文件集成到Webpack等构建工具中,持续优化工作流,助力现代前端开发。
281 3
|
前端开发 UED
【专栏:工具与技巧篇】CSS Sprites 与图标字体:优化网页图标加载
【4月更文挑战第30天】本文探讨了网页图标优化的两种方法:CSS Sprites和图标字体。CSS Sprites通过合并图标减少HTTP请求,提高加载速度,但维护复杂;图标字体则提供良好扩展性和定制性,易于调整大小和颜色。两者各有优劣,适用于不同场景。在实际应用中,应结合使用,根据项目需求灵活选择,以实现最佳性能优化和用户体验。
231 1

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    358
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    279
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    245
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    169
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    368
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    524
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    380
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    168
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    359
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    321