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

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

ET SETT LOVER OG
REGLER SETTER
RAMMENE FOR
NRKS VIRKSOMHET
“

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

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

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.

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

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?

SPECIFICITY
GRAPH
– Harry Roberts

h ps://jonassebastianohlsson.com/speciﬁcity-graph/ nrk.no

h ps://jonassebastianohlsson.com/speciﬁcity-graph/
#container> .group-reference.sAUTO > .group > .group-reference.s18 > .group
nrk.no

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

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

ER DET KODEN?
.nrk-xs-1of12 {width:8.33333%}
.nrk-xs-3of12 {width:25%}
.nrk-xs-10of12{width:83.3333%}
.nrk-xs-11of12{width:91.6666%}
.nrk-xs-12of12{width:100%}

“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

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

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

.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;
vertical-align: top;
font-size: 1rem;
}

#3 PRINSIPP:
EKSPRESSIV
NAVNGIVNING

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

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

class="nrk-xs-12of12"
Din NRK-proﬁl

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

<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>
<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="#">
</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>
<h3 class="listobject-title">Unge lovende</h3>
</a>
</li>
<li class="nrk-xs-12of12 nrk-md-6of12">
<a class="tv-plug" href="#">
</div>
<h3 class="listobject-title">Anno</h3>
</a>
</li>
</ul>
<div class="nrk-xs-12of12 nrk-md-6of12">
<a class="nrkno-plug" href="#">
</div>
</figure>
<h2 class="title">Færre arbeidsledige </h2>
</a>
</div>
<div class="nrk-xs-12of12 nrk-md-6of12">
<a class="nrkno-plug" href="#">
</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 */
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;
}

.nrk-button {
position: relative;
margin: 3px 1px;
padding: 0 19px;
border: 1px solid #f6f6f6;
height: 41px;
font: inherit;
font-size: 14px;
line-height: 41px;
text-align: center;
color: inherit;
transition: .2s;
}

.nrk-button {
position: relative;
margin: 3px 1px;
padding: 0 19px;
border: 1px solid;
height: 41px;
font: inherit;
font-size: 14px;
line-height: 41px;
text-align: center;
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;
}

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

@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: 400; font-style: normal; ... }

body { font-family: "Comic Sans" }

.nrk-button {
position: relative;
margin: 3px 1px;
padding: 0 19px;
border: 1px solid;
height: 41px;
font: inherit;
font-size: 14px;
line-height: 41px;
text-align: center;
color: inherit;
transition: .2s;
}
FORUTSIGBART

#6 PRINSIPP:
KOGNITIV OG
TEKNISK YTELSE

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

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

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

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

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

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

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

Recommended

Recommended

More Related Content

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

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

More from Yggdrasilkonferansen

More from Yggdrasilkonferansen (20)

Recently uploaded

Recently uploaded (16)

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