joycss is coming by hanwen

1. JOYCSS
让css 发更惬意

2. CSS有什么

8. 还可以更简单的

9. 不是为了折腾
只是想要...
走起，打球去

10. 速度
效率

11. Write less do more
速度
效率

12. 如何拼图

13. 如何拼图
• 左右编辑器，右手PS

14. 如何拼图
• 左右编辑器，右手PS
• 自动拼图工具

15. 如何拼图
• 左右编辑器，右手PS
• 自动拼图工具
• smartsprite

16. 如何拼图
• 左右编辑器，右手PS
• 自动拼图工具
• smartsprite
• cssgaga

17. 第一 方式
• 简单快捷，地球人都知道
• ctrl+shift+alt+s保存，选个位置，定位，
firefox看看，差3px，调整下，回来修
改，刷新...
• 这个图放最右边，过几天，图片宽度变
量，sprite图ps源文件打 ，调整下，定

18. 这是干 样

19. 工业化生产时代的 发
只能容忍如此原始的方式
能 让计算机做的事情
尽量不要用人来做了

21. Joycss is coming

22. 如何使用
• joycss -h

23. 特点
• joycss --nochange
• 自动配置布局方式，紧 拼图和垂直布
局同时使用
• 自动处理图片上传
• png8完美兼容，png24自动压缩
• 使用简单，功能强大，自定义配置

24. URL参数配置
http://git.shepherdwind.com/joycss.html#toc_0.0.4

25. URL参数配置
http://git.shepherdwind.com/joycss.html#toc_0.0.4

26. URL参数配置
http://git.shepherdwind.com/joycss.html#toc_0.0.4

27. ˙发展过程
• 为smartsprite写注释 02-12
• 使用parserlib解析css （问题）
• 问题良多
• 自己写cssReader
• 放弃smartsprite拼图

28. 经验分享
•对 杂问题不断细分成小的问题：
•

29. 经验分享
•对 杂问题不断细分成小的问题：
•

30. 安装
• npm install joycss -g
• 依赖php，可能以后会修改为gm
• 文档 http://git.shepherdwind.com/
joycss.html
• https://github.com/shepherdwind/joycss

31. 提问吧

32. 谢谢收听