#WCJKL | 9.2.2018
TeemuSuoranta
Miksi frontend-
kehittäjän pitää
rakastaa
matematiikkaa?

#WCJKL | 9.2.2018
TeemuSuoranta
Teemu Suoranta
• Web Developer & osakas Aucor Oy
• WordPress-projekteja 2013-
• Turku WordPress Meetup -järjestäjä
• Suomenkielisen WordPressin GTE

#WCJKL | 9.2.2018
TeemuSuoranta
MIKSI NUMEROILLA
ON VÄLIÄ?

#WCJKL | 9.2.2018
TeemuSuoranta
Harmonia on
matematiikkaa
FAKTA #1

#WCJKL | 9.2.2018
TeemuSuoranta
Tulemme sokeiksi
yksityiskohdille
FAKTA #2

Onko
taulu
suorassa?

#WCJKL | 9.2.2018
TeemuSuoranta
Sopusointuisuus
syntyy oikeista luvuista
FAKTA #3

#WCJKL | 9.2.2018
TeemuSuoranta
Matematiikan tie
ei ole laiskalle
FAKTA #4

#WCJKL | 9.2.2018
TeemuSuoranta
FRONTEND-
MATEMATIIKAN
PERUSTEET

#WCJKL | 9.2.2018
TeemuSuoranta
Fiksut
mittayksiköt
ESIMERKKI 1

#WCJKL | 9.2.2018
TeemuSuoranta
Absoluuttinen koko
Ympäristöstä riippumaton mitta
px, pt, cm
Otsikko 1
Otsikko 2
Otsikko 3
Kappale
40px |
16px |
32px |
24px |

#WCJKL | 9.2.2018
TeemuSuoranta
Relatiivinen koko
Ruudusta, fonttikoosta, tilasta riippuva mitta
rem, em, %, vh
Otsikko 1
Otsikko 2
Otsikko 3
Kappale
2.5rem |
1rem |
2rem |
1.5rem |

#WCJKL | 9.2.2018
TeemuSuoranta
Relatiivinen koko CSS-koodissa
html {
font-size: 100%; /* 16px */
}
@media (max-width: 767px) {
html {
font-size: 87.5%; /* 14px */
}
}
h1 {
font-size: 2.5rem; /* 40px / 35px */
}
p {
font-size: 1rem; /* 16px / 14px */
}

#WCJKL | 9.2.2018
TeemuSuoranta
Pikseleistä remmeihin
pikselit
16
= koko remmeinä
20 px
16
= 1.25 rem

#WCJKL | 9.2.2018
TeemuSuoranta
Remmeistä pikseleihin
remmit x 16 = koko pikseleinä
1.25 rem x 16 = 20 px

#WCJKL | 9.2.2018
TeemuSuoranta
Sopusuhtaiset
välit
ESIMERKKI 2

#WCJKL | 9.2.2018
TeemuSuoranta
8-point grid
Elementtien koko muuttuu 8 pikselin askelmissa
Lue lisää: Built to Adapt
a a aaaaa0.5rem 1rem 1.5rem 2rem 2.5rem

#WCJKL | 9.2.2018
TeemuSuoranta
8-point grid -esimerkki
20€ (ALV 0%)
Otsikkoteksti
Lisää ostoskoriin
2rem
1rem
2rem

#WCJKL | 9.2.2018
TeemuSuoranta
Nappula
ESIMERKKI 3

#WCJKL | 9.2.2018
TeemuSuoranta
Haluttu lopputulos
Lisää ostoskoriin

#WCJKL | 9.2.2018
TeemuSuoranta
Sopusuhtainen nappula
.btn {
font-size: 1rem;
line-height: 1.25;
padding: .375rem .5rem;
}
Lisää ostoskoriin } 2rem
korkeus = font-size x line-height + padding

#WCJKL | 9.2.2018
TeemuSuoranta
Lisää haastetta
Lisää ostoskoriin

#WCJKL | 9.2.2018
TeemuSuoranta
Sopusuhtainen nappula reunaviivalla
.btn {
font-size: 1rem;
line-height: 1.25;
/* border: 1px */
border: .0625rem solid #fff;
/* padding: .5rem - line-height & border */
padding: .3125rem .4575rem;
}
Lisää ostoskoriin } 2rem
korkeus = font-size x line-height + padding + border

#WCJKL | 9.2.2018
TeemuSuoranta
DISCIPLINE
EQUALS
FREEDOM
Jocko Willink: