PatternFly 4 variable system

Transcript

2. PATTERNFLY’S VARIABLE SYSTEM
3. PATTERNFLY 3 1
4. PatternFly Users 1 PATTERNFLY 3 1
6. 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 PATTERNFLY 3 1
7. PatternFly Contributors 2 Developers Designers PATTERNFLY 3 1
8. “If you give a mockup to 10 developers you’ll get 10 different results and none of them will look like the original mockup” Paul, UXD supreme leader PATTERNFLY 3 1
9. PATTERNFLY 4 VARIABLES 2
10. BUMPERS! PATTERNFLY 4 VARIABLES 2
11. Patternfly 4 Variables Global vs Component variables https://css-tricks.com/theming-with-variables-globals-and-locals/ PATTERNFLY 4 VARIABLES 2
12. Global and component variables, when combined, can be super powerful, make CSS more maintainable, and even collaborative. Geoff Graham PATTERNFLY 4 VARIABLES 2
13. Global variables global variables keep consistency across components PATTERNFLY 4 VARIABLES 2
14. Global variables Typography Borders Breakpoints Colors Spaces Shadows PATTERNFLY 4 VARIABLES 2
16. Component variables component variables are scoped to theme-able component properties PATTERNFLY 4 VARIABLES 2
17. Comment This is a an example of a title Here goes some body text that the component might have Home Dashboard Reports Users Help Logout Navigation
18. Global variable link color: #007bba PATTERNFLY 4 VARIABLES 2
21. Comment This is a an example of a title Here goes some body text that the component might have Home Dashboard Reports Users Help Logout Navigation
22. Global link color = BLUE Navigation link color = Global link color Comment link color = Global link color PATTERNFLY 4 VARIABLES 2
23. Navigation color Commment color Global link color PATTERNFLY 4 VARIABLES 2
24. Global link color = YELLOW Navigation link color = Global link color Comment link color = Global link color PATTERNFLY 4 VARIABLES 2
25. PATTERNFLY 4 VARIABLES 2 Navigation color Commment color Global link color
26. Comment This is a an example of a title Here goes some body text that the component might have Home Dashboard Reports Users Help Logout Navigation
27. Global link color = YELLOW Navigation link color = Global link color Comment link color = RED PATTERNFLY 4 VARIABLES 2
28. Navigation color Commment color PATTERNFLY 4 VARIABLES 2 Global link color
29. Comment This is a an example of a title Here goes some body text that the component might have Home Dashboard Reports Users Help Logout Navigation
36. Global spacer xl = 32px Modal Box padding = Global spacer xl PATTERNFLY 4 VARIABLES 2
37. Global spacer xl 32px PATTERNFLY 4 VARIABLES 2 Modal padding top Global spacer xl
38. Global spacer md = 16px Modal Box padding = Global spacer md PATTERNFLY 4 VARIABLES 2 Global spacer xl = 32px
39. PATTERNFLY 4 VARIABLES 2 Global spacer md 16px Modal padding top Global spacer md Global spacer xl 32px
40. Sharing components between Red Hat’s design systems PATTERNFLY 4 VARIABLES 2
41. A good design system empowers designers to code, and developers to design. PATTERNFLY 4 VARIABLES 2
42. Thanks!