kissy dpl-practice

Click here to load reader

Post on 12-Sep-2014

708 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • KISSY DPL Practice

    [email protected]

    [email protected]

  • 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