Workshop: CSS Layout door Hidde de Vries
De tijd is voorbij dat we voor onze lay-outs gebruik moeten maken van tabellen, floats, display-inline-block of Bootstrap grids.
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
Voor deze workshop is nog geen (nieuwe) datum gepland. Mocht je geïnteresseerd zijn in de workshop, hou dan het activiteiten overzicht in de gaten of blijf op de hoogte via onze social media.
Deze workshop is in het verleden gegeven op de volgende data:
- 24 november 2017, bij Utrecht
- 1 december 2017, bij Utrecht
- 12 maart 2018, bij Utrecht
- 23 april 2018, bij Groningen
- CSS Layout, bij Bar Beton, Utrecht