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

Patternfly next short

Patternfly next short

03dc4f2e26e476958c952505c8d8f563?s=128

Andres Galante

June 06, 2018
Tweet

More Decks by Andres Galante

Other Decks in Technology

Transcript

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

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