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

PF next UXDev Meetup

03dc4f2e26e476958c952505c8d8f563?s=47 Andres Galante
March 26, 2018
53

PF next UXDev Meetup

03dc4f2e26e476958c952505c8d8f563?s=128

Andres Galante

March 26, 2018
Tweet

Transcript

  1. None
  2. PATTERNFLY’S HISTORY 1

  3. 2012 PATTERNFLY’S HISTORY 1

  4. PATTERNFLY’S HISTORY 1

  5. PATTERNFLY’S HISTORY 1 Red Hat UIs Looked “different”

  6. “We always do ugly things... always…” Bruno Souza, Java Champion

    PATTERNFLY’S HISTORY 1
  7. PATTERNFLY’S HISTORY 1 Paul

  8. 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’S HISTORY 1
  9. PATTERNFLY’S HISTORY 1

  10. PATTERNFLY’S HISTORY 1

  11. PATTERNFLY’S HISTORY 1

  12. PATTERNFLY’S HISTORY 1

  13. “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, fearless UXD supreme leader PATTERNFLY’S HISTORY 1
  14. BOOTSTRAP PATTERNFLY’S HISTORY 1

  15. = + ❤ PATTERNFLY’S HISTORY 1

  16. PATTERNFLY’S HISTORY 1 August 22nd, 2013 First Commit

  17. PATTERNFLY’S HISTORY 1 May 15th, 2014 First Release v1.0

  18. PATTERNFLY’S HISTORY 1

  19. PATTERNFLY’S HISTORY 1

  20. 2015 PATTERNFLY’S HISTORY 1

  21. PATTERNFLY’S HISTORY 1

  22. 2016 PATTERNFLY’S HISTORY 1

  23. “This PatternFly thing might actually work…” Paul’s thought in 2016

    PATTERNFLY’S HISTORY 1
  24. CSS is like a bear cub. Cute and inoffensive but

    as he grows, he'll eat you alive. PATTERNFLY’S HISTORY 1
  25. PATTERNFLY’S HISTORY 1

  26. PATTERNFLY’S HISTORY 1

  27. PATTERNFLY 3 PATTERNFLY’S HISTORY 1

  28. None
  29. 2018 PATTERNFLY’S HISTORY 1

  30. None
  31. “I made a list of what was wrong on PatternFly.

    PatternFly Next solves everything.” Matt Nolting, Insights team PATTERNFLY’S HISTORY 1
  32. PATTERNFLY NEXT 2

  33. NO BOOTSTRAP! PATTERNFLY NEXT 2

  34. “I’m not one to say Bootstrap doesn’t have its place

    in the world, it’s great for MVPs and startups. But when you have your own system, you need to be your own thing and stop leaning on the training wheels of Bootstrap” Kendall Totten, RH com lead PATTERNFLY NEXT 2
  35. MAINTAINABILITY PATTERNFLY NEXT 2 Isolation and Modularity

  36. PATTERNFLY NEXT 2 Let each thing be a thing

  37. PATTERNFLY NEXT 2 Let’s first talk about HTML

  38. PATTERNFLY NEXT 2 Components, Layouts, and Patterns. (and Demos)

  39. PATTERNFLY NEXT 2 Layouts Layouts are the containers that allow

    for organizing and grouping its immediate children on the page. pf-l-gallery
  40. PATTERNFLY NEXT 2 Components Components are modular and independent structures

    concerned with how a thing looks. pf-c-box
  41. PATTERNFLY NEXT 2 Patterns A pattern is structure that is

    made of more than one component. pf-p-name
  42. PATTERNFLY NEXT 2 … and Demos

  43. PATTERNFLY NEXT 2 BE and M pf-c-box pf-c-box__header pf-is-danger

  44. PATTERNFLY NEXT 2 Let each thing be a thing

  45. Create a modifier only if it changes state, scale, or

    color PATTERNFLY NEXT 2 Look! Oxford commas .pf-c-box .pf-is-danger .pf-is-sm .pf-is-expanded
  46. UI Structures Components Layouts PATTERNFLY NEXT 2

  47. Components Layouts # PATTERNFLY NEXT 2

  48. Components Layouts $ PATTERNFLY NEXT 2

  49. PATTERNFLY NEXT 2 DEMO

  50. Now let’s talk about PATTERNFLY NEXT 2 CSS

  51. PATTERNFLY NEXT 2 Variables Global vs Component variables https://css-tricks.com/theming-with-variables-globals-and-locals/

  52. Global and component variables, when combined, can be super powerful,

    make CSS more maintainable, and even collaborative. Geoff Graham PATTERNFLY NEXT 2
  53. PATTERNFLY NEXT 2 Global variables global variables keep consistency across

    components --pf-global--concept--modifier--state--PropertyCamelCase
  54. PATTERNFLY NEXT 2

  55. PATTERNFLY NEXT 2 Component variables component variables are scoped to

    theme-able component properties --pf-c-block__element--modifier--state--PropertyCamelCase
  56. PATTERNFLY NEXT 2

  57. PATTERNFLY NEXT 2 —pf-c-box--PaddingTop —pf-c-button--PaddingTop —pf-c-alert--PaddingTop —pf-c-box--primary--Color —pf-c-button--primary--Color —pf-c-alert--primary--Color —pf-global--spacer--md

    —pf-global--primary--color Global Component
  58. PATTERNFLY NEXT 2

  59. PATTERNFLY NEXT 2 —pf-c-box--PaddingTop —pf-c-button--PaddingTop —pf-c-alert--PaddingTop —pf-c-box--primary--Color —pf-c-button--primary--Color —pf-c-alert--primary--Color —pf-global--spacer--md

    —pf-global--primary--color Global Component
  60. PATTERNFLY NEXT 2

  61. PATTERNFLY NEXT 2 —pf-c-box--PaddingTop —pf-c-button--PaddingTop —pf-c-alert--PaddingTop —pf-c-box--primary--Color —pf-c-button--primary--Color —pf-c-alert--primary--Color —pf-global--spacer--md

    —pf-global--primary--color Global Component
  62. Sass nesting PATTERNFLY NEXT 2 To create BEM entities. Always

    keep specificity to the minimum.
  63. PATTERNFLY NEXT 2 DEMO

  64. Documentation driven development PATTERNFLY NEXT 2 If it’s not documented

    it doesn’t exists
  65. LIQUID CAT Responsive Accessible Documented PATTERNFLY NEXT 2

  66. PATTERNFLY NEXT 2 Freedom! You can do whatever you want,

    as long as you follow the rules.
  67. PATTERNFLY NEXT 2 seriously… follow the rules! SERIUSLY…

  68. PATTERNFLY NEXT 2 A good design system empowers designers to

    code, and developers to design.
  69. YOU CSS UI PATTERNFLY NEXT 2

  70. YOU CSS UI PATTERNFLY NEXT 2

  71. PATTERNFLY NEXT 2 Systems are built to change!

  72. PATTERNFLY NEXT 2 What do you think?

  73. LET’S SEE IT IN ACTION 3

  74. None
  75. Header Main Sidbar

  76. Header Header

  77. Context Selector Brand Secondary Nav Toolbar Toolbar Toolbar Toolbar Toolbar

  78. Page Header Toolbar

  79. List List item List item List item List header List

    body
  80. split main split secondary Toolbar

  81. Main Nav