Transcript
Page 1: Do You Framework.s01.e02.kissy dpl 设计

画 皮

KISSY DPL Practice

CTV 10 出品[email protected]

[email protected]

{Do You Framework}_S1_E2

Page 2: Do You Framework.s01.e02.kissy dpl 设计

Previous

• KISSY Component API Design–Why– How– Principle

Page 3: Do You Framework.s01.e02.kissy dpl 设计

Introduction

• KISSY DPL = Bootstrap + KISSY CSS– KISSY CSS• 双飞翼布局

– ks-inline-block ks-clear …

Page 4: Do You Framework.s01.e02.kissy dpl 设计

• Less

• KISSY DPL

Page 5: Do You Framework.s01.e02.kissy dpl 设计

• LESS

Page 6: Do You Framework.s01.e02.kissy dpl 设计

LESS

• LESS extends CSS with dynamic behavior such as:

– variables–mixins– operations – functions.

Page 7: Do You Framework.s01.e02.kissy dpl 设计

LESS

• Variables

Page 8: Do You Framework.s01.e02.kissy dpl 设计

LESS

• Mixins

Page 9: Do You Framework.s01.e02.kissy dpl 设计

LESS

• Operation

Page 10: Do You Framework.s01.e02.kissy dpl 设计

LESS

• Functions

Page 11: Do You Framework.s01.e02.kissy dpl 设计

• KISSY DPL

Page 12: Do You Framework.s01.e02.kissy dpl 设计

KISSY DPL

• Structure

Page 13: Do You Framework.s01.e02.kissy dpl 设计

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

Page 14: Do You Framework.s01.e02.kissy dpl 设计

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/04/

18/reset-reasoning/

Page 15: Do You Framework.s01.e02.kissy dpl 设计

css reset

• Font

Page 16: Do You Framework.s01.e02.kissy dpl 设计

cssreset

• ul/ol–Margin? Padding?

Page 17: Do You Framework.s01.e02.kissy dpl 设计

reset-context

• reset under specified context

Page 18: Do You Framework.s01.e02.kissy dpl 设计

grids

• fixed

Page 19: Do You Framework.s01.e02.kissy dpl 设计

grids

• fluid

Page 20: Do You Framework.s01.e02.kissy dpl 设计

Fly-swing

• 双飞翼布局– Html 固定– Css 绝对布局– 栅格 30px ,间隙 10px

Page 21: Do You Framework.s01.e02.kissy dpl 设计

fly-swing

• demo

Page 22: Do You Framework.s01.e02.kissy dpl 设计

Common

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

Page 23: Do You Framework.s01.e02.kissy dpl 设计

• Complex ui

Page 24: Do You Framework.s01.e02.kissy dpl 设计

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

Page 25: Do You Framework.s01.e02.kissy dpl 设计

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

Page 26: Do You Framework.s01.e02.kissy dpl 设计

button

• Size– ks-button-large– ks-button-small– ks-button-mini

• disabled– Ks-button-disabled

Page 27: Do You Framework.s01.e02.kissy dpl 设计

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>

Page 28: Do You Framework.s01.e02.kissy dpl 设计

• Menu• Menu/assets/dpl.css

Page 29: Do You Framework.s01.e02.kissy dpl 设计

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>

Page 30: Do You Framework.s01.e02.kissy dpl 设计

Checkable menu

• ks-menuitem-checkbox• ks-menuitem-checked

<div class="ks-menuitem ks-menuitem-checked"><div class="ks-menuitem-checkbox"></div>checkable menuitem</div>

Page 31: Do You Framework.s01.e02.kissy dpl 设计

• Menubutton• Menubutton/assets/dpl.css

Page 32: Do You Framework.s01.e02.kissy dpl 设计

menubutton

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

Page 33: Do You Framework.s01.e02.kissy dpl 设计

menubutton

• Size– Large, small, mini

Page 34: Do You Framework.s01.e02.kissy dpl 设计

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

Page 35: Do You Framework.s01.e02.kissy dpl 设计

Split-button

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

Page 36: Do You Framework.s01.e02.kissy dpl 设计

Split-button

• Size– Large, small, mini

Page 37: Do You Framework.s01.e02.kissy dpl 设计

Split-button

• Menu position

new SplitButton({

render:"#para2",

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();

Page 38: Do You Framework.s01.e02.kissy dpl 设计

• More …

Page 39: Do You Framework.s01.e02.kissy dpl 设计

• Simple ui

Page 40: Do You Framework.s01.e02.kissy dpl 设计

• table• css/dpl/table.css

Page 41: Do You Framework.s01.e02.kissy dpl 设计

table

• .table– 表格默认的样式仅有一些边框来保证表格的可

读性和结构性, DPL 中 table 样式是必须的。

Page 42: Do You Framework.s01.e02.kissy dpl 设计

table

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

Page 43: Do You Framework.s01.e02.kissy dpl 设计

table

• .table-border– 给整个表格添加边框,同时添加圆角美化表格

的内容。

Page 44: Do You Framework.s01.e02.kissy dpl 设计

table

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

Page 45: Do You Framework.s01.e02.kissy dpl 设计

• icons• css/dpl/icons.css

Page 46: Do You Framework.s01.e02.kissy dpl 设计

icons

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

Page 47: Do You Framework.s01.e02.kissy dpl 设计

• Labels• Css/dpl/labels.css

Page 48: Do You Framework.s01.e02.kissy dpl 设计

labels

• .label, .label-success

Page 49: Do You Framework.s01.e02.kissy dpl 设计

• badges• css/dpl/badges.css

Page 50: Do You Framework.s01.e02.kissy dpl 设计

badge

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

Page 51: Do You Framework.s01.e02.kissy dpl 设计

• More …

Page 52: Do You Framework.s01.e02.kissy dpl 设计

Refer

• http://lesscss.org/

• http://twitter.github.com/bootstrap/

• http://docs.kissyui.com/kissy/src/css/demo.html

Page 53: Do You Framework.s01.e02.kissy dpl 设计

Next ….

• Using KISSY Auto-Combo


Top Related