美团业务系统通用Ui方案

• AC
• 9 · 2+5K2012 ~L
• MCOSUI
• M@)8

)+'#!UI$
• COSUI
• COSUI'#!

)+'#!
• D.
• G1
• 6(
searchbox
table
pagination

)+'#!
• D.
• G1
• 6(
• : lcƒ8€c
…‚

)+UI$
• /!
“”]dh
crm.html
div class=crm-bar{{c}}/div
crm.css
...
“6”]dh
gis.html
div class=crm-bar{{g}}/div
crm.css
...

)+UI$
• HTML*3/Jclass?;
• 'FE
•

COSUI
Component
Base
Twitter Bootstrap
Layout
YUI
jQuery
...
S:
~,
CQ ro 0

CSS4
Grid system
Typography
Code
Tables
Forms
Buttons
Images
Helper classes
Responsive utilities
Component4
Glyphicons
Dropdowns
Button groups
Button
dropdowns
Input groups
Navs
Navbar
Breadcrumbs
Pagination
Labels
Badges
Jumbotron
Page header
Thumbnails
Alerts
Progress bars
Media object
List group
Panels
Wells
JavaScript4
Transitions
Modal
Dropdown
Scrollspy
Tab
Tooltip
Popover
Alert
Button
Collapse
Carousel
Affix
• - ootstrap

• H ootstrap
Bootstrap]w„
• %t~`p^7m,ƒJ;M|R
• +DCustomize0ƒ`q
• cD~BvƒJfW|R
• j.(z2k]:/Nƒ[JSEUXw9J}T
• AjQuery

Bootstrap]w„
s~,
• cD~BvƒJfW|R
• AjQuery
• H ootstrap

• H ootstrap
Bootstrap]w„
s~,
• cD~BvƒJfW|R
I)S + :/N
• AjQuery

• H ootstrap
Bootstrap]w„
s~,
• cD~BvƒJfW|R
I)S + :/N
• AjQuery
YUI, jQuery ...
and more !

Box Corner
form-table
• “L$”S
and more...

input id=date name=testDate data-widget=datepicker
data-params={mindate: 2014-01-01} /
HTML
// YUI
Y.use('w-date', function(Y) {
var auto = new Y.mt.widget.Datepicker({
node: Y.one(date),
mindate: 2014-01-01
});
});
// jQuery
$(#date).datepicker({
mindate: 2014-01-01
});
or
JavaScript
„FK?

5
COSUI'#!
4yO1 Pn
D:/
roh
YLZb
CQA

1 2*
!DOCTYPE html
html
head
titleCOSUI/title
!-- COSUI --
link href=static/node_modules/mtfe_cos-ui/cos-ui.min.css
rel=stylesheet
/head
body class=theme-cos
...
script src=static/node_modules/mtfe_cos-ui/base/base.min.js/script
/body
/html

Header
#main#nav
Sidebar Content
Footer
#l#hd
#l#bd
#l#ft
95%
1 xLayout

1 xLayout
div id=doc
div id=l-hd
div class=l-hd-left
div class=l-hd-main
span class=logo/span
h1a href=/

/a/h1
span class=version${_config.system_version!}/span
/div
#include 'menu.ftl' encoding=UTF-8
/div
#include 'userinfo.ftl' encoding=UTF-8
/div
div id=wrapper
#include 'sidebar.ftl' encoding=UTF-8
div id=l-bd class=main${body}/div
/div
div id=l-ft
#64; 2014 meituan
/div
/div

!-- )(title --
div class=page-header
h2

%/h2
/div
!-- Search Box --
div class=box
div class=box-content
form class=form-inline action=
! *input type=text name=date data-widget=datepicker /
!

*input type=text name=patnersname /
input type=submit class=btn btn-info value= /
! /form
/div
/div
!-- % --
table class=table table-striped table-bordered
thead
! tr

! /tr
! ...
/thead
tbody
! ...
/tbody
/table
!-- ) --
div class=pagination
...
/div

'LESS
! base
# ! base-var.less
# ! base.css
# ! base.html
# $ base.less
! box
# ! box-var.less
# ! box.css
# ! box.html
# $ box.less
! font-awesome
# ! FontAwesome.otf
# ! font-awesome.css
# ! font-awesome.less
# ! fontawesome-webfont.eot
# ! fontawesome-webfont.svg
# ! fontawesome-webfont.ttf
# $ fontawesome-webfont.woff
! ...

box.less
@import ../base/base-var.less;
@import ./box-var.less;
.box {
border: 1px solid @box-border;
margin-bottom: @line-height-base;
position: relative;
// '
.box-collapsed {
.box-header {
.actions .box-collapse i:before {
content: f078;
}
}
.box-content {
display: none;
}
}
}
box-var.less
@box-border: #ddd;
@box-color-highlight: @theme-color-base;
@box-padding-vertical: 10px;
@box-padding-vertical-middle: floor((@box-padding-vertical
* 0.9));
@box-padding-vertical-small: floor((@box-padding-vertical
* 0.8));
@box-padding-horizontal: 10px;
@box-padding-common: 20px;
@box-padding-double: @box-padding-common * 2;
@box-header-background: #fcfcfc;
@box-header-color: @text-color;
@box-header-color-light: #fff; // #$$
@box-header-actions-link-color: #c4c4c4;
@box-header-font-size: 18px;
@box-header-font-weight: 400;
@box-header-height: @line-height-base - 2px;
'LESS

(zS@

.
$ newmodule
! newmodule-var.less
! newmodule.html
! newmodule.less
$ someimg.png
Pull Request

美团业务系统通用Ui方案

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

美团业务系统通用Ui方案