Fronteers — vakvereniging voor front-end developers

Workshop: CSS Layout door Hidde de Vries

De tijd van tabellen voor layout is voorbij. De val van floats voor uitlijning, de dood van display: inline-block voor kolommen, en het bankroet van Bootstrap grids: ze zijn nu echt in zicht.

De makers van CSS hebben namelijk de laatste jaren hard gewerkt aan twee nieuwe mogelijkheden voor het uitlijnen van je content: flexbox en grid layout.
Inmiddels zitten deze features in bijna alle browsers. De ondersteuning is zo goed dat ze op echte websites kunnen worden toegepast. Tijd om te leren hoe ze werken!

Met flexbox en grid layout zijn er een aantal nieuwe dingen toegevoegd aan CSS die je het leven een stuk makkelijker kunnen maken. Verticaal uitlijnen, vlakken met verschillende content even hoog maken en layouts creëeren met minder markup in plaats van meer! In deze workshop gaan we in op een aantal van die nieuwe concepten.

Van het definiëren van rijen en kolommen tot het automatisch plaatsen van content op een grid: na deze dag ben je weer helemaal up to date.

Voorkennis

Voor deze workshop is enige voorkennis van CSS en HTML handig. Van flexbox en grids hoef je uiteraard nog niets te weten: we beginnen vanaf het begin.

Programma

In de morgen zullen we ons vooral richten op theorie. Zowel de achtergrond en het waarom als praktische codevoorbeelden komen aan bod. Denk bijvoorbeeld aan:

  • waarom nieuwe CSS properties voor layout?
  • flexbox: horizontaal of verticaal uitlijnen met flex direction
  • flexbox: flexibiliteit met ‘shrink’ en ‘grow’
  • flexbox: blokken verspreiden binnen een container
  • grid: tracks, lines, cellen en named areas
  • grid: content automatisch plaatsen
  • nieuwe units
  • weergavevolgorde bepalen in CSS
  • richtingsonafhankelijke properties
  • kunnen we het Bootstrap grid namaken met minder divs?
  • wanneer flexbox en wanneer grid?

Met enkele oefeningen tussendoor brengen we de stof gelijk in praktijk.

Na de lunch (die is inclusief) ga je aan de slag met complexere oefeningen, zodat je aan het einde van de dag zowel flexbox als grid moeiteloos kunt inzetten in eigen projecten.

Over de docent

Hidde de Vries (@hdv) is front-end ontwikkelaar. Op zijn blog schrijft hij over HTML, CSS en JavaScript. Als freelancer helpt hij overheden en bedrijven om snelle, schaalbare en toegankelijke front-end code te realiseren voor hun eindgebruikers.

Praktische info

Leden van Fronteers betalen 150 euro. Niet-leden betalen 250 euro. Beide bedragen zijn exclusief btw.

De workshop duurt de hele dag en is inclusief lunch.

Opgave

Datum Tijdstip Locatie Vrij
24 november 2017 09:00 inloop, 09:30 start, ±17:00 eind Utrecht 0