KISSY DPL Practice

yiminghe@gmail.com

dxq613@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 browsers, and thus spend less time fighting with browser defaults.

http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/

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-inline-block

ks-hidden

ks-shown

ks-invisible

ks-visible

ks-hide-text

ks-center-block

ks-text-overflow

Complex ui

Overlay

s/kissy/1.3.0/overlay/assets/dpl.css

dialog

popup

tooltip

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 ks-button-warning

ks-button ks-button-danger

ks-button ks-button-inverse

button

Size

ks-button-large

ks-button-small

ks-button-mini

disabled

Ks-button-disabled

button

Button group

ks-button-group

leftmiddleright

Menu

Menu/assets/dpl.css

menu

ks-menu

ks-menuitem

ks-submenu-arrow

submenu

alone

Checkable menu

ks-menuitem-checkbox

ks-menuitem-checked

checkable menuitem

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

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

toolbar

toolbar/assets/dpl.css

toolbar

var t = new Toolbar({

render:"#container",

children:[ {

content:"menu-button",

collapseOnClick:true,

xclass:'menu-button

},{

content:button',

xclass:'button'

}]}).render();

combobox

combobox/assets/dpl.css

More

Simple ui

table

css/dpl/tables.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

form

css/dpl/forms.css

.form-vertical

.form-search

.form-inline

.form-horizontal

.control-group .error .warning .success

.input-prepend .add-on

input-append .add-on

More

Refer

http://lesscss.org/

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

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

Next .

Using KISSY Auto-Combo