Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PatternFly 4 variable system

03dc4f2e26e476958c952505c8d8f563?s=47 Andres Galante
September 25, 2018
49

PatternFly 4 variable system

03dc4f2e26e476958c952505c8d8f563?s=128

Andres Galante

September 25, 2018
Tweet

Transcript

  1. None
  2. PATTERNFLY’S VARIABLE SYSTEM

  3. PATTERNFLY 3 1

  4. PatternFly Users 1 PATTERNFLY 3 1

  5. None
  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
  15. None
  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

  19. None
  20. None
  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
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  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!