Speaker: Cong Pham - Product Designer @ Anduin Transactions Bio: Product designer at Anduin Transactions. Previously Misfit Wearables. Pushing pixels, crafting interfaces and brewing coffee daily. Description: The story of how we f**ked bad CSS up pretty hard. The story of courage on how we destroyed old conventions to create something new, useful and functional that unified interfaces across teams and products. How you should do the same thing for your team. And what are we expecting to come in the future.

1. 1
Cong Pham
Product Designer @ Anduin Transactions
cong.ph — me@cong.ph

2. 2

3. There are two types of people in the world
3

4. 1.
Ones who write well thought out, awesome and
maintainable CSS, who have good night's sleep
and fun weekends.
4

5. 2.
5

6. z-index: 1000000;
6

7. z-index: 1000000;
7

8. z-index: -999999;
8

9. z-index: -999999;
9

10. .homepage-promos .grid-50 {
width: 100%;
}
.homepage-promos .grid-33 {
width: 100%;
}
.homepage-promos .grid-34 {
width: 100%;
}
10

11. .product-tab {
height: 568px;
width: 99.753%;
}
11

12. .container-inner.promo-status {
float: center;
}
12

13. 13

14. What the actual fuck?
C’est quoi ce bordel?
CLGT?
14

15. 15

16. 16

17. .pizza-shop {
...
}
17

18. .pizza-shop {
.coke {
...
}
}
18

19. .sandwich-shop {
...
}
Can our sandwich shop have the same styling for its coke?
19

20. .pizza-shop {
.coke {
...
}
}
.sandwich-shop {
.coke {
...
}
}
20

21. Bad reusability
Not DRY
21

22. Variables aren’t centralized
22

23. Deep nesting was insane
23

24. .pizza-shop {
.menu {
.drinks {
.cold-drinks {
.coke {
...
}
}
}
}
}
24

25. .pizza-shop .menu .drinks .cold-drinks .coke {...}
25

26. .pizza-shop .menu .drinks .cold-drinks .coke {...}
26
🤣😭

27. Turning on SCSS-linter was a
27

28. The lack of systematic approach
28

29. 1. No icon system
29

30. 2. No appropriate color system
$grey: ...;
$lighter-grey: ...;
$xtra-light-grey: ...;
$dark-grey: ...;
$darker-grey: ...;
30

31. 3. No typographic system
31

32. 4. No layering system (z-index)
32

33. 5. No good naming convention
.pizza-shop-front-door-container-wrapper {...}
33

34. 5. No good naming convention
.pizza-shop-front-door-container-wrapper {...}
34

35. Anduin Component Library
35

36. http://anduin.design/
36

37. 37

38. Things are organized based on components rather than views/pages
38

39. .btn {...}
.card {...}
.dropdown {...}
.nav-bar {...}
.well {...}
39

40. An organized page for all global variables.
40

41. 41

42. New naming convention
http://rscss.io/
42

43. .card {
...
.title {
...
}
&.-primary {
...
}
}
43

44. .card {
...
.title {
...
}
&.-primary {
...
}
}
44

45. .card {
...
.title {
...
}
&.-primary {
...
}
}
45

46. .card {
...
.title {
...
}
&.-primary {
...
}
}
46

47. <div class=“card -primary”>
<div class=“title>...</div>
</div>
47

48. <div class=“card -primary”>
<div class=“title>...</div>
</div>
compares to Bootstrap
<div class=“card card-primary”>
<div class=“card-title>…</div>
</div>
48

49. <div class=“card -primary”>
<div class=“title>...</div>
</div>
compares to Bootstrap
<div class=“card card-primary”>
<div class=“card-title>…</div>
</div>
💯💯
49

50. A brand new icon set
50

51. Icon font vs SVG icons
51

52. Icon font vs SVG icons
52

53. • Pros
• Doesn’t get pixelate
• @font-face is widely supported
• You can use CSS color property to change color
• Cons
• Browser needs to load the entire font
• Hard to update when you want to add new icons
• They don’t work like you want them to
• Dealing with all the font’s properties isn’t pleasant
• Browser fallback on missing glyphs looks ugly
• Emojis are cooler nowadays
Icon font
53

54. • Pros
• Doesn’t pixelate
• Extensive customizations
• Behave & render correctly
• Browser will only need to load the chosen SVG rather than the entire
sprite
• XLINK:HREF is awesome
• Updating new icons is super easy (Grunt)
• Cons
• XLINK:HREF doesn’t work on IE.
SVG icons
54

55. • Pros
• Doesn’t pixelate
• Extensive customizations
• Behave & render correctly
• Browser will only need to load the chosen SVG rather than the entire
sprite
• XLINK:HREF is awesome
• Updating new icons is super easy (Grunt)
• Cons
• XLINK:HREF doesn’t work on IE.
SVG icons
55

56. • Pros
• Doesn’t pixelate
• Extensive customizations
• Behave & render correctly
• Browser will only need to load the chosen SVG rather than the entire
sprite
• XLINK:HREF is awesome
• Updating new icons is super easy (Grunt)
• Cons
• XLINK:HREF doesn’t work on IE.
SVG icons
56

57. A new z-index scale
57

58. // The z-index scale
$z-index-1: 100;
$z-index-2: 200;
$z-index-3: 300;
$z-index-4: 400;
$z-index-5: 500;
$z-index-6: 600;
$z-index-7: 700;
$z-index-8: 800;
$z-index-9: 900;
$z-index-10: 1000;
58

59. // z-index 2
$z-index-calendar-dropdown: $z-index-2;
$z-index-dropdown-list: $z-index-2;
$z-index-hover-color-scheme: $z-index-2;
$z-index-modal-content: $z-index-2;
// z-index 3
$z-index-datepicker-field: $z-index-3;
$z-index-dropdown-field: $z-index-3;
59

60. Better set of Utils classes
60

61. Last but not least, great documentation.
61

62. 62

63. 63

64. • Nicer, cleaner and maintainable CSS codebase
• Better for development
• Better for prototyping new products
• Engineers can now do simple layout adjustments
without asking a designer for help
• This acts as our UI style guide as well -> easier to
onboard new hires
64

65. 65

66. More components
66

67. More components
67

68. 68
blueprintjs.com

69. 69
New ACL will include a library of different master layouts

70. 70
Modular CSS

71. Involve engineers in the development of ACL’s next version
71

72. Further unifying and making UX patterns more consistent across all products
72

73. http://anduin.design/
73

74. 74