Get a grid for flex' sake

A presentation concerning the new CSS layout: Grid and flexbox. Done with lots of live coding

Transcript

1. GET A GRID
   FOR FLEX’ SAKE
   

   View Slide

2. @ddprrt
   fettblog.eu
   

   View Slide

3. A CONFERENCE ABOUT JAVASCRIPT
   JANUARY 19, 2018
   LINZ, AUSTRIA
   scriptconf.org
   

   View Slide

4. A PODCAST ABOUT JAVASCRIPT
   soundcloud.com/scriptcast
   

   View Slide

5. C S S
   

   View Slide

6. C
   S
   S
   entering
   hit
   ometimes
   

   View Slide

7. LAYOUT
   

   View Slide

8. WE ALL FLOAT DOWN HERE
   

   View Slide

9. ENTER FLEXBOX (2009)
   

   View Slide

10. FLEXBOX IS AN
    ALGORITHM FOR
    SINGLE LINE SPACE DISTRIBUTION
    

    View Slide

11. DEMO TIME!
    

    View Slide

12. container
    items
    .container {
    display: flex;
    }
    activates flex box
    also available as inline-flex
    

    View Slide

13. CONTAINER PROPERTIES
    

    View Slide

14. A
    .container {
    flex-direction: row | row-reverse | column | column-reverse;
    }
    changes the direction of the
    main axis
    B C C B A A
    B
    C
    C
    B
    A
    

    View Slide

15. container
    .container {
    flex-wrap: nowrap | wrap | wrap-reverse;
    }
    flex-wrap allows items
    to flow into the next row
    if no space is available.
    The next row has the same
    spacing conditions as the
    original one, but starts
    anew with alignment
    

    View Slide

16. .container {
    justify-content: flex-start | flex-end | center | space-between
    | space-around;
    }
    justify-content aligns items
    along the main axis. This is
    where the main space
    distribution algorithm
    comes in.
    flex-start
    flex-end
    center
    space-between
    space-around
    

    View Slide

17. .container {
    align-items: stretch | flex-start | flex-end | centre | stretch | baseline;
    }
    align-items aligns elements across
    the cross axis
    flex-start flex-end
    center stretch
    A
    baseline
    B C
    

    View Slide

18. .container {
    align-content: stretch | flex-start | flex-end | center | stretch |
    space-between | space-around;
    }
    align-content takes care of spaces between multiple lines
    flex-start flex-end center
    space-between space-around stretch
    

    View Slide

19. ITEM PROPERTIES
    

    View Slide

20. -1 1 3
    items
    .item {
    order:
    }
    you can change the order
    of the items by using an
    integer
    

    View Slide

21. 1
    items
    .item {
    flex-grow:
    }
    flex-grow is the greedy operator. It tries
    to take as much space as is available.
    If the number is higher, the growth is
    n-times higher with each iteration cycle.
    1 1
    1 1
    2
    flex-shrink is humble. The higher the
    number, the more space it gives to
    greedy elements
    flex-basis is a width value where
    elements start to grow
    

    View Slide

22. items
    .item {
    align-self: …
    }
    Overrides the alignment set by
    align-items.
    align-self: flex-end
    A
    

    View Slide

23. DEFINE LAYOUTS AT THE
    PARENT LEVEL
    

    View Slide

24. CHILDREN CAN MAKE
    EXCEPTIONS
    

    View Slide

25. PARENTS DEFINE RULES
    CHILDREN REBEL
    

    View Slide

26. REAL CSS LAYOUT, BUT IN
    BREATH-TAKING 2D?
    

    View Slide

27. ENTER GRID (2012)
    

    View Slide

28. DEMO TIME!
    

    View Slide

29. TERMINOLOGY
    

    View Slide

30. grid consists of rows and columns.
    direct HTML descendants of a grid
    container are grid items.
    

    View Slide

31. grid lines make up the structure of the
    grid. There are row and column grid lines
    

    View Slide

32. A grid track is between two adjacent
    grid lines. They are like rows and columns
    of a table
    

    View Slide

33. A grid area is anything between two
    row grid lines and two column grid lines
    

    View Slide

34. MAJOR GRID CONTAINER
    PROPERTIES
    

    View Slide

35. display: grid Activates the grid
    grid-gap Defines the size of grid lines
    grid-template-rows
    grid-template-columns
    Defines the grid tracks, in size,
    optional names
    grid-template-areas Defines the names of grid areas
    grid-auto-flow
    Defines in which direction (row/
    column) new tracks should be
    added
    

    View Slide

36. MAJOR GRID ITEM PROPERTIES
    

    View Slide

37. grid-row-start
    grid-row-end
    Define the grid row to start and
    end
    grid-column-start
    grid-column-end
    Same for columns
    grid-area
    Or just place it in one of the
    named areas
    

    View Slide

38. AWESOME GRID FEATURES
    

    View Slide

39. repeat(…, ) Bored of typing? Use repeat
    1fr
    No more dealing with
    percentages… fraction units help
    splitting up the main area
    auto-fill
    Use in repeat-function, repeats the
    tracks as much as there is space!
    minmax(minvalue, maxvalue)
    Perfect usage with fraction units:
    Decide between a fixed value and
    the nearest relative value
    

    View Slide

40. View Slide

41. DEFINE TEMPLATES
    LET AUTO-LAYOUT DO THE REST
    

    View Slide

42. PARENTS DEFINE RULES
    CHILDREN REBEL
    

    View Slide

43. USE GRID FOR PAGE/AREA LAYOUTS
    FLEXBOX FOR WIDGETS
    

    View Slide

44. View Slide

45. @ddprrt
    fettblog.eu
    

    View Slide