UI Elements

A talk that I gave back in 2015 about CSS analysis, living styleguide, and a UI component framework

Transcript

2. Line-up
3. 1. Performance and Style Guide
4. 1. 2. Performance and Style Guide ui-elements: First Look
5. 1. 2. 3. Performance and Style Guide ui-elements: First Look Components — in Style
6. 1. 2. 3. 4. Performance and Style Guide ui-elements: First Look Components — in Style Components — in Script
7. Style Guide Performance and
10. Major UI Inconsistencies
11. /c/ttl/ContentServer $ grep -r --include “*.css” “h1” . | wc -l
12. !important 1139 font-size 1004 background-color 1438 #fff 946 margin 3548 padding 4187 padding: 0; 438 margin: 0; 356 color 3213 font-family 114 Data collected across all CSS files across all portals, excluding SHA’d files
13. duplicated OVER and Over STYLES
14. dev tools
15. Page Matrix 1326 1194 1270 Travel Essentials 1303 1290 1371 Delivery Options 1220 1178 1291 Data collected from production pages as on Feb 2015 unused CSS ~70%, ~23kB Per page, Per portal
16. Improvement Lots of room for
17. Is a feature “Good performance Nicole Sullivan @stubornella
18. Living Style guide? What Is a
19. A guide to existing site styles Living Style guide? What Is a
20. A guide to existing site styles Lives in code; evolves with the site Living Style guide? What Is a
21. A guide to existing site styles Lives in code; evolves with the site Collaboration tool for engineering & design teams Living Style guide? What Is a
22. good Style guide A leads to…
23. good Style guide A leads to… Better code
24. good Style guide A leads to… Informed design choices
25. good Style guide A leads to… Better performance
26. First Look ui-elements:
27. Live demo
28. Of this… Essence
29. Everything
30. Everything iS
31. Everything is A
32. Everything is A Component
33. Everything is A Component
34. Everything is A Component
35. Stack Technology
36. Frameworks
37. Tools
38. Libraries
39. Components — in Style
40. Code walkthrough
41. Components — in Script
42. Code walkthrough
43. Thank you! Rishabh Rao rishabhr@thoughtworks.com