KISSY DPL Practice

KISSY DPL PracticeCTV 10yiminghe@gmail.comdxq613@gmail.com

{Do You Framework}_S1_E2PreviousKISSY Component API DesignWhyHowPrincipleIntroductionKISSY DPL = Bootstrap + KISSY CSSKISSY CSS ks-inline-block ks-clear

Less

KISSY DPLLESSLESSLESS extends CSS with dynamic behavior such as:

variablesmixinsoperations functions.LESSVariables

LESSMixins

LESSOperation

LESSFunctions

KISSY DPL

KISSY DPLStructure

Bases/kissy/1.3.0/css/dpl/base.csscss resetsrc/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 resetFont

cssresetul/olMargin? Padding?

reset-contextreset under specified context

gridsfixed

gridsfluid

Fly-swingHtml Css 30px 10px

fly-swingdemo

CommonCommonly used css class.ks-clearks-hiddenks-shownks-invisibleks-visibleks-hide-textks-center-blockks-text-overflowComplex uiJs 23Buttons/kissy/1.3.0/button/assets/dpl.cssbuttonStyleKs-buttonks-button ks-button-primaryks-button ks-button-infoks-button ks-button-successks-button ks-button-warningks-button ks-button-dangerks-button ks-button-inverse

buttonSizeks-button-largeks-button-smallks-button-mini

disabledKs-button-disabled

buttonButton groupks-button-group

leftmiddleright

MenuMenu/assets/dpl.cssmenuks-menuks-menuitemks-submenu-arrow

submenu

alone

Checkable menuks-menuitem-checkboxks-menuitem-checked

checkable menuitem

MenubuttonMenubutton/assets/dpl.cssmenubuttonmenubutton = menu + button.ks-menu-buttonstyleprimary, info .

menubuttonSizeLarge, small, mini

split-buttonSplit-button/assets/dpl.cssSplit-buttonSplit-button = button + menubutton.ks-split-buttonStylePrimary, info

Split-buttonSizeLarge, small, mini

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

More

Simple ui39tablecss/dpl/table.csstable.tableDPL table

table.table-stripedie>9

table.table-border

table.table-condensed

iconscss/dpl/icons.css

iconsIcons from Glyphicons.icon-search .icon-ok

LabelsCss/dpl/labels.csslabels.label, .label-success

badgescss/dpl/badges.cssbadgeBadge.badge .badge-info

More

Referhttp://lesscss.org/

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

http://docs.kissyui.com/kissy/src/css/demo.htmlNext .Using KISSY Auto-Combo