do you framework.s01.e02.kissy dpl 设计
Post on 12-Sep-2014
272 views
Embed Size (px)
DESCRIPTION
TRANSCRIPT
KISSY DPL Practice
KISSY DPL PracticeCTV [email protected]@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