Introduksjon til Material UI

Laget av Camilla Larsen

Agenda

• Introduksjon av design biblioteker
• Introduksjon av Material UI
• Oppstart med react og Material UI
• Oppgave
• Fordypning
• Oppgave
• Oppsummering

Design libraries

• Design libraries gir oss tilgang til ferdigbygde komponenter vi enkelt kan benytte
• Hjelper med å holde en rød tråd igjennom et prosjekt.
• Hele teamet kan benytte samme design og unngå forvirring
• Hjelper oss å kode enda raskere

Material UI

Material UI er en åpen og gratis React komponent bibliotek. 

https://mui.com/

Hvordan sette i gang med Material UI?

• Material UI sine sider, tilbyr veldig grundig og oversiktlig dokumentasjon på hvordan deres bibliotek fungerer og hvordan man setter i gang.

https://mui.com/material-ui/getting-started/installation/

Live tutorial på å sette i gang med Material UI

Dagens første oppgave

• Se litt rundt på Material UI sine sider, og finn en navigasjon, list og card som du skal benytte på siden din.
• Husk å opprett det som components som du kan gjenbruke. 

Material UI boxes

• MUI tilbyr gode løsninger for å kunne sette opp en responsiv løsning.
• Designet som mobil-først løsning.
  (min-width)

MUI Boxes og SX props

• Box komponenten fra MUI, laget en ny div tagg for oss som default verdi, men vi kan også skifte det til for eksempel til en span tagg.
• Fordelen ved bruk av box komponenten er at vi kan benytte xs props, som gjør det lettere med kjapp styling

MUI Boxes og SX

• Vi kan også legge på styling på responsive units inne i Box xs={{ }}
• Skal kun benyttes ved enkle situasjoner

MUI Typography

• Hjelper oss med å holde samme tekst styling gjennom hele prosjektet, samtidig som at vi kan følge SEO regler.
• Vi henviser først til hvilken variant (styling)
• Deretter til hvilken tagg som skal bli lest av (component)
• Finnes flere forskjellige varianter (se neste slide)

Dagens andre oppgave - MUI Icons

Les og følg dokumentasjonen, slik at dere kan benytte material UI icons

https://mui.com/material-ui/material-icons/

Dagens tredje oppgave

• Ved noe hjelp av slidene og det vi har gått igjennom nå, skal du sette opp en veldig enkel forside, som er responsiv på både mobil, ipad og desktop.
• Her må du i tillegg, gjerne undersøke grid løsningen til Material UI for å løse det.

Hvordan kan vi gjøre MUI enda mer nyttig for oss?

MUI theming

Vi kan tilpasse MUI theme koden til å passe vårt design, slik at hvert komponent vi bruker automatisk får riktig styling.

MUI theming - color palette

• Vi kan endre den originale farge paletten, men vi kan også legge til våre egne farger.

MUI theming - components

Vi kan også tilpasse komponentene, slik som vist under.

https://mui.com/material-ui/customization/theme-components/

Dagens siste oppgave

Oppsummering

• Hva er et design bibliotek?
• Hvordan sette i gang med MUI
• Hva må vi huske på når vi skal bruke komponenter fra MUI?
• Hva er MUI boxes og grid?
• Hvordan lage vårt eget design utseende gjennom MUI sine komponenter