SlideShare uma empresa Scribd logo
1 de 154
Baixar para ler offline
KODE FOR DESIGNERE YGGDRASILKONFERANSEN 2017
Å bytte hjul på
et tog i fart
Eirik Backer, NRK
Fagansvarlig grensesnittutvikling
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
OVER
90 MILLIONER
SESJONER
ET SETT LOVER OG
REGLER SETTER
RAMMENE FOR
NRKS VIRKSOMHET
“
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
#1 CSS = VANSKELIG
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
CASCADING STYLESHEETS
TILGIVENDE SYNTAKS
IKKE EKSPRESSIVT
SPECIFICITY
GOTCHAS
web = open source word
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.
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.
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.
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.
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.
BEST PRACTICE
ANTI-PATTERNS
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
NÅR VI BRUKER MYE TID
PÅ Å UTVIKLE ET PRODUKT,
KAN PRODUKTET I SEG SELV
BLI VIKTIGERE
ENN HVA DET LØSER
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
#2 TID = KOMPLEKSITET
HVILKEN REKKEFØLGE
SKRIVER DU DIN CSS?
HVILKEN REKKEFØLGE
SKRIVER DU DIN CSS?
ETTER LAYOUT?
HVILKEN REKKEFØLGE
SKRIVER DU DIN CSS?
ETTER LAYOUT?
ETTER KOMPONENTER?
PROSJEKT.CSS
SPECIFICITY
GRAPH
– Harry Roberts
h ps://jonassebastianohlsson.com/specificity-graph/ nrk.no
h ps://jonassebastianohlsson.com/specificity-graph/
#container> .group-reference.sAUTO > .group > .group-reference.s18 > .group
nrk.no
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
#3 KOMMUNIKASJON
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM
1
3METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM
6METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM
10METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM
15METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM
HVA SKJER
NÅR SYSTEMET
FÅR 48 ENHETER?
1128METCALFES LOV:
KOMPLEKSITET VOKSER
PROPORSJONALT MED
KVADRATET AV ANTALL
ENHETER I ET SYSTEM
UHELDIGVIS ER IKKE
STRUKTUR MELLOM
MENNESKER LIKE
VELORGANISERT
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
LINEÆR VS. EKSPONENSIELL KOMPLEKSITET
ENHETER
KOMPLEKSITET
ORDEN OG REDUSERT
KOMPLEKSITET KOMMER
MED EN KOST.
ORDEN OG REDUSERT
KOMPLEKSITET KOMMER
MED EN KOST.
DU MÅ DEFINERE ORDEN.
ORDEN OG REDUSERT
KOMPLEKSITET KOMMER
MED EN KOST.
DU MÅ DEFINERE ORDEN.
OG DET ER VANSKELIG.
LA OSS SI PROOF OF CONCEPT
TAR 2 TIMER OG PRODUKT FOR
SLUTTBRUKER TAR 2 UKER
LINEÆR VS. EKSPONENSIELL KOMPLEKSITET
ENHETER
KOMPLEKSITET
LINEÆR VS. EKSPONENSIELL KOMPLEKSITET
ENHETER
KOMPLEKSITET
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
#4 INNHOLD
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
HVA ER SYSTEMET?
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%}
ER DET EN STILGUIDE?
ER DET EN LEVEDE STILGUIDE?
“We did it! We launched a guide.
Mission accomplished.”
bit.ly/8s-system-is-product
ELLER ER DET NOE MER ENN
GUIDEN I SEG SELV?
A DESIGN SYSTEM
ISN’T A PROJECT.
IT’S A PRODUCT,
SERVING PRODUCTS.
– Nathan Curtis
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
NRK ER IKKE GOOGLE
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
1.TRY
1.TRY 2.FAIL
1.TRY 2.FAIL 3.COLLAPSE
1.TRY 2.FAIL 3.COLLAPSE 4.SOB
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
nrk.no
tv.nrk.no
nrksuper.no
yr.no
radio.nrk.no
nrk.no
tv.nrk.no
nrksuper.no
yr.no
radio.nrk.no
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
<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>
... you get a CSS!
and you ... and you ...
and you, and you ...
#1 PRINSIPP:
IKKE BREKKE NOE
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
.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
#2 PRINSIPP:
BAKOVER KOMPATIBEL
/* 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;
}
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
A B
.nrk-grid
C D
E
<div class="nrk-grid"> .
<div class="nrk-xs-1of12">1</div>
<div class="nrk-xs-2of12">2</div>
</div>
A B
.nrk-grid
C D
E mellomrom
A B
.nrk-grid
C
D Emellomrom
/* 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;
}
#3 PRINSIPP:
EKSPRESSIV
NAVNGIVNING
class="nrk-xs-12of12"
class="nrk-xs-12of12 "nrk-md-6of12
class="nrk-xs-12of12 "nrk-md-6of12 nrk-lg-3of12
class="nrk-xs-12of12 "nrk-md-6of12
class="nrk-xs-12of12"
Din NRK-profil
.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;
}
<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>
<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>
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>
#4 PRINSIPP:
TILPASNINGSDYKTIG
.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;
}
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
.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;
}
.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;
.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
.nrk-button::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: .4;
border: inherit;
border-radius: inherit;
border-width: 1px;
}
#5 PRINSIPP:
FORUTSIGBAR
.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 }
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
@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; ... }
body { font-family: "Comic Sans" }
.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
#6 PRINSIPP:
KOGNITIV OG
TEKNISK YTELSE
.nrk-xs-100 {
width: 100vw;
margin-left: calc(50% - 50vw);
}
.nrk-xs-80?
.nrk-xs-100
.nrk-xs-10of12
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
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
#7 PRINSIPP:
ÅPENT OG ENKELT
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
A DESIGN SYSTEM’S VALUE IS
REALIZED WHEN PRODUCTS
SHIP FEATURES USING PARTS
FROM THE SYSTEM.
– Nathan Curtis
<link rel="stylesheet" href="https://static.nrk.no/bjartmar/1.0.0/nrk-style.css">
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
bit.ly/8s-system-team-models
FAQ
Hva kommer til å endre seg?
Skal de e open-sources?
Hva med et bedre navn?
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
BJARTMAR.CSS
NRK.NO TV RADIO YR P3 SUPER
NRKS DESIGNPROGRAM
Styleguide Styleguide Styleguide Styleguide Styleguide Styleguide
DESIGN SYSTEM
Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer
.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 }
Q&A

Mais conteúdo relacionado

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

Tran Thi My Nhon - Masterslide
Tran Thi My Nhon - MasterslideTran Thi My Nhon - Masterslide
Tran Thi My Nhon - MasterslideTran Thi My Nhon
 
Gold Elegant Branding Kit Presentation.pptx
Gold Elegant Branding Kit Presentation.pptxGold Elegant Branding Kit Presentation.pptx
Gold Elegant Branding Kit Presentation.pptxBryntChristianRealub
 
005-Chemistry-Chemistry-Lab-Project-For-School.pptx
005-Chemistry-Chemistry-Lab-Project-For-School.pptx005-Chemistry-Chemistry-Lab-Project-For-School.pptx
005-Chemistry-Chemistry-Lab-Project-For-School.pptxBiswajitSabar2
 
Free The Enterprise With Ruby & Master Your Own Domain
Free The Enterprise With Ruby & Master Your Own DomainFree The Enterprise With Ruby & Master Your Own Domain
Free The Enterprise With Ruby & Master Your Own DomainKen Collins
 
Introduction to Content Modelling
Introduction to Content Modelling Introduction to Content Modelling
Introduction to Content Modelling PebbleRoad
 
012 Haloalkanes And Haloarenes PowerPoint Template - MyFreeSlides.com.pptx
012 Haloalkanes And Haloarenes PowerPoint Template - MyFreeSlides.com.pptx012 Haloalkanes And Haloarenes PowerPoint Template - MyFreeSlides.com.pptx
012 Haloalkanes And Haloarenes PowerPoint Template - MyFreeSlides.com.pptxMaheshChavan298549
 
ITT 2014 - Max Seelemann - Hello TextKit!
ITT 2014 - Max Seelemann - Hello TextKit!ITT 2014 - Max Seelemann - Hello TextKit!
ITT 2014 - Max Seelemann - Hello TextKit!Istanbul Tech Talks
 
Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design
Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design
Tim Frick
 
001 Adsorption Surface Chemistry And Catalysis PPT - MyFreeSlides.com.pptx
001 Adsorption Surface Chemistry And Catalysis PPT - MyFreeSlides.com.pptx001 Adsorption Surface Chemistry And Catalysis PPT - MyFreeSlides.com.pptx
001 Adsorption Surface Chemistry And Catalysis PPT - MyFreeSlides.com.pptxAayanPatel5
 
Balanced Scorecard.pptx
Balanced Scorecard.pptxBalanced Scorecard.pptx
Balanced Scorecard.pptxThakurShrey
 
Spotify cassandra london
Spotify cassandra londonSpotify cassandra london
Spotify cassandra londonNoa Resare
 

Semelhante a Å bytte hjul på et tog i fart: Hvordan implementere et designsystem i praksis - Eirik Backer (20)

2_22_16 Portfolio
2_22_16 Portfolio2_22_16 Portfolio
2_22_16 Portfolio
 
Tran Thi My Nhon - Masterslide
Tran Thi My Nhon - MasterslideTran Thi My Nhon - Masterslide
Tran Thi My Nhon - Masterslide
 
Master x slide 16x9-white1
Master x slide 16x9-white1Master x slide 16x9-white1
Master x slide 16x9-white1
 
Gold Elegant Branding Kit Presentation.pptx
Gold Elegant Branding Kit Presentation.pptxGold Elegant Branding Kit Presentation.pptx
Gold Elegant Branding Kit Presentation.pptx
 
Business power point slides
Business power point slidesBusiness power point slides
Business power point slides
 
005-Chemistry-Chemistry-Lab-Project-For-School.pptx
005-Chemistry-Chemistry-Lab-Project-For-School.pptx005-Chemistry-Chemistry-Lab-Project-For-School.pptx
005-Chemistry-Chemistry-Lab-Project-For-School.pptx
 
9DE46AD6.pptx
9DE46AD6.pptx9DE46AD6.pptx
9DE46AD6.pptx
 
007-Plastic-Pollution.pptx
007-Plastic-Pollution.pptx007-Plastic-Pollution.pptx
007-Plastic-Pollution.pptx
 
Pie Charts.pptx
Pie Charts.pptxPie Charts.pptx
Pie Charts.pptx
 
Free The Enterprise With Ruby & Master Your Own Domain
Free The Enterprise With Ruby & Master Your Own DomainFree The Enterprise With Ruby & Master Your Own Domain
Free The Enterprise With Ruby & Master Your Own Domain
 
Introduction to Content Modelling
Introduction to Content Modelling Introduction to Content Modelling
Introduction to Content Modelling
 
012 Haloalkanes And Haloarenes PowerPoint Template - MyFreeSlides.com.pptx
012 Haloalkanes And Haloarenes PowerPoint Template - MyFreeSlides.com.pptx012 Haloalkanes And Haloarenes PowerPoint Template - MyFreeSlides.com.pptx
012 Haloalkanes And Haloarenes PowerPoint Template - MyFreeSlides.com.pptx
 
FOLIO ASK (CODING).pptx
FOLIO ASK (CODING).pptxFOLIO ASK (CODING).pptx
FOLIO ASK (CODING).pptx
 
ITT 2014 - Max Seelemann - Hello TextKit!
ITT 2014 - Max Seelemann - Hello TextKit!ITT 2014 - Max Seelemann - Hello TextKit!
ITT 2014 - Max Seelemann - Hello TextKit!
 
Future is now
Future is nowFuture is now
Future is now
 
Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design
Making the Transition from Print to Digital Design

Making the Transition from Print to Digital Design

 
001 Adsorption Surface Chemistry And Catalysis PPT - MyFreeSlides.com.pptx
001 Adsorption Surface Chemistry And Catalysis PPT - MyFreeSlides.com.pptx001 Adsorption Surface Chemistry And Catalysis PPT - MyFreeSlides.com.pptx
001 Adsorption Surface Chemistry And Catalysis PPT - MyFreeSlides.com.pptx
 
Balanced Scorecard.pptx
Balanced Scorecard.pptxBalanced Scorecard.pptx
Balanced Scorecard.pptx
 
Achu
AchuAchu
Achu
 
Spotify cassandra london
Spotify cassandra londonSpotify cassandra london
Spotify cassandra london
 

Mais de Yggdrasilkonferansen

Dude, where's my data? Forbrukerrettighteter i en digital hverdag - Finn Lütz...
Dude, where's my data? Forbrukerrettighteter i en digital hverdag - Finn Lütz...Dude, where's my data? Forbrukerrettighteter i en digital hverdag - Finn Lütz...
Dude, where's my data? Forbrukerrettighteter i en digital hverdag - Finn Lütz...Yggdrasilkonferansen
 
Kultur, bier og esler - Gunvor Bottheim
Kultur, bier og esler - Gunvor BottheimKultur, bier og esler - Gunvor Bottheim
Kultur, bier og esler - Gunvor BottheimYggdrasilkonferansen
 
Norge Rundt på kartet: fra hackday til crowdsourcing - Erlend Wiig og Harald ...
Norge Rundt på kartet: fra hackday til crowdsourcing - Erlend Wiig og Harald ...Norge Rundt på kartet: fra hackday til crowdsourcing - Erlend Wiig og Harald ...
Norge Rundt på kartet: fra hackday til crowdsourcing - Erlend Wiig og Harald ...Yggdrasilkonferansen
 
LittleBits – Tingenes Internett (workshop) - Jan Håvard Skjetne og Sinan Softic
LittleBits – Tingenes Internett (workshop) - Jan Håvard Skjetne og Sinan SofticLittleBits – Tingenes Internett (workshop) - Jan Håvard Skjetne og Sinan Softic
LittleBits – Tingenes Internett (workshop) - Jan Håvard Skjetne og Sinan SofticYggdrasilkonferansen
 
Norgesportalen – Norges ansikt utad! - Bente Lyngstad og Lise Jøraandstad
Norgesportalen – Norges ansikt utad! - Bente Lyngstad og Lise JøraandstadNorgesportalen – Norges ansikt utad! - Bente Lyngstad og Lise Jøraandstad
Norgesportalen – Norges ansikt utad! - Bente Lyngstad og Lise JøraandstadYggdrasilkonferansen
 
Rølpefestkrangel vs. litteraturhusdebatt: Hvordan designe for samtaler på net...
Rølpefestkrangel vs. litteraturhusdebatt: Hvordan designe for samtaler på net...Rølpefestkrangel vs. litteraturhusdebatt: Hvordan designe for samtaler på net...
Rølpefestkrangel vs. litteraturhusdebatt: Hvordan designe for samtaler på net...Yggdrasilkonferansen
 
South by Southwest (SXSW) 2017 – høydepunkter
South by Southwest (SXSW) 2017 – høydepunkterSouth by Southwest (SXSW) 2017 – høydepunkter
South by Southwest (SXSW) 2017 – høydepunkterYggdrasilkonferansen
 
Spleis – fra hypotesetesting til folkefinansering - Bjørn Kjetil Hellestræ og...
Spleis – fra hypotesetesting til folkefinansering - Bjørn Kjetil Hellestræ og...Spleis – fra hypotesetesting til folkefinansering - Bjørn Kjetil Hellestræ og...
Spleis – fra hypotesetesting til folkefinansering - Bjørn Kjetil Hellestræ og...Yggdrasilkonferansen
 
Designsprint i praksis - Dag Helge Scott og Marte Gråberg
Designsprint i praksis - Dag Helge Scott og Marte GråbergDesignsprint i praksis - Dag Helge Scott og Marte Gråberg
Designsprint i praksis - Dag Helge Scott og Marte GråbergYggdrasilkonferansen
 
The future of marketing and digital products - Kristoffer Kjølberg
The future of marketing and digital products - Kristoffer KjølbergThe future of marketing and digital products - Kristoffer Kjølberg
The future of marketing and digital products - Kristoffer KjølbergYggdrasilkonferansen
 
De beste appene er de du ikke ser! - John Eivind Hallén og Runar Dahlsengen
De beste appene er de du ikke ser! - John Eivind Hallén og Runar DahlsengenDe beste appene er de du ikke ser! - John Eivind Hallén og Runar Dahlsengen
De beste appene er de du ikke ser! - John Eivind Hallén og Runar DahlsengenYggdrasilkonferansen
 
Designsprint aka Kill Your Darlings - Berit Klundseter og Turid Ødegård
Designsprint aka Kill Your Darlings - Berit Klundseter og Turid ØdegårdDesignsprint aka Kill Your Darlings - Berit Klundseter og Turid Ødegård
Designsprint aka Kill Your Darlings - Berit Klundseter og Turid ØdegårdYggdrasilkonferansen
 
Går språket til #Hælvette? - Christine Calvert
Går språket til #Hælvette? - Christine CalvertGår språket til #Hælvette? - Christine Calvert
Går språket til #Hælvette? - Christine CalvertYggdrasilkonferansen
 
«Den digitale vinen»: Historien om en e-handelsløsning som ikke skal selge - ...
«Den digitale vinen»: Historien om en e-handelsløsning som ikke skal selge - ...«Den digitale vinen»: Historien om en e-handelsløsning som ikke skal selge - ...
«Den digitale vinen»: Historien om en e-handelsløsning som ikke skal selge - ...Yggdrasilkonferansen
 
SXSW – Tid for implementering - Thomas Olsson
SXSW – Tid for implementering - Thomas OlssonSXSW – Tid for implementering - Thomas Olsson
SXSW – Tid for implementering - Thomas OlssonYggdrasilkonferansen
 
Snik-kikk på nye NRK.no - Øyvind Johannessen
Snik-kikk på nye NRK.no - Øyvind JohannessenSnik-kikk på nye NRK.no - Øyvind Johannessen
Snik-kikk på nye NRK.no - Øyvind JohannessenYggdrasilkonferansen
 
Nille.no: Konseptet som snur opp ned på alt - Cecilie Tveter
Nille.no: Konseptet som snur opp ned på alt - Cecilie TveterNille.no: Konseptet som snur opp ned på alt - Cecilie Tveter
Nille.no: Konseptet som snur opp ned på alt - Cecilie TveterYggdrasilkonferansen
 
Sosialt sett – om teknologi, kommunikasjon og livet i mellom - Astrid Valen-U...
Sosialt sett – om teknologi, kommunikasjon og livet i mellom - Astrid Valen-U...Sosialt sett – om teknologi, kommunikasjon og livet i mellom - Astrid Valen-U...
Sosialt sett – om teknologi, kommunikasjon og livet i mellom - Astrid Valen-U...Yggdrasilkonferansen
 

Mais de Yggdrasilkonferansen (20)

Dude, where's my data? Forbrukerrettighteter i en digital hverdag - Finn Lütz...
Dude, where's my data? Forbrukerrettighteter i en digital hverdag - Finn Lütz...Dude, where's my data? Forbrukerrettighteter i en digital hverdag - Finn Lütz...
Dude, where's my data? Forbrukerrettighteter i en digital hverdag - Finn Lütz...
 
Kultur, bier og esler - Gunvor Bottheim
Kultur, bier og esler - Gunvor BottheimKultur, bier og esler - Gunvor Bottheim
Kultur, bier og esler - Gunvor Bottheim
 
Norge Rundt på kartet: fra hackday til crowdsourcing - Erlend Wiig og Harald ...
Norge Rundt på kartet: fra hackday til crowdsourcing - Erlend Wiig og Harald ...Norge Rundt på kartet: fra hackday til crowdsourcing - Erlend Wiig og Harald ...
Norge Rundt på kartet: fra hackday til crowdsourcing - Erlend Wiig og Harald ...
 
LittleBits – Tingenes Internett (workshop) - Jan Håvard Skjetne og Sinan Softic
LittleBits – Tingenes Internett (workshop) - Jan Håvard Skjetne og Sinan SofticLittleBits – Tingenes Internett (workshop) - Jan Håvard Skjetne og Sinan Softic
LittleBits – Tingenes Internett (workshop) - Jan Håvard Skjetne og Sinan Softic
 
Norgesportalen – Norges ansikt utad! - Bente Lyngstad og Lise Jøraandstad
Norgesportalen – Norges ansikt utad! - Bente Lyngstad og Lise JøraandstadNorgesportalen – Norges ansikt utad! - Bente Lyngstad og Lise Jøraandstad
Norgesportalen – Norges ansikt utad! - Bente Lyngstad og Lise Jøraandstad
 
Rølpefestkrangel vs. litteraturhusdebatt: Hvordan designe for samtaler på net...
Rølpefestkrangel vs. litteraturhusdebatt: Hvordan designe for samtaler på net...Rølpefestkrangel vs. litteraturhusdebatt: Hvordan designe for samtaler på net...
Rølpefestkrangel vs. litteraturhusdebatt: Hvordan designe for samtaler på net...
 
South by Southwest (SXSW) 2017 – høydepunkter
South by Southwest (SXSW) 2017 – høydepunkterSouth by Southwest (SXSW) 2017 – høydepunkter
South by Southwest (SXSW) 2017 – høydepunkter
 
Spleis – fra hypotesetesting til folkefinansering - Bjørn Kjetil Hellestræ og...
Spleis – fra hypotesetesting til folkefinansering - Bjørn Kjetil Hellestræ og...Spleis – fra hypotesetesting til folkefinansering - Bjørn Kjetil Hellestræ og...
Spleis – fra hypotesetesting til folkefinansering - Bjørn Kjetil Hellestræ og...
 
Designsprint i praksis - Dag Helge Scott og Marte Gråberg
Designsprint i praksis - Dag Helge Scott og Marte GråbergDesignsprint i praksis - Dag Helge Scott og Marte Gråberg
Designsprint i praksis - Dag Helge Scott og Marte Gråberg
 
The future of marketing and digital products - Kristoffer Kjølberg
The future of marketing and digital products - Kristoffer KjølbergThe future of marketing and digital products - Kristoffer Kjølberg
The future of marketing and digital products - Kristoffer Kjølberg
 
De beste appene er de du ikke ser! - John Eivind Hallén og Runar Dahlsengen
De beste appene er de du ikke ser! - John Eivind Hallén og Runar DahlsengenDe beste appene er de du ikke ser! - John Eivind Hallén og Runar Dahlsengen
De beste appene er de du ikke ser! - John Eivind Hallén og Runar Dahlsengen
 
Designsprint aka Kill Your Darlings - Berit Klundseter og Turid Ødegård
Designsprint aka Kill Your Darlings - Berit Klundseter og Turid ØdegårdDesignsprint aka Kill Your Darlings - Berit Klundseter og Turid Ødegård
Designsprint aka Kill Your Darlings - Berit Klundseter og Turid Ødegård
 
Kode for designere - Eirik Backer
Kode for designere - Eirik BackerKode for designere - Eirik Backer
Kode for designere - Eirik Backer
 
Går språket til #Hælvette? - Christine Calvert
Går språket til #Hælvette? - Christine CalvertGår språket til #Hælvette? - Christine Calvert
Går språket til #Hælvette? - Christine Calvert
 
FJORD Trends – Fran Merino
FJORD Trends – Fran MerinoFJORD Trends – Fran Merino
FJORD Trends – Fran Merino
 
«Den digitale vinen»: Historien om en e-handelsløsning som ikke skal selge - ...
«Den digitale vinen»: Historien om en e-handelsløsning som ikke skal selge - ...«Den digitale vinen»: Historien om en e-handelsløsning som ikke skal selge - ...
«Den digitale vinen»: Historien om en e-handelsløsning som ikke skal selge - ...
 
SXSW – Tid for implementering - Thomas Olsson
SXSW – Tid for implementering - Thomas OlssonSXSW – Tid for implementering - Thomas Olsson
SXSW – Tid for implementering - Thomas Olsson
 
Snik-kikk på nye NRK.no - Øyvind Johannessen
Snik-kikk på nye NRK.no - Øyvind JohannessenSnik-kikk på nye NRK.no - Øyvind Johannessen
Snik-kikk på nye NRK.no - Øyvind Johannessen
 
Nille.no: Konseptet som snur opp ned på alt - Cecilie Tveter
Nille.no: Konseptet som snur opp ned på alt - Cecilie TveterNille.no: Konseptet som snur opp ned på alt - Cecilie Tveter
Nille.no: Konseptet som snur opp ned på alt - Cecilie Tveter
 
Sosialt sett – om teknologi, kommunikasjon og livet i mellom - Astrid Valen-U...
Sosialt sett – om teknologi, kommunikasjon og livet i mellom - Astrid Valen-U...Sosialt sett – om teknologi, kommunikasjon og livet i mellom - Astrid Valen-U...
Sosialt sett – om teknologi, kommunikasjon og livet i mellom - Astrid Valen-U...
 

Último

LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 

Último (19)

LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 

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

  • 1. KODE FOR DESIGNERE YGGDRASILKONFERANSEN 2017 Å bytte hjul på et tog i fart Eirik Backer, NRK Fagansvarlig grensesnittutvikling
  • 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.
  • 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
  • 41. HVILKEN REKKEFØLGE SKRIVER DU DIN CSS? ETTER LAYOUT?
  • 42. HVILKEN REKKEFØLGE SKRIVER DU DIN CSS? ETTER LAYOUT? ETTER KOMPONENTER?
  • 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
  • 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
  • 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
  • 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 ...
  • 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
  • 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; }
  • 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
  • 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; }
  • 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>
  • 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; }
  • 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
  • 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
  • 142. A DESIGN SYSTEM’S VALUE IS REALIZED WHEN PRODUCTS SHIP FEATURES USING PARTS FROM THE SYSTEM. – Nathan Curtis
  • 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