Introduction to Baidu Map Web App Front-end Style Guide

by Hongru Hou 2014.2.20

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

What is Front-end style guide?

���3

���4

–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

How did our SG born?

���6

Set up scaffolds

kss-node-template

fontcustom

gulp

���7

Style Guide Boilerplate Pattern Lab Kalei Style Guide

Grunt

Grunt vs. gulp

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

Battle with PM and UE

Remove, remove, remove

Reduce, reduce, reduce

Check, check, check

���9

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%

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

Design principle

Separate structure and skin

Separate container and content

Meaningful class

}OOCSS

���12

Hand in hand with Sass

Variables

Nesting

Partials (@import)

Mixins (@include)

Inheritance (@extend)

Control Directives (e.g. @for)

���13

What does it include?

���14

Folder structure

stylesheets scss css

styleguide

iconfonts

public

���15

SCSS

_reset.scss + _mixin.scss + _utilities.scss

_basic.scss + _grid.scss

_components.scss

_icon-font.scss

main.scss + sg.scss

���16

How to use it?

���17

Naming Conventions

Block—Element__Modifier sucks

SM (Sassier Modifier)

SM+

���18

–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.”

Examples

CSS

11kb

4kb 3kb

HTML

Icons

7 icons 3kb

27 icons 5-7kb

Mwa.woff Mwa.ttf Mwa.eot

How to maintain it?

���27

Update SG

svn checkout https://svn.bce.bae.baidu.com/appid89ac2cam6b/0

sudo npm install

gulp

���28

Further thinking

Design accordance

New workflow

CSS has became a programatic language

Q&A

Acknowledgement

Thanks