Kissy dpl-practice
1 like366 views
This document describes the KISSY DPL (Design Pattern Library) which includes CSS styles and components built with LESS and KISSY. It provides styles and markup for common interface elements like buttons, menus, tables, forms and more. The styles are organized into CSS files for components like overlay, button, menu etc. It demonstrates how to build reusable UI elements with KISSY and provides references for learning LESS and comparing to Twitter Bootstrap.
![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();](https://image.slidesharecdn.com/kissy-dpl-practice-120802024051-phpapp02/85/Kissy-dpl-practice-41-320.jpg)
![toolbar
var t = new Toolbar({
render:"#container",
children:[ {
content:"menu-button",
collapseOnClick:true,
xclass:'menu-button‘
},{
content:‘button',
xclass:'button'
}]}).render();](https://image.slidesharecdn.com/kissy-dpl-practice-120802024051-phpapp02/85/Kissy-dpl-practice-43-320.jpg)
Kissy dpl-practice
- 1. KISSY DPL Practice 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.
- 10. LESS • Functions
- 11. • KISSY DPL
- 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-inline-block – ks-hidden – ks-shown – ks-invisible – ks-visible – ks-hide-text – ks-center-block – ks-text-overflow
- 23. • Complex ui
- 25. dialog
- 26. popup
- 27. tooltip
- 29. 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
- 30. button • Size – ks-button-large – ks-button-small – ks-button-mini • disabled – Ks-button-disabled
- 31. 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>
- 33. 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>
- 34. Checkable menu • ks-menuitem-checkbox • ks-menuitem-checked <div class="ks-menuitem ks-menuitem-checked"> <div class="ks-menuitem-checkbox"> </div> checkable menuitem </div>
- 36. menubutton • menubutton = menu + button • .ks-menu-button • style – primary, info ….
- 37. menubutton • Size – Large, small, mini
- 39. Split-button • Split-button = button + menubutton • .ks-split-button • Style – Primary, info …
- 40. Split-button • Size – Large, small, mini
- 41. 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();
- 43. toolbar var t = new Toolbar({ render:"#container", children:[ { content:"menu-button", collapseOnClick:true, xclass:'menu-button‘ },{ content:‘button', xclass:'button' }]}).render();
- 46. • More …
- 47. • Simple ui
- 49. table • .table – 表格默认的样式仅有一些边框来保证表格的可 读性和结构性，DPL中 table 样式是必须的。
- 50. table • .table-striped – 奇偶行背景色区分 – ie>9
- 51. table • .table-border – 给整个表格添加边框，同时添加圆角美化表格 的内容。
- 52. table • .table-condensed – 更紧凑的表格
- 54. icons • Icons from Glyphicons – .icon-search .icon-ok
- 58. badge • Badge – 数字指示用于未读消息数目等场景 – .badge .badge-info
- 64. 表单状态 • .control-group .error .warning .success
- 65. 扩展表单 • .input-prepend .add-on • input-append .add-on
- 66. • More …
- 67. Refer • http://lesscss.org/ • http://twitter.github.com/bootstrap/ • http://docs.kissyui.com/kissy/src/css /demo.html
- 68. Next …. • Using KISSY Auto-Combo