Introduction to Baidu Map Web App Front-end Style Guide

Transcript

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
3. What is Front-end style guide?
5. –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
6. How did our SG born?
7. Set up scaffolds kss-node-template fontcustom gulp
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
10. Results of the battle Before After % Background bg-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%
11. Style tile #FFFFFF #F9F9F9 #F2F2F2 #EAEAEA #6BB1F7 #000000 Мࣟ࿾೤ #FFFFFF #CFCFCF #848484 #555555 #6BB1F7 #3b3b3b ሳุ࿾೤ Мࣟ࿾೤๩ૼ؇ 0.8 0.8 ሳุնཬ 24pt 28pt 30pt 32pt Mac: 
     PC:  ሳุဢൔ шॿ #D4D4D4
     1px #F6F6F6
     1px
12. Design principle Separate structure and skin Separate container and content Meaningful class }OOCSS
13. Hand in hand with Sass Variables Nesting Partials (@import) Mixins (@include) Inheritance (@extend) Control Directives (e.g. @for)
14. What does it include?
15. Folder structure stylesheets scss css styleguide iconfonts public
16. SCSS _reset.scss + _mixin.scss + _utilities.scss _basic.scss + _grid.scss _components.scss _icon-font.scss main.scss + sg.scss
17. How to use it?
18. Naming Conventions Block—Element__Modifier sucks SM (Sassier Modifier) SM+
20. –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.”
23. Examples
24. CSS 11kb
25. 4kb 3kb HTML
26. Icons 7 icons 3kb 27 icons 5-7kb Mwa.woff Mwa.ttf Mwa.eot
27. How to maintain it?
28. Update SG svn checkout https://svn.bce.bae.baidu.com/appid89ac2cam6b/0 sudo npm install gulp
29. Further thinking Design accordance New workflow CSS has became a programatic language
30. Q&A
31. Acknowledgement
32. Thanks