PF next UXDev Meetup

Transcript

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
29. 2018 PATTERNFLY’S HISTORY 1
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
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