Cosmos

Transcript

3. “Zala es la persona mas feliz del mundo” Anónimo (fué Guille)
5. I DON’T KNOW WHO YOU ARE, BUT IF YOU SLOW US DOWN, I WILL FIND YOU AND HURT YOU
8. WHY? 1
9. Rules make the system, they make it maintainable and scalable. Without them there is no system, it’s a collection of random components. 1 WHY?
10. CSS is like a bear cub. Cute and inoffensive but as he grows, he'll eat you alive. 1 WHY?
11. DESIGN COSMOS DEV 1 WHY?
12. Time Progress 1 WHY? Change Change Change
13. Time Progress 1 WHY?
14. 1 WHY? Responsive & Accesible Requirements
15. -Eric Meyer “The Web is the most hostile environment to developer assumptions imaginable.” Responsive
17. Accesible
18. 2,87% Internet Explorer 15,6% People with disabilities (older than 15 years) Source: statcounter Source: WHO 1 WHY?
20. The web is accessible by default! If our app is not accessible, it’s our fault. 1 WHY? outline: none;
24. HOW? 2
25. SYSTEM 2 HOW?
26. MAINTAINABILITY Isolation and Modularity 2 HOW?
27. Let each thing be a thing 2 HOW?
28. Components & Layouts Separation of concerns 2 HOW?
29. Layouts Layouts are the containers that allow for organizing and grouping its immediate children on the page. GalleryLayout or StackLayout 2 HOW?
30. Components Components are modular and independent structures concerned with how a thing looks. Box, Button, PageHeader 2 HOW?
31. B.E and prop Box.Header Box.Body Box.Footer 2 HOW?
32. UI Structures Components Layouts 2 HOW?
33. Components Layouts " 2 HOW?
34. Components Layouts # 2 HOW?
35. DEMO 2 HOW?
36. Theming Now lets talk about 2 HOW?
37. Tokens Global vs Component tokens https://css-tricks.com/theming-with-variables-globals-and-locals/ 2 HOW?
38. Global and component variables, when combined, can be super powerful, make CSS more maintainable, and even collaborative. Geoff Graham 2 HOW?
39. BUMPERS! 2 HOW?
40. Global tokens global variables keep consistency across components Global.Concept.Modifier 2 HOW?
41. Global tokens Global.Concept.Modifier Global.Spacer.Small Global.FontSize.Medium Global.LineHeight.Large 2 HOW?
42. Typography Borders Breakpoints Colors Spaces Shadows 2 HOW? Global tokens
43. Component tokens component variables are scoped to theme-able component properties Block.Element.Prop.CSS-Property 2 HOW?
44. Component tokens Box.Color Box.Header.PaddingTop Box.Primary.BorderColor Block.Element.Prop.CSS-Property 2 HOW?
45. Box.PaddingTop Button.PaddingTop Alert.PaddingTop Box.Primary.Color ButtonPrimary.Color Alert.Primary.Color Global.Spacer Global.Color.Primary Global Component 2 HOW?
46. Global.Color.Primary 2 HOW?
47. --pf-c-box--PaddingTop --pf-c-button--PaddingTop --pf-c-alert--PaddingTop --pf-global--spacer--md Global Component Box.Primary.Color ButtonPrimary.Color Alert.Primary.Color Global.Color.Primary 2 HOW?
48. Global.Color.Primary Alert.Primary.Color 2 HOW?
49. --pf-c-box--PaddingTop --pf-c-button--PaddingTop --pf-c-alert--PaddingTop --pf-global--spacer--md Global Component Box.Primary.Color ButtonPrimary.Color Alert.Primary.Color Global.Color.Primary 2 HOW?
50. DEMO 2 HOW?
51. LIQUID CAT Responsive Accessible Documented 2 HOW?
52. Quality Time Accessibility Responsive Documented 2 HOW?
53. Quality Time Accessibility Responsive Documented 2 HOW?
55. OUTCOME 3
56. SYSTEMS ARE BUILT TO CHANGE 1
57. Time Progress 3 OUTCOME
58. A good design system empowers designers to code, and developers to design. Thanks Diana Mounter for this slide
59. DESIGN COSMOS DEV 3 OUTCOME
60. IMPROVES CONSISTENCY 2
61. https://www.nngroup.com/articles/top-10-mistakes-web-design/ “...when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experiences” Jakob Nielsen 3 OUTCOME
62. IMPROVES DEVELOPMENTS EXPERIENCE 3
63. Easier to implement Don’t make me think 3 OUTCOME
64. IMPROVES MAINTAINABILITY 4
65. MAINTAINABILITY Isolation and Modularity 3 OUTCOME
67. SO… WHAT’S THE PLAN? 4
68. 4 THE PLAN
69. 4 THE PLAN Organize the system implementing rules, without been a blocker. Goal
70. Add layouts Add opt-in margins 4 THE PLAN Step #1
71. 4 THE PLAN Fix components Remove margins Step #2
72. 4 THE PLAN Recurring meeting? IE11? BrowserStack? Next steps
73. Thanks!