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
2. @ddprrt fettblog.eu
3. A CONFERENCE ABOUT JAVASCRIPT JANUARY 19, 2018 LINZ, AUSTRIA scriptconf.org
4. A PODCAST ABOUT JAVASCRIPT soundcloud.com/scriptcast
5. C S S
6. C S S entering hit ometimes
7. LAYOUT
8. WE ALL FLOAT DOWN HERE
9. ENTER FLEXBOX (2009)
10. FLEXBOX IS AN ALGORITHM FOR SINGLE LINE SPACE DISTRIBUTION
11. DEMO TIME!
12. container items .container { display: flex; } activates flex box also available as inline-flex
13. CONTAINER PROPERTIES
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
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
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
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
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
19. ITEM PROPERTIES
20. -1 1 3 items .item { order: <integer> } you can change the order of the items by using an integer
21. 1 items .item { flex-grow: <integer> } 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
22. items .item { align-self: … } Overrides the alignment set by align-items. align-self: flex-end A
23. DEFINE LAYOUTS AT THE PARENT LEVEL
24. CHILDREN CAN MAKE EXCEPTIONS
25. PARENTS DEFINE RULES CHILDREN REBEL
26. REAL CSS LAYOUT, BUT IN BREATH-TAKING 2D?
27. ENTER GRID (2012)
28. DEMO TIME!
29. TERMINOLOGY
30. grid consists of rows and columns. direct HTML descendants of a grid container are grid items.
31. grid lines make up the structure of the grid. There are row and column grid lines
32. A grid track is between two adjacent grid lines. They are like rows and columns of a table
33. A grid area is anything between two row grid lines and two column grid lines
34. MAJOR GRID CONTAINER PROPERTIES
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
36. MAJOR GRID ITEM PROPERTIES
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
38. AWESOME GRID FEATURES
39. repeat(…, <tracks>) 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
41. DEFINE TEMPLATES LET AUTO-LAYOUT DO THE REST
42. PARENTS DEFINE RULES CHILDREN REBEL
43. USE GRID FOR PAGE/AREA LAYOUTS FLEXBOX FOR WIDGETS
45. @ddprrt fettblog.eu