Boxmodel

Boxmodel

De manier waarop elementen op het web opgebouwd zijn

• Content: De inhoud, zoals tekst of image
• Padding: Ruimte binnen het element
• Border: De rand (lijn) rondom het element
• Margin: De ruimte tussen het element en andere elementen

RECAP

Padding in webflow

• Klikken en slepen op getal om padding aan te passen
• Option/alt + slepen voor tegenovergestelde kanten tegelijk
• Shift + slepen voor alle kanten tegelijk
• Op nummer klikken om getal of units aan te passen

Margin in webflow

• Op gelijke manier toevoegen als padding, zelfde shortcuts
• Ook negatieve margin mogelijk om element uit box te laten komen

Centreren met margin auto

• Als je een element horizontaal wil centreren: aan beide kanten margin op "auto" zetten.
• Kan enkel als element een fixed width heeft
• Webflow heeft knop met shortcut om te centreren

Units

Units on the web

• Pixels (px):  vaste grootte ongeacht scherm, absolute unit
• Percentage (%): Relatief aan de grootte van het parent-element
• em: Relatief aan de font-size van het parent-element.
• rem: Relatief aan de font-size van de root (html) (standaard 16px)
• viewport width (vw):  Relatief aan de breedte van de viewport
• viewport height (vh): Relatief aan de hoogte van de viewport

👎

😍

RECAP

Units in Webflow

• Units aanpassen via dropdown menu
• Tip: Units mee typen in input veld en op enter duwen

Oefening 1

• Maak het card element na
• Let op de juiste structuur, classes en units
• Uitgebreide uitleg op canvas

Display options

Layout menu in Webflow

• Block
• Flexbox
• Grid
• None
• Inline
• Inline-block
• Inline-flex
• Inline-grid

Display: block

• Block elementen stapelen zich bovenop elkaar
• Neemt default volledige breedte in en start op nieuwe regel
• Voorbeelden html: <div>, <p>, <h1>
• Je kan block elementen een eigen breedte geven maar blijft op eigen regel

RECAP

Display: inline

• Neemt alleen de nodige breedte in, géén nieuwe regel
• Voorbeelden html: <span>, <a>, <em>, <strong> 
• Kan je geen width of height geven
• Span toevoegen in webflow: selecteer tekst en kies voor "wrap with span", hierna eigen class toevoegen

RECAP

Display: inline-block

• Combineert het beste van inline en block
• Blijft op dezelfde regel met inline-elementen (zoals inline)
• Breedte en hoogte kunnen worden aangepast (zoals block)
• Margin & padding werken zonder dat element op nieuwe regel springt
• voorbeelden html: <img>, buttons

RECAP

block vs inline vs inline-block

RECAP

Display: none

• Het element wordt niet weergegeven in de pagina
• Neemt geen ruimte in beslag
•         icoontje in navigator

↓

"Display: none" op blauwe blok

RECAP

Flexbox

Flexbox

• Elementen flexibel positioneren horizontaal of verticaal
• Flexbox toevoegen op het parent element van de items (childeren) die je wil positioneren

RECAP

Flexbox

RECAP

justify-content

align-items

Flexbox toevoegen

• Flexbox toevoegen in layout menu
• Plaatsen op parent-element van items die je wil positioneren
• Direction kiezen: horizontaal (row), verticaal (column) of wrap

Uitlijning

• Via align-menu: visueel op vierkant of via x-as/y-as
• Zelfde opties als bij justify-content & align items
• Gap toevoegen voor spacing tussen items

Ps: Herkenbaar? Gelijkaardig aan interface van Figma!

Flex Childeren

• Extra opties als je een child-element selecteert
• Sizing, alignment en order
• ⚠ Kan enkel als je child een eigen, nieuwe combo class heeft, anders worden aanpassingen toegepast op alle items met dezelfde base class

Flexbox & auto margin

Probleem: button moet altijd aan de onderkant staan, ongeacht de lengte van de content in de card

💡 TIP

Flexbox & auto margin

Mogelijke oplossing: flexbox & space between?

→ button plakt wel onderaan, maar andere content niet meer uitgelijnd

💡 TIP

Flexbox & auto margin

Oplossing: button margin-top: auto; geven

→ button duwt andere content naar boven

💡 TIP

Flex Wrap

• Items springen op een nieuwe regel als ze niet meer op één lijn passen
• Handig voor responsieve layouts, zoals een rij met cards of tags
• Wrap Reverse: nieuwe rijen worden bovenaan toegevoegd i.p.v onderaan.

Flex elementen

• Bij elements vind je twee elementen waar al flexbox op is toegepast:
  V Flex en H Flex
• = lege div's met al enkele flexbox instellingen, zie je pas als je childeren toevoegt

Oefening 2

• Maak de navigatiebalk na met flexbox
• Let op de juiste structuur, classes en units
• Uitgebreide uitleg op canvas

Oefening 3

• Maak het startscherm van ChatGPT na met flexbox
• Let op de juiste structuur, classes en units
• Uitgebreide uitleg op canvas

Oefening 4

• Maak onderstaand voorbeeld na met flexbox
• Let op de juiste structuur, classes en units
• Uitgebreide uitleg op canvas

Grid

Grid

• Voor complexere layouts met verschillende rijen en kolommen
• Zien we voorlopig niet uitgebreid, een intro kan hier terugvinden

Excelleren

Responsive
Design

Responsiveness

• De website past zich automatisch aan aan verschillende schermformaten en apparaten, zoals desktops, tablets, smartphones
• Een goede gebruikerservaring op elk toestel

RECAP

Voorbeelden

RECAP

Voorbeelden

RECAP

Voorbeelden

RECAP

Responsive design in Webflow

• Eenvoudig en visueel aanpassingen maken per schermgrootte
• Breakpoints aanpassen in de top bar
• Verschillende schermgroottes uittesten in preview mode

Breakpoints

• Desktop (base): Van toepassing op alle schermen, tenzij dit wordt overschreven bij andere breakpoints.
• Tablet: Schermen van 991px breed en kleiner
• Mobile Landscape: Schermen van 767px breed en kleiner
• Mobile Portrait: Schermen van 478px breed en kleiner

Styles doorgeven

• Begin altijd met de opmaak van je base breakpoint (desktop)
• De styles van desktop worden naar kleinere breakpoints doorgegeven
• Styles kan je overschrijven op kleinere breakpoints, wordt ook weer doorgegeven naar kleinere schermen

h1 { font-size: 2rem }

h1 { font-size: 1.8rem }

Grotere breakpoints

• Standaard zijn er geen grotere breakpoints, kan je zelf toevoegen
• Styles worden van base breakpoint (desktop) naar boven doorgegeven

Oefening 5

• Start van de oefening met de sneaker-card en maak deze responsive
• Uitgebreide uitleg op canvas