Web Development Library: CSS Flexbox en Grid Layout

Web Development Library: CSS Flexbox en Grid Layout

Uitvoering
Boek, 212 pagina's
ISBN
9789059409217
Gepubliceerd
2017
€ 26,99

Handig om te weten: van dit boek is een webversie beschikbaar. Als u zich registreert, krijgt u gratis toegang, plus relevante extra’s.

Dit deel van de serie Web Development Library biedt een stevige basis voor het maken van lay-outs voor webapps en webpagina’s met de opmaaktaal CSS. Centraal staat het nieuwste dat CSS te bieden heeft: Flexible Box Layout en Grid Layout. Daarmee zijn lay-outs mogelijk die voorheen alleen met veel moeite en omwegen of met behulp van scripting waren te realiseren. Het bekendste voorbeeld daarvan is the holy grail layout. De auteur gaat uitgebreid in op de fantastische mogelijkheden die dankzij goede ondersteuning door de belangrijkste browsers direct kunnen worden toegepast. Tot de behandelde onderwerpen behoren:

  • Flexcontainers en flexitems en hun instelmogelijkheden.
  • Uitlijnen en centreren in alle richtingen.
  • Elementen weergeven in een andere volgorde dan in de HTML.
  • Flexibiliteit met flex-grow, flex-shrink en flex-basis.
  • Kennismaken met CSS Grid Layout.
  • De principes achter rastercontainers en rasteritems.
  • Een raster maken: volledig gedefinieerd of automatisch.

Meer informatie vindt u op www.webdevelopmentlibrary.nl.

Downloadbare bestanden Website: www.webdevelopmentlibrary.nl

Wis filter
  • Peter Doolaard

    Peter Doolaard is eindredacteur en vormgever bij Van Duuren Media B.V. Hij redigeerde talloze boeken over aan computers gerelateerde onderwerpen en vertoont een bijna ongezonde belangstelling voor alles wat er op dit gebied valt te beleven. Peter Doolaard...
    Doolaard D

Web Development Library: CSS Flexbox en Grid Layout

1
Introductie
Inleiding
Wat flexbox is
Wat flexbox kan
Wat flexbox oplost
Hello flexbox
Benodigde voorkennis
Samenvatting
Praktijkoefeningen
2
De basis van flexbox
Flexcontainers en flexitems
Ouders en kinderen
Rijen en kolommen: flex-direction
Regelomloop: flex-wrap
De verzameleigenschap flex-flow
De volgorde veranderen: order
Samenvatting
Praktijkoefeningen
3
Flexitems verdelen
Automatische marges
Flexeigenschappen voor uitlijnen
Uitlijnen in de hoofdrichting
Uitlijnen in de kruisrichting
De producten uitlijnen
Use cases uitlijnen
Samenvatting
Opdrachten
4
Een flexibel formaat
Groeien en krimpen met flex
Aanbevolen instelling: flex
Het basisformaat: flex-basis
Flex-grow en flex-shrink
Conclusie
Samenvatting
Praktijkoefeningen
5
Voorbeelden van flexbox
Website nos.nl
Venster voor instellingen
Kop en onderkop naast of onder elkaar
Items in een regel splitsen
Split screen
Split screen met footer
Hovereffect met flex
Show case: dobbelstenen
Samenvatting
6
Een opmaakraster maken met Grid Layout
Introductie
Kenmerken van gridlay-out
CSS-eigenschappen voor gridlay-out
Workflow in vogelvlucht
Een raster maken
Expliciet en impliciet raster
Kort: grid-template
Nog korter: grid
Samenvatting
Praktijkopdrachten
7
Items in het raster plaatsen
Plaatsingsmethoden
Plaatsen in benoemd vlak
Automatisch plaatsen
Uitlijnen
Samenvatting
Praktijkopdrachten
8
Voorbeelden van grid-layout
Website nos.nl
Instellingenvenster
Homepage
Conclusie
Index