Patternfly next short

Transcript

2. PATTERNFLY NEXT
3. BOOTSTRAP! PATTERNFLY NEXT
4. “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
5. 1 PATTERNFLY NEXT
7. 2 PATTERNFLY NEXT
8. MAINTAINABILITY Isolation and Modularity PATTERNFLY NEXT
9. Let each thing be a thing PATTERNFLY NEXT
10. Let’s first talk about HTML PATTERNFLY NEXT
11. Components & Layouts (and Demos) Look! a hipster ampersand! PATTERNFLY NEXT
12. Layouts Layouts are the containers that allow for organizing and grouping its immediate children on the page. pf-l-gallery PATTERNFLY NEXT
13. Components Components are modular and independent structures concerned with how a thing looks. pf-c-box PATTERNFLY NEXT
14. … and Demos PATTERNFLY NEXT
15. CLASS NAMING SYNTAX pf-c-block pf-c-block__element pf-m-modifier PATTERNFLY NEXT
16. Let each thing be a thing PATTERNFLY NEXT
17. Create a modifier only if it changes state, scale, or color Look! Oxford commas .pf-c-box .pf-m-danger .pf-m-sm .pf-m-expanded PATTERNFLY NEXT
18. UI Structures Components Layouts PATTERNFLY NEXT
19. Components Layouts ! PATTERNFLY NEXT
20. Components Layouts " PATTERNFLY NEXT
21. DEMO PATTERNFLY NEXT
22. Now let’s talk about PATTERNFLY NEXT 2 CSS
23. Variables Global vs Component variables https://css-tricks.com/theming-with-variables-globals-and-locals/ PATTERNFLY NEXT
24. Global variables global variables keep consistency across components $pf-global--concept--PropertyCamelCase--modifier--state PATTERNFLY NEXT
25. Global variables $pf-global--concept--PropertyCamelCase--modifier--state PATTERNFLY NEXT $pf-global--spacer--sm $pf-global--FontSize--sm $pf-global--LineHeight--sm
26. Component variables component variables are scoped to theme-able component properties $pf-c-block__element--modifier--state--PropertyCamelCase PATTERNFLY NEXT
27. 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
28. $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
29. $pf-global--primary-color: blue; PATTERNFLY NEXT
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; $pf-c-alert--primary--Color: red; 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. Sass nesting To create class names. Always keep specificity to the minimum. PATTERNFLY NEXT
34. DEMO PATTERNFLY NEXT
35. PF3 Friendly PATTERNFLY NEXT
36. Documentation driven development If it’s not documented it doesn’t exists PATTERNFLY NEXT
37. LIQUID CAT Responsive Accessible Documented PATTERNFLY NEXT
38. A good design system empowers designers to code, and developers to design. PATTERNFLY NEXT
39. Thanks! PATTERNFLY NEXT