1. 画 皮
KISSY DPL Practice
{Do You Framework}_S1_E2
CTV 10出品
yiminghe@gmail.com
dxq613@gmail.com

2. Previous
• KISSY Component API Design
– Why
– How
– Principle

3. Introduction
• KISSY DPL = Bootstrap + KISSY CSS
– KISSY CSS
• 双飞翼布局
– ks-inline-block ks-clear …

4. • Less
• KISSY DPL

5. • LESS

6. LESS
• LESS extends CSS with dynamic
behavior such as:
– variables
– mixins
– operations
– functions.

7. LESS
• Variables

8. LESS
• Mixins

9. LESS
• Operation

10. LESS
• Functions

11. • KISSY DPL

12. KISSY DPL
• Structure

13. • Base
• s/kissy/1.3.0/css/dpl/base.css

14. css reset
• src/css/src/reset.css
– with a “reset” style sheet, we can make
that default look more consistent across
browsers, and thus spend less time
fighting with browser defaults.
• http://meyerweb.com/eric/thoughts/2007/0
4/18/reset-reasoning/

15. css reset
• Font

16. cssreset
• ul/ol
– Margin? Padding?

17. reset-context
• reset under specified context

18. grids
• fixed

19. grids
• fluid

20. Fly-swing
• 双飞翼布局
– Html 固定
– Css 绝对布局
– 栅格 30px，间隙 10px

21. fly-swing
• demo

22. Common
• Commonly used css class.
– ks-clear
– ks-hidden
– ks-shown
– ks-invisible
– ks-visible
– ks-hide-text
– ks-center-block
– ks-text-overflow

23. • Complex ui

24. • Button
• s/kissy/1.3.0/button/assets/dpl.css

25. button
• Style
– Ks-button
– ks-button ks-button-primary
– ks-button ks-button-info
– ks-button ks-button-success
– ks-button ks-button-warning
– ks-button ks-button-danger
– ks-button ks-button-inverse

26. button
• Size
– ks-button-large
– ks-button-small
– ks-button-mini
• disabled
– Ks-button-disabled

27. button
• Button group
– ks-button-group
<div class="ks-button-group">
<div class="ks-button">left</div>
<div class="ks-button">middle</div>
<div class="ks-button">right</div>
</div>

28. • Menu
• Menu/assets/dpl.css

29. menu
• ks-menu
• ks-menuitem
• ks-submenu-arrow
<div class="ks-menu">
<div class="ks-submenu ks-menuitem">
<span class="ks-menuitem-content">
submenu</span>
<span class="ks-submenu-arrow">►
</span>
</div>
<div class="ks-menuitem">alone</div>
</div>

30. Checkable menu
• ks-menuitem-checkbox
• ks-menuitem-checked
<div class="ks-menuitem
ks-menuitem-checked">
<div class="ks-menuitem-checkbox">
</div>
checkable menuitem
</div>

31. • Menubutton
• Menubutton/assets/dpl.css

32. menubutton
• menubutton = menu + button
• .ks-menu-button
• style
– primary, info ….

33. menubutton
• Size
– Large, small, mini

34. • split-button
• Split-button/assets/dpl.css

35. Split-button
• Split-button = button + menubutton
• .ks-split-button
• Style
– Primary, info …

36. Split-button
• Size
– Large, small, mini

37. Split-button
new SplitButton({
render:"#para2",
• Menu position button:{
xclass:'button',
content:'action'
},
alignWithEl: false,
menuButton:{
xclass:'menu-button',
matchElWidth: false,
menu:{
xclass:'popupmenu',
children:[
{
xclass:'menuitem',
content:'some action'
},
{
xclass:'menuitem',
content:'more action'
}
]}}
}).render();

38. • More …

39. • Simple ui

40. • table
• css/dpl/table.css

41. table
• .table
– 表格默认的样式仅有一些边框来保证表格的可
读性和结构性，DPL中 table 样式是必须的。

42. table
• .table-striped
– 奇偶行背景色区分
– ie>9

43. table
• .table-border
– 给整个表格添加边框，同时添加圆角美化表格
的内容。

44. table
• .table-condensed
– 更紧凑的表格

45. • icons
• css/dpl/icons.css

46. icons
• Icons from Glyphicons
– .icon-search .icon-ok

47. • Labels
• Css/dpl/labels.css

48. labels
• .label, .label-success

49. • badges
• css/dpl/badges.css

50. badge
• Badge
– 数字指示用于未读消息数目等场景
– .badge .badge-info

51. • More …

52. Refer
• http://lesscss.org/
• http://twitter.github.com/bootstrap/
• http://docs.kissyui.com/kissy/src/css
/demo.html

53. Next ….
• Using KISSY Auto-Combo