Download as PDF, PPTX
Uploaded byRachel Andrew
Confoo: The New CSS Layout
The document summarizes Rachel Andrew's presentation on modern CSS layout techniques including Flexbox and CSS Grid Layout. Some key points include: - Flexbox and CSS Grid Layout provide improved tools for page layout compared to older methods like floats. - These techniques separate logical structure from visual presentation, allow responsive design, and give more control over alignment. - Features like grid-auto-flow can automatically position items but authors must be careful not to compromise accessibility or semantics. - Flexbox is well-suited for one-dimensional layouts while Grid excels at two-dimensional layouts like pages with columns.
Confoo: The New CSS Layout
- 1. The New CSS Layout. RachelAndrew, Confoo Vancouver 2016
- 2. Rachel Andrew rachelandrew.co.uk @rachelandrew CSS WorkingGroup Invited Expert Google Developer Expert for Web Technologies Co-founder Perch CMS: https://grabaperch.com Contact: me@rachelandrew.co.uk
- 3. Modern CSS Layout? •Floats • Inline-block • display: table • Absolute & Relative positioning • Frameworks … lots of frameworks
- 4. Our great hopesfor layout • Flexbox https://drafts.csswg.org/css-flexbox/ • CSS Grid Layout https://drafts.csswg.org/css-grid/ • Box Alignment https://drafts.csswg.org/css-align/
- 5. The new CSSfor Layout
- 6. Items in ourlayouts understand themselves as part of a complete layout.
- 7.
- 8.
- 9. Flexbox Full height columnswith flexbox, taking advantage of default alignment values. .wrapper { display: flex; } .sidebar { flex: 1 1 30%; } .content { flex: 1 1 70%; }
- 10. Grid Layout Full heightcolumns in CSS Grid Layout. .wrapper { display: grid; grid-template-columns: 30% 70%; } .sidebar { grid-column: 1; } .content { grid-column: 2; }
- 11. Separation of sourceand display
- 12. Flexbox The flex-direction property cantake a value of row to display things as a row or column to display them as a column. nav ul{ display: flex; justify-content: space-between; flex-direction: row; }
- 13. Flexbox The visual ordercan be switched using row- reverse or column-reverse. nav ul{ display: flex; justify-content: space-between; flex-direction: row-reverse; }
- 14. Flexbox Adding display: flexto our container element causes the items to display flexibly in a row. .wrapper { display: flex; }
- 15. Flexbox The order propertymeans we can change the order of flex items using CSS. This does not change their source order. li:nth-child(1) { order: 3; } li:nth-child(2) { order: 1; } li:nth-child(3) { order: 4; } li:nth-child(4) { order: 2; }
- 16. Grid Layout I havecreated a grid on my wrapper element. The grid has 3 equal width columns. Rows will be created as required as we position items into them. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; }
- 17. Grid Layout I ampositioning my elements using CSS Grid Layout line-based positioning. Setting a column and a row line using the grid- column and grid-row properties. li:nth-child(1) { grid-column: 3 ; grid-row: 2 ; } li:nth-child(2) { grid-column: 1 ; grid-row: 2 ; } li:nth-child(3) { grid-column: 1 ; grid-row: 1 ; } li:nth-child(4) { grid-column: 2 ; grid-row: 1 ; }
- 19. CSS Grid automaticplacement http://www.w3.org/TR/2015/WD-css-grid-1-20150917/#grid-auto- flow-property https://rachelandrew.co.uk/archives/2015/04/14/grid-layout- automatic-placement-and-packing-modes/
- 21. Grid Layout When usingautomatic placement we can create rules for items in our document - for example displaying portrait and landscape images differently. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; } .landscape { grid-column-end: span 2; }
- 22. grid-auto-flow The default valueof grid-auto-flow is sparse. Grid will move forward planning items skipping cells if items do not fit .
- 23. Grid Layout With adense packing mode grid will move items out of source order to backfill spaces. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; grid-auto-flow: dense; } .landscape { grid-column-end: span 2; }
- 24. grid-auto-flow With grid-auto-flow denseitems are displayed out of source order. Grid backfills any suitable gaps.
- 25. With great powercomes responsibility.
- 26. Power and responsibility •Good = creating the most accessible source order and using Grid or Flexbox to get the optimal display for each device. • Bad = using Grid or Flexbox as an excuse to forget about the source. • Terrible - stripping out semantic elements to make everything a grid or flex item.
- 27. https://drafts.csswg.org/css-flexbox/#order-accessibility Authors must useorder only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming.
- 28. Léonie Watson |On CSS accessibility and drinking tea | CSS Day 2016 https://vimeo.com/180566024
- 29.
- 30. CSS Box AlignmentModule Level 3 “This module contains the features of CSS relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout.” - https://drafts.csswg.org/css-align/
- 31. It’s 2016. Wecan now centre things.
- 32.
- 33. Flexbox The justify-content property isset to space- between. The items at each end are placed against the container and the remaining space distributed evenly. nav ul{ display: flex; justify-content: space-between; flex-direction: row; }
- 34. Grid If there isspace in the grid container after all column and row tracks have been added. Use space-around and space-between to space the tracks. .wrapper { width: 500px; height: 400px; display: grid; grid-gap: 10px; grid-template-columns: repeat(4, 80px); grid-template-rows: repeat(3,100px); align-content: space-around; justify-content: space-between; }
- 35. I can createthis same layout with flexbox or Grid. With flexbox the items are laid out in a row. .wrapper { display: flex; } .wrapper li { flex: 1 0 25%; }
- 36. The first itemis at the default stretch and as the tallest item is dictating the height of the flex container. The second is entered in the container. The third aligned to the start. The fourth aligned to the end. .wrapper li:nth-child(2) { align-self: center; } .wrapper li:nth-child(3) { align-self: flex-start; } .wrapper li:nth-child(4) { align-self: flex-end; }
- 37. For Grid Iuse a single row, 4 column Grid. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
- 38. Grid alignment properties forthe three landscape images. .wrapper li:nth-child(2) { align-self: center; } .wrapper li:nth-child(3) { align-self: start; } .wrapper li:nth-child(4) { align-self: end; }
- 39.
- 40. Ethan Marcotte, FluidGrids “… every aspect of the grid—and the elements laid upon it—can be expressed as a proportion relative to its container.”
- 41. target ÷ context= result h1 { margin-left: 14.575%; /* 144px / 988px = 0.14575 */ width: 70.85%; /* 700px / 988px = 0.7085 */ }
- 42. Flexbox The most simpleflexbox example demonstrates the inherent flexibility. The items will be displayed as a row, with equal space between each item. nav ul{ display: flex; justify-content: space-between; }
- 43. The flex property •flex-grow - add space • flex-shrink - remove space • flex-basis - the initial size before any growing or shrinking
- 44. Flexbox flex: 1 1300px; flex-grow: 1 flex-shrink: 1; flex-basis: 300px; The initial width of our li is 300 pixels, however it can grow larger and shrink smaller than 300 pixels. .wrapper { display: flex; } .wrapper li { flex: 1 1 300px; min-width: 1px; }
- 46. Flexbox flex: 1 1300px; flex-grow: 1 flex-shrink: 1; flex-basis: 300px; If we allow the flex items to wrap we can see how flex-basis works by dragging the window smaller. .wrapper { display: flex; flex-flow: row wrap; justify-content: space-around; } .wrapper li { flex: 1 1 300px; min-width: 1px; }
- 48. Flexbox flex: 1 1300px; flex-grow: 1; flex-shrink: 1; flex-basis: 300px; The 3rd item has flex: 0 1 300px; so cannot grow. .wrapper { display: flex; } .wrapper li { flex: 1 1 300px; min-width: 1px; } .wrapper li:nth-child(3) { flex: 0 1 300px; }
- 50. Flexbox If we setthe 3rd item to flex-grow: 2 This item will be assigned twice of much of the available free space after we have reached the 300 pixel initial width. .wrapper { display: flex; } .wrapper li { flex: 1 1 300px; min-width: 1px; } .wrapper li:nth-child(3) { flex: 2 1 300px; }
- 52.
- 53. The CSS GridLayout fr unit
- 54. Grid Layout I amcreating three grid column tracks, all 1fr in width. This gives me three equally sized column tracks. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; }
- 55. Grid Layout If Icreate the first column as 600 pixels and then have two 1fr columns the 600 pixel track is removed from the available space and the remainder is distributed equally between the two columns. .wrapper { display: grid; grid-template-columns: 600px 1fr 1fr; }
- 56. Grid Layout With a600 pixel column, a 1fr and a 3fr column. The 600 pixels is removed from the available space then the remaining space is divided by 4. The 1fr column gets 25% and the 3fr column 75%. .wrapper { display: grid; grid-template-columns: 600px 1fr 3fr; }
- 58. Flexbox for 1dimensional layout. CSS Grid is for 2 dimensional layout.
- 60. The value ofthe grid- template-columns property says: repeat this track listing, auto-filing as many columns with a minimum width of 300 pixels and a maximum of 1fr. .wrapper { display: grid; grid-template-columns: repeat(auto- fill, minmax(300px, 1fr)); }
- 62. Bringing it alltogether
- 66. Using the minmax() functionwith grid-auto- rows. .home-hero { display: grid; grid-gap: 1px; grid-auto-rows: minmax(150px, auto); }
- 67. An item onthe grid can become a grid or flex container itself. In this case I am using flexbox and auto margins to push my content to the bottom of the box. .special { display: flex; flex-direction: column; } .special h3{ margin-top: auto; }
- 69.
- 70.
- 71.
- 72.
- 73.
- 74. Feature Queries -your new best friend
- 75. Feature Queries Test forsupport of property: value pairs. @supports (display: grid) { .has-grid { /* CSS for grid browsers here */ } }
- 76. Using Feature Queries •Write CSS for browsers without support • Override those properties inside the feature queries • See https://hacks.mozilla.org/2016/08/using-feature-queries-in- css/
- 77. Grid tips forFeature Queries • Floated items that become grid or flex items lose their float behaviour • vertical-align has no effect on a grid item • Items set to display: inline-block or block become grid items • Your overrides mostly change widths, margins and padding. • If grid tracks or flex-basis seem to be using a size you didn’t expect, check your item widths!
- 78.
- 79.
- 80. Anything new inCSS you can use feature queries to detect support.
- 81. Thank you Slides &Resources: https://rachelandrew.co.uk/speaking/event/confoo-vancouver-2016 http://csslayout.news - sign up for my weekly CSS Layout email — @rachelandrew | me@rachelandrew.co.uk — https://rachelandrew.co.uk | https://grabaperch.com