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

Cosmos

03dc4f2e26e476958c952505c8d8f563?s=47 Andres Galante
November 13, 2018
33

 Cosmos

03dc4f2e26e476958c952505c8d8f563?s=128

Andres Galante

November 13, 2018
Tweet

Transcript

  1. None
  2. None
  3. “Zala es la persona mas feliz del mundo” Anónimo (fué

    Guille)
  4. None
  5. I DON’T KNOW WHO YOU ARE, BUT IF YOU SLOW

    US DOWN, I WILL FIND YOU AND HURT YOU
  6. None
  7. None
  8. WHY? 1

  9. Rules make the system, they make it maintainable and scalable.

    Without them there is no system, it’s a collection of random components. 1 WHY?
  10. CSS is like a bear cub. Cute and inoffensive but

    as he grows, he'll eat you alive. 1 WHY?
  11. DESIGN COSMOS DEV 1 WHY?

  12. Time Progress 1 WHY? Change Change Change

  13. Time Progress 1 WHY?

  14. 1 WHY? Responsive & Accesible Requirements

  15. -Eric Meyer “The Web is the most hostile environment to

    developer assumptions imaginable.” Responsive
  16. None
  17. Accesible

  18. 2,87% Internet Explorer 15,6% People with disabilities (older than 15

    years) Source: statcounter Source: WHO 1 WHY?
  19. None
  20. The web is accessible by default! If our app is

    not accessible, it’s our fault. 1 WHY? outline: none;
  21. None
  22. None
  23. None
  24. HOW? 2

  25. SYSTEM 2 HOW?

  26. MAINTAINABILITY Isolation and Modularity 2 HOW?

  27. Let each thing be a thing 2 HOW?

  28. Components & Layouts Separation of concerns 2 HOW?

  29. Layouts Layouts are the containers that allow for organizing and

    grouping its immediate children on the page. GalleryLayout or StackLayout 2 HOW?
  30. Components Components are modular and independent structures concerned with how

    a thing looks. Box, Button, PageHeader 2 HOW?
  31. B.E and prop Box.Header Box.Body Box.Footer 2 HOW?

  32. UI Structures Components Layouts 2 HOW?

  33. Components Layouts " 2 HOW?

  34. Components Layouts # 2 HOW?

  35. DEMO 2 HOW?

  36. Theming Now lets talk about 2 HOW?

  37. Tokens Global vs Component tokens https://css-tricks.com/theming-with-variables-globals-and-locals/ 2 HOW?

  38. Global and component variables, when combined, can be super powerful,

    make CSS more maintainable, and even collaborative. Geoff Graham 2 HOW?
  39. BUMPERS! 2 HOW?

  40. Global tokens global variables keep consistency across components Global.Concept.Modifier 2

    HOW?
  41. Global tokens Global.Concept.Modifier Global.Spacer.Small Global.FontSize.Medium Global.LineHeight.Large 2 HOW?

  42. Typography Borders Breakpoints Colors Spaces Shadows 2 HOW? Global tokens

  43. Component tokens component variables are scoped to theme-able component properties

    Block.Element.Prop.CSS-Property 2 HOW?
  44. Component tokens Box.Color Box.Header.PaddingTop Box.Primary.BorderColor Block.Element.Prop.CSS-Property 2 HOW?

  45. Box.PaddingTop Button.PaddingTop Alert.PaddingTop Box.Primary.Color ButtonPrimary.Color Alert.Primary.Color Global.Spacer Global.Color.Primary Global Component

    2 HOW?
  46. Global.Color.Primary 2 HOW?

  47. --pf-c-box--PaddingTop --pf-c-button--PaddingTop --pf-c-alert--PaddingTop --pf-global--spacer--md Global Component Box.Primary.Color ButtonPrimary.Color Alert.Primary.Color Global.Color.Primary

    2 HOW?
  48. Global.Color.Primary Alert.Primary.Color 2 HOW?

  49. --pf-c-box--PaddingTop --pf-c-button--PaddingTop --pf-c-alert--PaddingTop --pf-global--spacer--md Global Component Box.Primary.Color ButtonPrimary.Color Alert.Primary.Color Global.Color.Primary

    2 HOW?
  50. DEMO 2 HOW?

  51. LIQUID CAT Responsive Accessible Documented 2 HOW?

  52. Quality Time Accessibility Responsive Documented 2 HOW?

  53. Quality Time Accessibility Responsive Documented 2 HOW?

  54. None
  55. OUTCOME 3

  56. SYSTEMS ARE BUILT TO CHANGE 1

  57. Time Progress 3 OUTCOME

  58. A good design system empowers designers to code, and developers

    to design. Thanks Diana Mounter for this slide
  59. DESIGN COSMOS DEV 3 OUTCOME

  60. IMPROVES CONSISTENCY 2

  61. 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 3 OUTCOME
  62. IMPROVES DEVELOPMENTS EXPERIENCE 3

  63. Easier to implement Don’t make me think 3 OUTCOME

  64. IMPROVES MAINTAINABILITY 4

  65. MAINTAINABILITY Isolation and Modularity 3 OUTCOME

  66. None
  67. SO… WHAT’S THE PLAN? 4

  68. 4 THE PLAN

  69. 4 THE PLAN Organize the system implementing rules, without been

    a blocker. Goal
  70. Add layouts Add opt-in margins 4 THE PLAN Step #1

  71. 4 THE PLAN Fix components Remove margins Step #2

  72. 4 THE PLAN Recurring meeting? IE11? BrowserStack? Next steps

  73. Thanks!