PatternFly Next

Transcript

2. PATTERNFLY NEXT
3. “I made a list of what was wrong on PatternFly. PatternFly Next solves everything.” Matt Nolting, Insights team PATTERNFLY NEXT
4. BOOTSTRAP! PATTERNFLY NEXT
5. “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, redhat.com design system lead PATTERNFLY NEXT
6. 1 PATTERNFLY NEXT
8. 2 PATTERNFLY NEXT
9. MAINTAINABILITY Isolation and Modularity PATTERNFLY NEXT
10. Let each thing be a thing PATTERNFLY NEXT
11. Let’s first talk about HTML PATTERNFLY NEXT
12. Components & Layouts (and Demos) Look! a hipster ampersand! PATTERNFLY NEXT
13. Layouts Layouts are the containers that allow for organizing and grouping its immediate children on the page. pf-l-gallery PATTERNFLY NEXT
14. Components Components are modular and independent structures concerned with how a thing looks. pf-c-box PATTERNFLY NEXT
15. … and Demos PATTERNFLY NEXT
16. CLASS NAMING SYNTAX pf-c-block pf-c-block__element pf-is-modifier PATTERNFLY NEXT
17. Let each thing be a thing PATTERNFLY NEXT
18. Create a modifier only if it changes state, scale, or color Look! Oxford commas .pf-c-box .pf-is-danger .pf-is-sm .pf-is-expanded PATTERNFLY NEXT
19. UI Structures Components Layouts PATTERNFLY NEXT
20. Components Layouts ! PATTERNFLY NEXT
21. Components Layouts " PATTERNFLY NEXT
22. DEMO PATTERNFLY NEXT
23. Now let’s talk about PATTERNFLY NEXT 2 CSS
24. Variables Global vs Component variables https://css-tricks.com/theming-with-variables-globals-and-locals/ PATTERNFLY NEXT
25. Global and component variables, when combined, can be super powerful, make CSS more maintainable, and even collaborative. Geoff Graham PATTERNFLY NEXT
26. Global variables global variables keep consistency across components $pf-global--concept--PropertyCamelCase--modifier--state PATTERNFLY NEXT
27. Global variables $pf-global--concept--PropertyCamelCase--modifier--state PATTERNFLY NEXT $pf-global--spacer--sm $pf-global--FontSize--sm $pf-global--LineHeight--sm
28. Component variables component variables are scoped to theme-able component properties $pf-c-block__element--modifier--state--PropertyCamelCase PATTERNFLY NEXT
29. Component variables PATTERNFLY NEXT $pf-c-block__element--modifier--state--PropertyCamelCase $pf-c-box--Color $pf-c-box__header--PaddingTop $pf-c-box--is-primary--BorderColor
30. $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 PATTERNFLY NEXT
31. $pf-global--primary-color: blue; PATTERNFLY NEXT
32. $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 PATTERNFLY NEXT
33. $pf-global--primary-color: blue; $pf-c-alert--primary--Color: red; PATTERNFLY NEXT
34. $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 PATTERNFLY NEXT
35. Sass nesting To create class names. Always keep specificity to the minimum. PATTERNFLY NEXT
36. DEMO PATTERNFLY NEXT
37. PF3 Friendly PATTERNFLY NEXT
38. Documentation driven development If it’s not documented it doesn’t exists PATTERNFLY NEXT
39. LIQUID CAT Responsive Accessible Documented PATTERNFLY NEXT
40. Freedom! You can do whatever you want, as long as you follow the rules. PATTERNFLY NEXT
41. A good design system empowers designers to code, and developers to design. PATTERNFLY NEXT
42. YOU CSS UI PATTERNFLY NEXT
43. YOU CSS UI PATTERNFLY NEXT
44. Systems are built to change! PATTERNFLY NEXT
45. Thanks! PATTERNFLY NEXT