1. Introduction to
Baidu Map Web App
Front-end Style Guide
by Hongru Hou
2014.2.20

2. 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

3. What is Front-end style guide?
3

4. 4

5. £2.00
“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.”
–Anna Debenham
5

6. How did our SG born?
6

7. Set up scaffolds
kss-node-template
Style Guide Boilerplate
Pattern Lab
Kalei Style Guide
fontcustom
gulp
Grunt
7

8. Grunt vs. gulp
http://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/

9. Battle with PM and UE
Remove, remove, remove
Reduce, reduce, reduce
Check, check, check
9

10. Results of the battle
Before
After
%
bg-color
11
7
-36.7%
opacity
5
2
-60%
font-family
2
1
-50%
font-size
8
4
-50%
color
29
7
-75.9%
Background
Font

11. Style tile
背景颜色
#FFFFFF
#F9F9F9
字体颜色
#F2F2F2
#EAEAEA
背景颜色透明度
#000000
#6BB1F7
#FFFFFF
#CFCFCF
#848484
#555555
#3b3b3b
字体大小
字体样式
24pt
Mac:
PC:
28pt
0.8
30pt
32pt
0.8
边框
#D4D4D4
1px
#F6F6F6
1px
#6BB1F7

12. Design principle
Separate structure and skin
Separate container and content
}
OOCSS
Meaningful class
12

13. Hand in hand with Sass
Variables
Nesting
Partials (@import)
Mixins (@include)
Inheritance (@extend)
Control Directives (e.g. @for)
13

14. What does it include?
14

15. Folder structure
stylesheets
scss
css
styleguide
iconfonts
public
15

16. SCSS
_reset.scss + _mixin.scss + _utilities.scss
_basic.scss + _grid.scss
_components.scss
_icon-font.scss
main.scss + sg.scss
16

17. How to use it?
17

18. Naming Conventions
Block—Element__Modifier sucks
SM (Sassier Modifier)
SM+
18

20. “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.”
–Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

23. Examples

24. CSS
11kb

25. HTML
4kb
3kb

26. Icons
Mwa.woff
Mwa.ttf
Mwa.eot
7 icons
3kb
27 icons
5-7kb

27. How to maintain it?
27

28. Update SG
svn checkout https://svn.bce.bae.baidu.com/appid89ac2cam6b/0
sudo npm install
gulp
28

29. Further thinking
Design accordance
New workflow
CSS has became a programatic language

30. QA

31. Acknowledgement

32. Thanks