do you framework.s01.e02.kissy dpl 设计
Post on 12-Sep-2014
278 views
Embed Size (px)
DESCRIPTION
TRANSCRIPT

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-hidden– ks-shown– ks-invisible– ks-visible– ks-hide-text– ks-center-block– ks-text-overflow

• Complex ui

• 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
<div class="ks-button-group"><div class="ks-button">left</div><div class="ks-button">middle</div><div class="ks-button">right</div>
</div>

• Menu• Menu/assets/dpl.css

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>

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

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

• More …

• Simple ui

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

• More …

Refer
• http://lesscss.org/
• http://twitter.github.com/bootstrap/
• http://docs.kissyui.com/kissy/src/css/demo.html

Next ….
• Using KISSY Auto-Combo