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

PatternFly Next

PatternFly Next

03dc4f2e26e476958c952505c8d8f563?s=128

Andres Galante

April 18, 2018
Tweet

More Decks by Andres Galante

Other Decks in Technology

Transcript

  1. None
  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

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