Your SlideShare is downloading. ×
0
画 皮                     KISSY DPL Practice                     {Do You Framework}_S1_E2         CTV 10出品yiminghe@gmail.com...
Previous• KISSY Component API Design – Why – How – Principle
Introduction• KISSY DPL = Bootstrap + KISSY CSS  – KISSY CSS    • 双飞翼布局  – ks-inline-block ks-clear …
• Less• KISSY DPL
• LESS
LESS• LESS extends CSS with dynamic  behavior such as:  – variables  – mixins  – operations  – functions.
LESS• Variables
LESS• Mixins
LESS• Operation
LESS• Functions
• KISSY DPL
KISSY DPL• Structure
• Base• s/kissy/1.3.0/css/dpl/base.css
css reset• src/css/src/reset.css  – with a “reset” style sheet, we can make    that default look more consistent across   ...
css reset• Font
cssreset• ul/ol  – Margin? Padding?
reset-context• reset under specified context
grids• fixed
grids• fluid
Fly-swing• 双飞翼布局 – Html 固定 – Css 绝对布局 – 栅格 30px,间隙 10px
fly-swing• demo
Common• Commonly used css class.  – ks-clear  – ks-hidden  – ks-shown  – ks-invisible  – ks-visible  – ks-hide-text  – ks-...
• Complex ui
• Button• s/kissy/1.3.0/button/assets/dpl.css
button• Style  – Ks-button  – ks-button ks-button-primary  – ks-button ks-button-info  – ks-button ks-button-success  – ks...
button• Size  – ks-button-large  – ks-button-small  – ks-button-mini• disabled  – Ks-button-disabled
button• Button group  – ks-button-group  <div class="ks-button-group">          <div class="ks-button">left</div>         ...
• Menu• Menu/assets/dpl.css
menu• ks-menu• ks-menuitem• ks-submenu-arrow<div class="ks-menu"><div class="ks-submenu ks-menuitem"><span class="ks-menui...
Checkable menu• ks-menuitem-checkbox• ks-menuitem-checked<div class="ks-menuitemks-menuitem-checked"><div class="ks-menuit...
• Menubutton• Menubutton/assets/dpl.css
menubutton• menubutton = menu + button• .ks-menu-button• style – primary, info ….
menubutton• Size  – Large, small, mini
• split-button• Split-button/assets/dpl.css
Split-button• Split-button = button + menubutton• .ks-split-button• Style  – Primary, info …
Split-button• Size  – Large, small, mini
Split-button                  new SplitButton({                       render:"#para2",• Menu position        button:{     ...
• More …
• Simple ui
• table• css/dpl/table.css
table• .table  – 表格默认的样式仅有一些边框来保证表格的可    读性和结构性,DPL中 table 样式是必须的。
table• .table-striped  – 奇偶行背景色区分  – ie>9
table• .table-border  – 给整个表格添加边框,同时添加圆角美化表格    的内容。
table• .table-condensed  – 更紧凑的表格
• icons• css/dpl/icons.css
icons• Icons from Glyphicons  – .icon-search .icon-ok
• Labels• Css/dpl/labels.css
labels• .label, .label-success
• badges• css/dpl/badges.css
badge• Badge – 数字指示用于未读消息数目等场景 – .badge .badge-info
• More …
Refer• http://lesscss.org/• http://twitter.github.com/bootstrap/• http://docs.kissyui.com/kissy/src/css  /demo.html
Next ….• Using KISSY Auto-Combo
Upcoming SlideShare
Loading in...5
×

Do You Framework.s01.e02.kissy dpl 设计

209

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
209
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Do You Framework.s01.e02.kissy dpl 设计"

  1. 1. 画 皮 KISSY DPL Practice {Do You Framework}_S1_E2 CTV 10出品yiminghe@gmail.com dxq613@gmail.com
  2. 2. Previous• KISSY Component API Design – Why – How – Principle
  3. 3. Introduction• KISSY DPL = Bootstrap + KISSY CSS – KISSY CSS • 双飞翼布局 – ks-inline-block ks-clear …
  4. 4. • Less• KISSY DPL
  5. 5. • LESS
  6. 6. LESS• LESS extends CSS with dynamic behavior such as: – variables – mixins – operations – functions.
  7. 7. LESS• Variables
  8. 8. LESS• Mixins
  9. 9. LESS• Operation
  10. 10. LESS• Functions
  11. 11. • KISSY DPL
  12. 12. KISSY DPL• Structure
  13. 13. • Base• s/kissy/1.3.0/css/dpl/base.css
  14. 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. 15. css reset• Font
  16. 16. cssreset• ul/ol – Margin? Padding?
  17. 17. reset-context• reset under specified context
  18. 18. grids• fixed
  19. 19. grids• fluid
  20. 20. Fly-swing• 双飞翼布局 – Html 固定 – Css 绝对布局 – 栅格 30px,间隙 10px
  21. 21. fly-swing• demo
  22. 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. 23. • Complex ui
  24. 24. • Button• s/kissy/1.3.0/button/assets/dpl.css
  25. 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. 26. button• Size – ks-button-large – ks-button-small – ks-button-mini• disabled – Ks-button-disabled
  27. 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. 28. • Menu• Menu/assets/dpl.css
  29. 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. 30. Checkable menu• ks-menuitem-checkbox• ks-menuitem-checked<div class="ks-menuitemks-menuitem-checked"><div class="ks-menuitem-checkbox"></div>checkable menuitem</div>
  31. 31. • Menubutton• Menubutton/assets/dpl.css
  32. 32. menubutton• menubutton = menu + button• .ks-menu-button• style – primary, info ….
  33. 33. menubutton• Size – Large, small, mini
  34. 34. • split-button• Split-button/assets/dpl.css
  35. 35. Split-button• Split-button = button + menubutton• .ks-split-button• Style – Primary, info …
  36. 36. Split-button• Size – Large, small, mini
  37. 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. 38. • More …
  39. 39. • Simple ui
  40. 40. • table• css/dpl/table.css
  41. 41. table• .table – 表格默认的样式仅有一些边框来保证表格的可 读性和结构性,DPL中 table 样式是必须的。
  42. 42. table• .table-striped – 奇偶行背景色区分 – ie>9
  43. 43. table• .table-border – 给整个表格添加边框,同时添加圆角美化表格 的内容。
  44. 44. table• .table-condensed – 更紧凑的表格
  45. 45. • icons• css/dpl/icons.css
  46. 46. icons• Icons from Glyphicons – .icon-search .icon-ok
  47. 47. • Labels• Css/dpl/labels.css
  48. 48. labels• .label, .label-success
  49. 49. • badges• css/dpl/badges.css
  50. 50. badge• Badge – 数字指示用于未读消息数目等场景 – .badge .badge-info
  51. 51. • More …
  52. 52. Refer• http://lesscss.org/• http://twitter.github.com/bootstrap/• http://docs.kissyui.com/kissy/src/css /demo.html
  53. 53. Next ….• Using KISSY Auto-Combo
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×