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

1. KODE FOR DESIGNERE YGGDRASILKONFERANSEN 2017
Å bytte hjul på
et tog i fart
Eirik Backer, NRK
Fagansvarlig grensesnittutvikling

3. OVER
90 MILLIONER
SESJONER

4. ET SETT LOVER OG
REGLER SETTER
RAMMENE FOR
NRKS VIRKSOMHET
“

18. #1 CSS = VANSKELIG

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

20. CASCADING STYLESHEETS
TILGIVENDE SYNTAKS
IKKE EKSPRESSIVT
SPECIFICITY
GOTCHAS

21. web = open source word

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

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

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

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

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

27. BEST PRACTICE
ANTI-PATTERNS

37. NÅR VI BRUKER MYE TID
PÅ Å UTVIKLE ET PRODUKT,
KAN PRODUKTET I SEG SELV
BLI VIKTIGERE
ENN HVA DET LØSER

39. #2 TID = KOMPLEKSITET

40. HVILKEN REKKEFØLGE
SKRIVER DU DIN CSS?

41. HVILKEN REKKEFØLGE
SKRIVER DU DIN CSS?
ETTER LAYOUT?

42. HVILKEN REKKEFØLGE
SKRIVER DU DIN CSS?
ETTER LAYOUT?
ETTER KOMPONENTER?

43. PROSJEKT.CSS

44. SPECIFICITY
GRAPH
– Harry Roberts

45. h ps://jonassebastianohlsson.com/specificity-graph/ nrk.no

46. h ps://jonassebastianohlsson.com/specificity-graph/
#container> .group-reference.sAUTO > .group > .group-reference.s18 > .group
nrk.no

48. #3 KOMMUNIKASJON

50. METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM
1

51. 3METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM

52. 6METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM

53. 10METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM

54. 15METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM

55. HVA SKJER
NÅR SYSTEMET
FÅR 48 ENHETER?

56. 1128METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM

57. UHELDIGVIS ER IKKE
STRUKTUR MELLOM
MENNESKER LIKE
VELORGANISERT

60. LINEÆR VS. EKSPONENSIELL KOMPLEKSITET
ENHETER
KOMPLEKSITET

61. ORDEN OG REDUSERT
KOMPLEKSITET KOMMER
MED EN KOST.

62. ORDEN OG REDUSERT
KOMPLEKSITET KOMMER
MED EN KOST.
DU MÅ DEFINERE ORDEN.

63. ORDEN OG REDUSERT
KOMPLEKSITET KOMMER
MED EN KOST.
DU MÅ DEFINERE ORDEN.
OG DET ER VANSKELIG.

64. LA OSS SI PROOF OF CONCEPT
TAR 2 TIMER OG PRODUKT FOR
SLUTTBRUKER TAR 2 UKER

65. LINEÆR VS. EKSPONENSIELL KOMPLEKSITET
ENHETER
KOMPLEKSITET

66. LINEÆR VS. EKSPONENSIELL KOMPLEKSITET
ENHETER
KOMPLEKSITET

70. #4 INNHOLD

72. HVA ER SYSTEMET?

73. 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%}

74. ER DET EN STILGUIDE?

75. ER DET EN LEVEDE STILGUIDE?

76. “We did it! We launched a guide.
Mission accomplished.”
bit.ly/8s-system-is-product

77. ELLER ER DET NOE MER ENN
GUIDEN I SEG SELV?

78. A DESIGN SYSTEM
ISN’T A PROJECT.
IT’S A PRODUCT,
SERVING PRODUCTS.
– Nathan Curtis

81. NRK ER IKKE GOOGLE

85. 1.TRY

86. 1.TRY 2.FAIL

87. 1.TRY 2.FAIL 3.COLLAPSE

88. 1.TRY 2.FAIL 3.COLLAPSE 4.SOB

92. nrk.no
tv.nrk.no
nrksuper.no
yr.no
radio.nrk.no

93. nrk.no
tv.nrk.no
nrksuper.no
yr.no
radio.nrk.no

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

99. ... you get a CSS!
and you ... and you ...
and you, and you ...

100. #1 PRINSIPP:
IKKE BREKKE NOE

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

103. #2 PRINSIPP:
BAKOVER KOMPATIBEL

104. /* 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;
}

106. A B
.nrk-grid
C D
E

107. <div class="nrk-grid"> .
<div class="nrk-xs-1of12">1</div>
<div class="nrk-xs-2of12">2</div>
</div>

108. A B
.nrk-grid
C D
E mellomrom

109. A B
.nrk-grid
C
D Emellomrom

110. /* 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;
}

111. #3 PRINSIPP:
EKSPRESSIV
NAVNGIVNING

112. class="nrk-xs-12of12"

113. class="nrk-xs-12of12 "nrk-md-6of12

114. class="nrk-xs-12of12 "nrk-md-6of12 nrk-lg-3of12

115. class="nrk-xs-12of12 "nrk-md-6of12

116. class="nrk-xs-12of12"
Din NRK-profil

117. .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;
}

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

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

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

121. #4 PRINSIPP:
TILPASNINGSDYKTIG

122. .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;
}

124. .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;
}

125. .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;

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

127. .nrk-button::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: .4;
border: inherit;
border-radius: inherit;
border-width: 1px;
}

128. #5 PRINSIPP:
FORUTSIGBAR

129. .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 }

131. @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; ... }

132. body { font-family: "Comic Sans" }

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

134. #6 PRINSIPP:
KOGNITIV OG
TEKNISK YTELSE

135. .nrk-xs-100 {
width: 100vw;
margin-left: calc(50% - 50vw);
}

136. .nrk-xs-80?

137. .nrk-xs-100
.nrk-xs-10of12

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

140. #7 PRINSIPP:
ÅPENT OG ENKELT

142. A DESIGN SYSTEM’S VALUE IS
REALIZED WHEN PRODUCTS
SHIP FEATURES USING PARTS
FROM THE SYSTEM.
– Nathan Curtis

143. <link rel="stylesheet" href="https://static.nrk.no/bjartmar/1.0.0/nrk-style.css">

148. bit.ly/8s-system-team-models

149. FAQ
Hva kommer til å endre seg?
Skal de e open-sources?
Hva med et bedre navn?

151. BJARTMAR.CSS
NRK.NO TV RADIO YR P3 SUPER
NRKS DESIGNPROGRAM
Styleguide Styleguide Styleguide Styleguide Styleguide Styleguide
DESIGN SYSTEM

153. .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 }

154. Q&A