Luento 7

Responsiivinen suunnittelu
- suhteelliset (fluid) CSS-yksiköt ja funktiot:
  - näkymäportti, näkymäportin yksiköt
  - % tai fr flexissä/gridissä
  - min, max, minmax, clamp
- flex ja grid
  - flex: grow, shrink, wrap
  - grid: auto-fit/-fill
  - sisäsyntyinen suunnittelu

media queryt
responsiiviset komponenttipohjaiset front-end-kehykset (esim. Bootstrap)
Saavutettavuus
- yleiset ohjeet
- standardit: WCAG, ARIA, a11y
- kehittäjän työkalut (esim. axes, pa11y ja a11y)

Responsiivinen suunnittelu

kohtuullinen käyttökokemus, vaikka..
- laitteen koko vaihtelee
- käyttäjä muuttaa ikkunan kokoa
tavoite on
- ei näkymätöntä sisältöä
- ei sotkeutuneita käyttöliittymiä
- käytettävyys kosketusnäytöillä

Responsiiviset (fluid) yksiköt

Näkymäportin meta-tagi & näkymäportin yksiköt

Näkymäportin meta-tagi

välttämätön responsiiviselle web-suunnittelulle
hallitsee näkymäportin kokoa ja skaalausta eri laitteilla
sijoitetaan <head>-elementin sisään
avainattribuutit:
- width=device-width: asettaa näkymäportin leveyden laitteen leveydeksi.
- initial-scale=1.0: asettaa alkuperäisen zoomaustason.
- maximum-scale=1.0, minimum-scale=1.0, user-scalable=no (harvinaisempi): hallitsee zoomausta ja skaalausta.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Näkymäportin yksiköt

Suhteelliset yksiköt, jotka perustuvat näkymäportin mittoihin.
Mahdollistavat elementtien responsiivisen koon.
Yleiset yksiköt:
- vw: 1% näkymäportin leveydestä.
- vh: 1% näkymäportin korkeudesta.
- vmin tai vi: 1% näkymäportin pienemmästä ulottuvuudesta (leveys tai korkeus).
- vmax tai vb: 1% näkymäportin suuremmasta ulottuvuudesta.

.element { width: 50vw; height: 30vh; }

Miksi? Luo responsiivisia asetteluja, jotka mukautuvat saumattomasti eri näytön kokoihin ja suuntiin.

Responsiiviset, fluid-funktiot kokojen asettamiseen

`min(val1, val2)`	Pienempi arvoista
`max(val1, val2)`	Suurempi arvoista, esim. osat
`minmax(min, max)`	Sopiva arvo minin ja maxin välillä
`clamp(min, val, max)`	Keskimmäinen arvo on voimassa, kunnes rajat saavutetaan

Näitä funktioita voidaan käyttää leveyden lisäksi myös fonttikokoihin, ruudukkoasetteluihin ja muihin.

Esimerkki: Fonttikoon skaalaaminen responsiivisesti

body {
                    font-size: clamp(1rem, 2.5vw, 2rem);
                }

Tämä varmistaa, että teksti on vähintään 1rem, skaalautuu näkymäportin leveyden mukaan (2.5vw), mutta ei ylitä 2rem.

Osa (fraction) yksikkönä

fr on lyhenne sanasta fraction (osa)
sarakkeen leveys suhteena, eli osana:
käyttää käytettävissä olevaa tilaa, ottaa myös raot huomioon flexissä ja gridissä

grid-template-columns: 1fr 1fr 1fr 1fr 3fr;

\frac{1fr}{(1+1+1+1+3)fr} = \frac{1}{7} //1fr on yksi seitsemäs rivistä

Harjoitellaan sarakkeiden asettamista,
- kuten osia ja yhdistelmää absoluuttisten arvojen kanssa, esim.

grid-template-columns: 250px 100px 100px 3fr 1fr;

x y z å ä ö

1. repeat()

Sarakkeiden leveydet voidaan määritellä seuraavasti:

grid-template-columns: 1fr 1f 1fr 250px;

1fr tautologia voidaan poistaa seuraavasti:
```
repeat(3, 1fr)
```

Kertoja

Ensimmäinen parametri on kertoja, tässä kontekstissa sarakkeiden lukumäärä

Koko

Toinen parametri kertoo kunkin sarakkeen koon

.. yhteensä:

grid-template-columns: repeat(3, 1fr) 250px;

2. toisto: koko minmax()-funktion avulla

koko voidaan tehdä vieläkin joustavammaksi
minmax() määrittelee alueen
- voi olla sekoitus absoluuttisia ja murtoarvoja, esim.
  - minmax(100px, 1fr)
Yhteenvetona:

grid-template-columns: repeat(3, minmax(100px, 1fr)) 250px;

Auto-fill ja Auto-fit CSS Gridissä

Kun tilaa ei ole riittävästi, ruudukon kohteet alkavat ylivuotaa.
- Äärimmäisissä tapauksissa ruudukon kohteet voivat tulla täysin piilotetuiksi.
Todella responsiivisen ruudukon luomiseksi raidan koon on sopeuduttava käytettävissä olevaan tilaan.
Auto-fill ja auto-fit mahdollistavat selaimen määrittää dynaamisesti ruudukon raitojen määrän.

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) 250px;

Huomautus:

auto-fill luo mahdollisimman monta raitaa, vaikka ne olisivat tyhjiä
auto-fit kutistaa tyhjät raidat

	Bootstrap	Tailwind CSS	Bulma	Materialize
Suunnittelutapa	Komponenttipohjainen	Hyötyluokka edellä	Flexbox-ruudukko	Material Design
Mukauttaminen	Keskitaso	Korkea	Keskitaso	Matala
JS-ominaisuudet	Kyllä	Ei	Ei	Kyllä
Käyttötapaus	Yleiskäyttö, nopea prototyyppaus	Mukautettu käyttöliittymä, suuret projektit	Kevyet sivustot	Google Material UI
Arvioitu suosio	Erittäin korkea	Erittäin korkea	Keskitaso-korkea	Matala-keskitaso

Katkaisupiste	Vähimmäisleveys
xs (erittäin pieni)	Ei mitään (Oletus)
sm (pieni)	576px
md (keskikokoinen)	768px
lg (suuri)	992px
xl (erittäin suuri)	1200px
xxl (erittäin erittäin suuri)	1400px

Luokka	Vaikutus
`d-none`	Piilottaa elementin (`display: none;`)
`d-block`	Tekee elementistä lohkon (`display: block;`)
`d-inline`	Tekee elementistä rivinsisäisen (`display: inline;`)

Luokka	XS (oletus)	SM (≥576px)	MD (≥768px)	LG (≥992px)
`d-sm-none`	✅ Näkyvissä	❌ Piilotettu	❌ Piilotettu	❌ Piilotettu
`d-md-block`	❌ Piilotettu	❌ Piilotettu	✅ Lohko	✅ Lohko

Luokka	Vaikutus
`d-flex`	Mahdollistaa Flexboxin (`display: flex;`)
`d-inline-flex`	Mahdollistaa rivinsisäisen flexboxin (`display: inline-flex;`)

Luento 7 Responsiivinen suunnittelu suhteelliset (fluid) CSS-yksiköt ja funktiot: näkymäportti, näkymäportin yksiköt % tai fr flexissä/gridissä min, max, minmax, clamp flex ja grid flex: grow, shrink, wrap grid: auto-fit/-fill sisäsyntyinen suunnittelu media queryt responsiiviset komponenttipohjaiset front-end-kehykset (esim. Bootstrap) Saavutettavuus yleiset ohjeet standardit: WCAG, ARIA, a11y kehittäjän työkalut (esim. axes, pa11y ja a11y)

`em`	Suhteessa yläelementin fonttikokoon
`rem`	Suhteessa juurielementin (`html`) fonttikokoon
`%`	Suhteessa yläkontin kokoon
`vw`, `vh`	Näkymäportin leveys / korkeus prosentteina (1vw = 1% näytön leveydestä)
`fr`	Osa käytettävissä olevasta tilasta ruudukkoasettelussa

Pieni puhelin	< 600px
Puhelin	600px - 767px
Tabletti	768px - 991px
Pöytäkone	992px - 1199px
Leveä pöytäkone	>= 1200px