introduction to baidu map web app front-end style guide
DESCRIPTION
TRANSCRIPT
![Page 1: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/1.jpg)
Introduction to Baidu Map Web App Front-end Style Guide
by Hongru Hou 2014.2.20
![Page 2: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/2.jpg)
Contents
What is Front-end style guide?
How did our SG born?
What dose it include?
How to use it?
How to maintain it?
Further thinking
���2
![Page 3: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/3.jpg)
What is Front-end style guide?
���3
![Page 4: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/4.jpg)
���4
![Page 5: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/5.jpg)
–Anna Debenham
“Front-end style guides […] to make maintaining a site easier […] built specifically for the web […] uses real code and works in the browser […] living documentation and grows organically with a site throughout its lifetime.”
£2.00
���5
![Page 6: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/6.jpg)
How did our SG born?
���6
![Page 7: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/7.jpg)
Set up scaffolds
kss-node-template
fontcustom
gulp
���7
Style Guide Boilerplate Pattern Lab Kalei Style Guide
Grunt
![Page 8: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/8.jpg)
Grunt vs. gulp
http://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/
![Page 9: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/9.jpg)
Battle with PM and UE
Remove, remove, remove
Reduce, reduce, reduce
Check, check, check
���9
![Page 10: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/10.jpg)
Results of the battle
Before After %
Backgroundbg-color 11 7 -36.7%
opacity 5 2 -60%
Font
font-family 2 1 -50%
font-size 8 4 -50%
color 29 7 -75.9%
![Page 11: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/11.jpg)
Style tile
#FFFFFF #F9F9F9 #F2F2F2 #EAEAEA #6BB1F7#000000
背景颜色
#FFFFFF #CFCFCF #848484 #555555 #6BB1F7#3b3b3b
字体颜色
背景颜色透明度
0.8
0.8
字体大小24pt
28pt30pt32pt
Mac: ����PC: ����
字体样式
边框#D4D4D4 �� 1px
#F6F6F6 �� 1px
![Page 12: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/12.jpg)
Design principle
Separate structure and skin
Separate container and content
Meaningful class
}OOCSS
���12
![Page 13: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/13.jpg)
Hand in hand with Sass
Variables
Nesting
Partials (@import)
Mixins (@include)
Inheritance (@extend)
Control Directives (e.g. @for)
���13
![Page 14: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/14.jpg)
What does it include?
���14
![Page 15: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/15.jpg)
Folder structure
stylesheets scss css
styleguide
iconfonts
public
���15
![Page 16: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/16.jpg)
SCSS
_reset.scss + _mixin.scss + _utilities.scss
_basic.scss + _grid.scss
_components.scss
_icon-font.scss
main.scss + sg.scss
���16
![Page 17: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/17.jpg)
How to use it?
���17
![Page 18: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/18.jpg)
Naming Conventions
Block—Element__Modifier sucks
SM (Sassier Modifier)
SM+
���18
![Page 19: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/19.jpg)
![Page 20: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/20.jpg)
–Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
“In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only
the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the
hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen
followed by a digit.”
![Page 21: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/21.jpg)
![Page 22: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/22.jpg)
![Page 23: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/23.jpg)
Examples
![Page 24: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/24.jpg)
CSS
11kb
![Page 25: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/25.jpg)
4kb 3kb
HTML
![Page 26: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/26.jpg)
Icons
7 icons 3kb
27 icons 5-7kb
Mwa.woff Mwa.ttf Mwa.eot
![Page 27: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/27.jpg)
How to maintain it?
���27
![Page 28: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/28.jpg)
Update SG
svn checkout https://svn.bce.bae.baidu.com/appid89ac2cam6b/0
sudo npm install
gulp
���28
![Page 29: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/29.jpg)
Further thinking
Design accordance
New workflow
CSS has became a programatic language
![Page 30: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/30.jpg)
Q&A
![Page 31: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/31.jpg)
Acknowledgement
![Page 32: Introduction to Baidu map Web app front-end style guide](https://reader031.vdocuments.site/reader031/viewer/2022012321/547b1fc4b4af9fb4158b4dc5/html5/thumbnails/32.jpg)
Thanks