Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer

1.462 visualizaciones

Publicado el

Eirik Backers presentasjon på Yggdrasil 2017, 4. april 2017.

Publicado en: Diseño
  • Writing a good research paper isn't easy and it's the fruit of hard work. For help you can check writing expert. Check out, please ⇒ www.HelpWriting.net ⇐ I think they are the best
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • Very nice tips on this. In case you need help on any kind of academic writing visit website ⇒ www.HelpWriting.net ⇐ and place your order
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer

  1. 1. KODE FOR DESIGNERE YGGDRASILKONFERANSEN 2017 Å bytte hjul på et tog i fart Eirik Backer, NRK Fagansvarlig grensesnittutvikling
  2. 2. OVER 90 MILLIONER SESJONER
  3. 3. ET SETT LOVER OG REGLER SETTER RAMMENE FOR NRKS VIRKSOMHET “
  4. 4. #1 CSS = VANSKELIG
  5. 5. Tekst Tekst BLOCK FLOAT INLINE Tekst som en lenke Tekst Tekst POSITION Tekst left top INLINE-BLOCK Tekst Tekst mellomrom display: none; display: inline; display: block; display: inline-block; display: contents; display: list-item; display: inline-list-item; display: table; display: inline-table; display: table-cell; display: table-column; display: table-column-group; display: table-footer-group; display: table-header-group; display: table-row; display: table-row-group; display: table-caption; display: flex; display: inline-flex; display: grid; display: inline-grid; display: ruby; display: ruby-base; display: ruby-text; display: ruby-base-container; display: ruby-text-container; display: run-in; float: left; float: right; position: absolute; position: relative; position: static; position: sticky; position: fixed; FLEX
  6. 6. CASCADING STYLESHEETS TILGIVENDE SYNTAKS IKKE EKSPRESSIVT SPECIFICITY GOTCHAS
  7. 7. web = open source word
  8. 8. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique.
  9. 9. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio, aliquet nec urna ac Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vita aliquam ligula. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique.
  10. 10. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique.
  11. 11. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna.
  12. 12. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Pellentesque euismod purus est, vitae auctor ipsum ullamcorper a. Phasellus ma is nisl ac arcu ultrices venenatis. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna. Duis ullamcorper augue et nibh tristique, eget vestibulum magna tristique. Morbi metus odio, aliquet nec urna ac, condimentum aliquam ligula. Aliquam sagi is, sem eu egestas semper, nulla tortor volutpat tellus, non congue magna ipsum vitae urna.
  13. 13. BEST PRACTICE ANTI-PATTERNS
  14. 14. NÅR VI BRUKER MYE TID PÅ Å UTVIKLE ET PRODUKT, KAN PRODUKTET I SEG SELV BLI VIKTIGERE ENN HVA DET LØSER
  15. 15. #2 TID = KOMPLEKSITET
  16. 16. HVILKEN REKKEFØLGE SKRIVER DU DIN CSS?
  17. 17. HVILKEN REKKEFØLGE SKRIVER DU DIN CSS? ETTER LAYOUT?
  18. 18. HVILKEN REKKEFØLGE SKRIVER DU DIN CSS? ETTER LAYOUT? ETTER KOMPONENTER?
  19. 19. PROSJEKT.CSS
  20. 20. SPECIFICITY GRAPH – Harry Roberts
  21. 21. h ps://jonassebastianohlsson.com/specificity-graph/ nrk.no
  22. 22. h ps://jonassebastianohlsson.com/specificity-graph/ #container> .group-reference.sAUTO > .group > .group-reference.s18 > .group nrk.no
  23. 23. #3 KOMMUNIKASJON
  24. 24. METCALFES LOV: KOMPLEKSITET VOKSER PROPORSJONALT MED KVADRATET AV ANTALL ENHETER I ET SYSTEM 1
  25. 25. 3METCALFES LOV: KOMPLEKSITET VOKSER PROPORSJONALT MED KVADRATET AV ANTALL ENHETER I ET SYSTEM
  26. 26. 6METCALFES LOV: KOMPLEKSITET VOKSER PROPORSJONALT MED KVADRATET AV ANTALL ENHETER I ET SYSTEM
  27. 27. 10METCALFES LOV: KOMPLEKSITET VOKSER PROPORSJONALT MED KVADRATET AV ANTALL ENHETER I ET SYSTEM
  28. 28. 15METCALFES LOV: KOMPLEKSITET VOKSER PROPORSJONALT MED KVADRATET AV ANTALL ENHETER I ET SYSTEM
  29. 29. HVA SKJER NÅR SYSTEMET FÅR 48 ENHETER?
  30. 30. 1128METCALFES LOV: KOMPLEKSITET VOKSER PROPORSJONALT MED KVADRATET AV ANTALL ENHETER I ET SYSTEM
  31. 31. UHELDIGVIS ER IKKE STRUKTUR MELLOM MENNESKER LIKE VELORGANISERT
  32. 32. LINEÆR VS. EKSPONENSIELL KOMPLEKSITET ENHETER KOMPLEKSITET
  33. 33. ORDEN OG REDUSERT KOMPLEKSITET KOMMER MED EN KOST.
  34. 34. ORDEN OG REDUSERT KOMPLEKSITET KOMMER MED EN KOST. DU MÅ DEFINERE ORDEN.
  35. 35. ORDEN OG REDUSERT KOMPLEKSITET KOMMER MED EN KOST. DU MÅ DEFINERE ORDEN. OG DET ER VANSKELIG.
  36. 36. LA OSS SI PROOF OF CONCEPT TAR 2 TIMER OG PRODUKT FOR SLUTTBRUKER TAR 2 UKER
  37. 37. LINEÆR VS. EKSPONENSIELL KOMPLEKSITET ENHETER KOMPLEKSITET
  38. 38. LINEÆR VS. EKSPONENSIELL KOMPLEKSITET ENHETER KOMPLEKSITET
  39. 39. #4 INNHOLD
  40. 40. HVA ER SYSTEMET?
  41. 41. ER DET KODEN? .nrk-xs-1of12 {width:8.33333%} .nrk-xs-2of12 {width:16.6666%} .nrk-xs-3of12 {width:25%} .nrk-xs-4of12 {width:33.3333%} .nrk-xs-5of12 {width:41.6666%} .nrk-xs-6of12 {width:50%} .nrk-xs-7of12 {width:58.3333%} .nrk-xs-8of12 {width:66.6666%} .nrk-xs-9of12 {width:75%} .nrk-xs-10of12{width:83.3333%} .nrk-xs-11of12{width:91.6666%} .nrk-xs-12of12{width:100%}
  42. 42. ER DET EN STILGUIDE?
  43. 43. ER DET EN LEVEDE STILGUIDE?
  44. 44. “We did it! We launched a guide. Mission accomplished.” bit.ly/8s-system-is-product
  45. 45. ELLER ER DET NOE MER ENN GUIDEN I SEG SELV?
  46. 46. A DESIGN SYSTEM ISN’T A PROJECT. IT’S A PRODUCT, SERVING PRODUCTS. – Nathan Curtis
  47. 47. NRK ER IKKE GOOGLE
  48. 48. 1.TRY
  49. 49. 1.TRY 2.FAIL
  50. 50. 1.TRY 2.FAIL 3.COLLAPSE
  51. 51. 1.TRY 2.FAIL 3.COLLAPSE 4.SOB
  52. 52. nrk.no tv.nrk.no nrksuper.no yr.no radio.nrk.no
  53. 53. nrk.no tv.nrk.no nrksuper.no yr.no radio.nrk.no
  54. 54. <div class="nrk-grid"> <div class="nrk-xs-1of12">1</div> <div class="nrk-xs-2of12">2</div> <div class="nrk-xs-3of12">3</div> <div class="nrk-xs-4of12">4</div> <div class="nrk-xs-5of12">5</div> <div class="nrk-xs-6of12">6</div> <div class="nrk-xs-7of12">7</div> <div class="nrk-xs-8of12">8</div> <div class="nrk-xs-9of12">9</div> <div class="nrk-xs-10of12">10</div> <div class="nrk-xs-11of12">11</div> <div class="nrk-xs-12of12 nrk-md-6of12">12</div> </div>
  55. 55. ... you get a CSS! and you ... and you ... and you, and you ...
  56. 56. #1 PRINSIPP: IKKE BREKKE NOE
  57. 57. .nrk-grid .nrk-button .nrk-button--o .nrk-pagination .nrk-fade .nrk-sr .nrk-sr-focus .nrk-color-base .nrk-color-spot .nrk-color-invert .nrk-color-shade-1 .nrk-color-shade-2 .nrk-color-shade-3 .nrk-color-shade-4 .nrk-xs-100 .nrk-xs-1of12 .nrk-xs-2of12 .nrk-xs-3of12 .nrk-xs-4of12 .nrk-xs-5of12 .nrk-xs-6of12 .nrk-xs-7of12 .nrk-xs-8of12 .nrk-xs-9of12 .nrk-xs-10of12 .nrk-xs-11of12 .nrk-xs-12of12 .nrk-sm-1of12 .nrk-sm-2of12 .nrk-sm-3of12 .nrk-sm-4of12 .nrk-sm-5of12 .nrk-sm-6of12 .nrk-sm-7of12 .nrk-sm-8of12 .nrk-sm-9of12 .nrk-sm-10of12 .nrk-sm-11of12 .nrk-sm-12of12 .nrk-md-1of12 .nrk-md-2of12 .nrk-md-3of12 .nrk-md-4of12 .nrk-md-5of12 .nrk-md-6of12 .nrk-md-7of12 .nrk-md-8of12 .nrk-md-9of12 .nrk-md-10of12 .nrk-md-11of12 .nrk-md-12of12 .nrk-lg-1of12 .nrk-lg-2of12 .nrk-lg-3of12 .nrk-lg-4of12 .nrk-lg-5of12 .nrk-lg-6of12 .nrk-lg-7of12 .nrk-lg-8of12 .nrk-lg-9of12 .nrk-lg-10of12 .nrk-lg-11of12 .nrk-lg-12of12
  58. 58. #2 PRINSIPP: BAKOVER KOMPATIBEL
  59. 59. /* Grid and sizing ---------------------------------------------------------------- */ .nrk-grid.nrk-grid { /* Double selector ensures grid nestability */ display: flex; flex-wrap: wrap; font-size: 0; } .nrk-grid > * { box-sizing: border-box; flex-shrink: 0; display: inline-block; vertical-align: top; font-size: 1rem; }
  60. 60. A B .nrk-grid C D E
  61. 61. <div class="nrk-grid"> . <div class="nrk-xs-1of12">1</div> <div class="nrk-xs-2of12">2</div> </div>
  62. 62. A B .nrk-grid C D E mellomrom
  63. 63. A B .nrk-grid C D Emellomrom
  64. 64. /* Grid and sizing ---------------------------------------------------------------- */ .nrk-grid.nrk-grid { /* Double selector ensures grid nestability */ display: flex; flex-wrap: wrap; font-size: 0; } .nrk-grid > * { box-sizing: border-box; flex-shrink: 0; display: inline-block; vertical-align: top; font-size: 1rem; }
  65. 65. #3 PRINSIPP: EKSPRESSIV NAVNGIVNING
  66. 66. class="nrk-xs-12of12"
  67. 67. class="nrk-xs-12of12 "nrk-md-6of12
  68. 68. class="nrk-xs-12of12 "nrk-md-6of12 nrk-lg-3of12
  69. 69. class="nrk-xs-12of12 "nrk-md-6of12
  70. 70. class="nrk-xs-12of12" Din NRK-profil
  71. 71. .my-component { @extend %grid; } .my-component__item { @extend %grid-item; @extend %one-halve; @extend %one-quater--medium; } .my-component { @mixin %grid; } .my-component__item { @mixin %grid-item; @mixin %one-halve; @mixin %one-quater--medium; }
  72. 72. <div class="my-component"> <div class="my-component__item"> ... </div> </div> VS <div class="my-component"> <div class="nrk-grid"> <div class="nrk-xs-12of12 nrk-sm-6of12"> <div class="my-component__item"> ... </div> </div> </div> </div>
  73. 73. <ul class="listobject-list clear"> <li class="listobject"> <a href="#" class="listobject-link"> <div class="aspect-ratio-wrapper ratio-16x9"> <img class="aspect-ratio-fix" src="#" alt="" /> <div class="overlay-shadow"></div> </div> <h3 class="listobject-title">Unge lovende</h3> </a> </li> <li class="listobject"> <a href="#" class="listobject-link"> <div class="aspect-ratio-wrapper ratio-16x9"> <img class="aspect-ratio-fix" src="#" alt="" /> <div class="overlay-shadow"></div> </div> <h3 class="listobject-title">Anno</h3> </a> </li> </ul> nrk.notv.nrk.no <div class="cf flow-content container-widget lp_flow relations"> <div class="g50 col fln s6 sl9 sl12 sl18 article-reference relation flow-relation"> <article class="article widget lean plug lp_plug cf"> <a class="autonomous" href="#"> <figure class="image widget lean plug-image"> <div class="responsive-img F169"> <img src="#" alt=""> </div> </figure> <h2 class="title">Færre arbeidsledige </h2> </a> </article> </div> <div class="g50 col fln s6 sl9 sl12 sl18 article-reference relation flow-relation"> <article class="article widget lean plug lp_plug cf"> <a class="autonomous" href="#"> <figure class="image widget lean plug-image"> <div class="responsive-img F169"> <img src="#" alt=""> </div> </figure> <h2 class="title">– Ikke vent til siste</h2> </a> </article> </div> </div>
  74. 74. nrk.notv.nrk.no <ul class="nrk-grid"> <li class="nrk-xs-12of12 nrk-md-6of12"> <a class="tv-plug" href="#"> <div class="aspect-ratio-wrapper ratio-16x9"> <img class="aspect-ratio-fix" src="#" alt="" /> <div class="overlay-shadow"></div> </div> <h3 class="listobject-title">Unge lovende</h3> </a> </li> <li class="nrk-xs-12of12 nrk-md-6of12"> <a class="tv-plug" href="#"> <div class="aspect-ratio-wrapper ratio-16x9"> <img class="aspect-ratio-fix" src="#" alt="" /> <div class="overlay-shadow"></div> </div> <h3 class="listobject-title">Anno</h3> </a> </li> </ul> <div class="nrk-grid"> <div class="nrk-xs-12of12 nrk-md-6of12"> <a class="nrkno-plug" href="#"> <figure class="image widget lean plug-image"> <div class="responsive-img F169"> <img src="#" alt=""> </div> </figure> <h2 class="title">Færre arbeidsledige </h2> </a> </div> <div class="nrk-xs-12of12 nrk-md-6of12"> <a class="nrkno-plug" href="#"> <figure class="image widget lean plug-image"> <div class="responsive-img F169"> <img src="#" alt=""> </div> </figure> <h2 class="title">– Ikke vent til siste</h2> </a> </div> </div>
  75. 75. #4 PRINSIPP: TILPASNINGSDYKTIG
  76. 76. .nrk-button::-moz-focus-inner { border: 0; padding: 0 } /* Reset Firefox */ .nrk-button { -webkit-appearance: none; /* Reset iOS */ box-sizing: border-box; display: inline-block; vertical-align: middle; white-space: nowrap; position: relative; margin: 3px 1px; padding: 0 19px; border: 0 solid; border-radius: 99px; height: 41px; min-width: 41px; /* Ensure minimum touch target */ font: inherit; font-size: 14px; line-height: 41px; text-align: center; text-decoration: none; background: transparent; color: inherit; transition: .2s; }
  77. 77. .nrk-button::-moz-focus-inner { border: 0; padding: 0 } /* Reset Firefox */ .nrk-button { -webkit-appearance: none; /* Reset iOS */ box-sizing: border-box; display: inline-block; vertical-align: middle; white-space: nowrap; position: relative; margin: 3px 1px; padding: 0 19px; border: 1px solid #f6f6f6; border-radius: 99px; height: 41px; min-width: 41px; /* Ensure minimum touch target */ font: inherit; font-size: 14px; line-height: 41px; text-align: center; text-decoration: none; background: transparent; color: inherit; transition: .2s; }
  78. 78. .nrk-button::-moz-focus-inner { border: 0; padding: 0 } /* Reset Firefox */ .nrk-button { -webkit-appearance: none; /* Reset iOS */ box-sizing: border-box; display: inline-block; vertical-align: middle; white-space: nowrap; position: relative; margin: 3px 1px; padding: 0 19px; border: 1px solid; border-radius: 99px; height: 41px; min-width: 41px; /* Ensure minimum touch target */ font: inherit; font-size: 14px; line-height: 41px; text-align: center; text-decoration: none; background: transparent; color: inherit; transition: .2s; } currentColor;
  79. 79. .nrk-button::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .4; border: inherit; border-radius: inherit; border-width: 1px; } ::a er
  80. 80. .nrk-button::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .4; border: inherit; border-radius: inherit; border-width: 1px; }
  81. 81. #5 PRINSIPP: FORUTSIGBAR
  82. 82. .nrk-color-base { color: #26292a; background-color: #fff } .nrk-color-spot { color: #26292a; background-color: #00b9f2 } .nrk-color-invert { color: #fff; background-color: #141517 } .nrk-color-shade-1 { color: #26292a; background-color: #f6f6f6 } .nrk-color-shade-2 { color: #26292a; background-color: #e9e9e9 } .nrk-color-shade-3 { color: #26292a; background-color: #e0e0e0 } .nrk-color-shade-4 { color: #26292a; background-color: #c8c8c8 }
  83. 83. @font-face { font-family: 'NRK Etica Slab'; font-weight: 700; font-style: normal; ... } @font-face { font-family: 'NRK Etica Slab'; font-weight: 400; font-style: normal; ... } @font-face { font-family: 'LFT Etica'; font-weight: 400; font-style: italic; ... } @font-face { font-family: 'LFT Etica'; font-weight: 500; font-style: italic; ... } @font-face { font-family: 'LFT Etica'; font-weight: 600; font-style: italic; ... } @font-face { font-family: 'LFT Etica'; font-weight: 700; font-style: italic; ... } @font-face { font-family: 'LFT Etica'; font-weight: 800; font-style: italic; ... } @font-face { font-family: 'LFT Etica'; font-weight: 400; font-style: normal; ... } @font-face { font-family: 'LFT Etica'; font-weight: 500; font-style: normal; ... } @font-face { font-family: 'LFT Etica'; font-weight: 600; font-style: normal; ... } @font-face { font-family: 'LFT Etica'; font-weight: 700; font-style: normal; ... } @font-face { font-family: 'LFT Etica'; font-weight: 800; font-style: normal; ... }
  84. 84. body { font-family: "Comic Sans" }
  85. 85. .nrk-button::-moz-focus-inner { border: 0; padding: 0 } /* Reset Firefox */ .nrk-button { -webkit-appearance: none; /* Reset iOS */ box-sizing: border-box; display: inline-block; vertical-align: middle; white-space: nowrap; position: relative; margin: 3px 1px; padding: 0 19px; border: 1px solid; border-radius: 99px; height: 41px; min-width: 41px; /* Ensure minimum touch target */ font: inherit; font-size: 14px; line-height: 41px; text-align: center; text-decoration: none; background: transparent; color: inherit; transition: .2s; } FORUTSIGBART
  86. 86. #6 PRINSIPP: KOGNITIV OG TEKNISK YTELSE
  87. 87. .nrk-xs-100 { width: 100vw; margin-left: calc(50% - 50vw); }
  88. 88. .nrk-xs-80?
  89. 89. .nrk-xs-100 .nrk-xs-10of12
  90. 90. Will the user notice an extra 2px? Unlikely. Will the user notice the website ge ing slower because we have an unnecessary amount of CSS? More likely. “ – Shaun Bent, BBC
  91. 91. #7 PRINSIPP: ÅPENT OG ENKELT
  92. 92. A DESIGN SYSTEM’S VALUE IS REALIZED WHEN PRODUCTS SHIP FEATURES USING PARTS FROM THE SYSTEM. – Nathan Curtis
  93. 93. <link rel="stylesheet" href="https://static.nrk.no/bjartmar/1.0.0/nrk-style.css">
  94. 94. bit.ly/8s-system-team-models
  95. 95. FAQ Hva kommer til å endre seg? Skal de e open-sources? Hva med et bedre navn?
  96. 96. BJARTMAR.CSS NRK.NO TV RADIO YR P3 SUPER NRKS DESIGNPROGRAM Styleguide Styleguide Styleguide Styleguide Styleguide Styleguide DESIGN SYSTEM
  97. 97. .tv-navbar li:hover, .tv-navbar li.is-active { color: #66d1f2; border-color: currentColor } .tv-navbar--small { padding-bottom: 1px; height: 3em; line-height: 3em; font-size: 14px } .tv-plug { margin: 0; margin-bottom: 1rem; font-size: .9rem; transition: transform .2s } .tv-plug img { display: block; width: 100%; margin-bottom: .5rem; transform: scale(1.002) } .tv-plug h2 { font-weight: 800; font-size: 24px; line-height: 1 } .tv-plug h3 { font: inherit; color: #66d1f2 } .tv-plug p { margin: 0; line-height: 1.5; opacity: .7; transition: .2s } .tv-plug--fade { position: relative; overflow: hidden; margin-bottom: 3% } .tv-plug--fade h2 { max-width: 600px; font-size: 2vw; text-transform: uppercase } .tv-plug--fade figcaption { position: absolute; left: 30px; right: 30px; bottom: 0; padding: .5rem } .tv-plug--fade::before { content: ''; position: absolute; right: 0; bottom: 0; left: 0; padding-top: 50%; background: linear-gradient(rgba(20,21,23,0), rgba(20,21,23,1) 95%; } .tv-footer { padding: 2rem 0; font-size: 13px; opacity: .8 } .tv-footer::before { content: ''; display: block; margin: 1rem .5rem; border-top: 1px solid } .tv-footer a { color: #66d1f2 }
  98. 98. Q&A

×