CSS GRIDS

  • SITUERING

    Responsive layouts die op alle mogelijk toestellen een perfecte weergave mogelijk maken zijn niet altijd gemakkelijk te bekomen. Met CSS Grid-technologie wordt het mogelijk om zonder hacks elementen in 2-dimensies te positioneren op een webpagina. Frameworks als 960.gs, Twitter Bootstrap 4 of Foundation zijn mogelijk binnenkort achterhaald omwille van hun geavanceerde hacks die enorm veel HTML toevoegen ('div's) om geïsoleerde problemen aan te pakken. Het gevolg hiervan zijn onbegrijpelijk lange HTML-pagina’s die veel code toevoegen waardoor ook de ranking negatief beïnvloed wordt. Via CSS grid bekomt men kleine, snelle en correcte HTML-pagina’s, die beter scoren op het vlak van SEO. CSS grid is de toekomst van CSS.

  • DOELPUBLIEK

    Mensen met ervaring in HTML en CSS is gewenst, ervaring met termen als responsive design is ideaal.

  • DOELSTELLINGEN

    • De basistermen van CSS grid toepassen: Grid-container, Grid-items en het creëeren van columns en rows.
    • Experimenteren met fixed sizes zoals ‘em’, ‘pixel’, maar ook de nieuwere waarden zoals ‘minmax’ en de ‘fr’-unit.
    • Het maken van een grid in een grid in een moderne layout, waarbij we gebruik maken van zowel Flexbox als CSS Grid om een responsieve pagina te maken volgens hedendaagse technieken (vanaf 2018), met fall-back naar oudere browers.
    • Technieken en methoden om fall-back te voorzien door het gebruik van feature- query’s.

  • VOORKENNIS

    Basiservaring met HTML en CSS is gewenst.

  • OPLEIDINGSDUUR

    1 dag

  • PROGRAMMA-INHOUD

      • Introductie CSS grids
      • Het verschil tussen Flexbox en CSS Grid
      • Een grid layout en image grids
      • Grid Properties: grid-container, grid-template-columns, grid-template-rows, grid- rows, grid-lines, grid-cells, grid-tracks, grid-area’s en grid-gaps.
      • De fraction-unit en de repeat syntax
      • Het debuggen van uw grid met Firefox Quantum
      • Het aanmaken van een complete layout
      • Complexe layouts
      • Progressive enhancement
      • Polyfilss en fallback voor oudere browsers
      • Oefeningen
<< Terug naar opleidingoverzicht