Successfully reported this slideshow.

Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)

4,371 views

Published on

Flexbox and responsive web design go great together, like peanut butter and jelly! Flexbox gives you more control over the things you care about in a responsive layout and lets you create much morecomplex and reliable layouts than you can with floats, table display, or inline-block. All with far less CSS.

In this talk, you’ll learn what flexbox features are particularly suited to responsive layouts and how you can harness them by applying flexbox as a progressive enhancement. We’ll look at examples of responsive page components and patterns that you can enhance further by layering flexbox on top of other layout methods, ensuring all users get a good experience.

Published in: Technology

Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)

  1. 1. Flexbox Zoe Mickley Gillenwater @zomigiCSS Conf EU September 2015 Enhancing WITH Responsiveness
  2. 2. I work for
  3. 3. 802,000+ properties 42 languages 54 currencies
  4. 4. Content extremes on Booking.com Shortest property name: 2 characters Longest property name: 109 characters
  5. 5. How big do I make this thing?
  6. 6. % em/rem vw/vh
  7. 7. Relative units of measurement are your best guess at the ideal, but they’re still a guess.
  8. 8. Flexbox gets us closer to the ideal, because it lets us design without units.
  9. 9. Example: a responsive form from http://jobs.theguardian.com/
  10. 10. My copy of that form Same floats, same percentage widths
  11. 11. The trouble with explicit sizing Since the select and button are sized by a percentage, not sized automatically by their content, this can happen: Box too small for its content Box too big for its content
  12. 12. Use the flex property instead Tells browser starting size (including content size) and whether item can grow or shrink width: 33.333% flex: auto Fill up remaining space width: 16.666% flex: none Size to content exactly
  13. 13. Form fields are a pain in the butt The fields and button don’t all match each other exactly in height
  14. 14. Fix alignment with flexbox Turn each field wrapper into flex container so field inside will stretch to match height of its line: .flexbox .jobs-form_field-wrapper { display: flex; align-items: stretch; /* default */ width: auto; } Fields misaligned without flexbox Fields match height due to align-items
  15. 15. Smarter sizing Non-flexbox Flexbox enhanced
  16. 16. Content-driven breakpoints aren’t perfect.
  17. 17. Automatic breakpoint with flexbox Booking’s responsive customer service form doesn’t use any media queries http://www.booking.com/content/cs.html
  18. 18. All of the CSS for those 2 layouts form.cs-message { display: flex; flex-flow: row wrap; margin-right: -10px; } input.cs-message__text { flex: 1 0 40%; width: 43%; /* fallback */ float: left; /* fallback */ margin-right: 10px; padding: 8px 10px; } 1 property creates 2 responsive layouts, both always full width
  19. 19. Layout change without media query 1.  Let the fields wrap when needed: form.cs-message { display: flex; flex-direction: row; flex-wrap: wrap; margin-right: -10px; } /* default */
  20. 20. Layout change without media query 2.  Size the fields to control their wrapping point: input.cs-message__text { flex: 1 0 40%; width: 43%; /* fallback */ float: left; /* fallback */ margin-right: 10px; padding: 8px 10px; }
  21. 21. Defining the flex property Makes flex items change their main size (width or height) to fit available space
  22. 22. Defining the flex property flex-grow how much flex item will grow relative to other items if extra space is available (proportion of extra space that it gets) flex-shrink how much item will shrink relative to others if there is not enough space (proportion of overflow that gets shaved off) flex-basis the initial starting size before free space is distributed (any standard width/height value, including auto)
  23. 23. Breaking down the flex property input.cs-message__text { flex: 1 0 40%; width: 43%; float: left; margin-right: 10px; padding: 8px 10px; } flex-basis = 40% start field at 40% wide flex-shrink = 0 don’t shrink smaller than starting width flex-grow = 1 give it 1 share of any extra width on its line
  24. 24. In other words… input.cs-message__text { flex: 1 0 40%; width: 43%; float: left; margin-right: 10px; padding: 8px 10px; } Not enough space for 2 40% wide items plus their pixel margin and padding, so only 1 allowed per line, which then stretches wider than 40% to fill its line Enough space for 2 per line, which both stretch equally as needed to fill
  25. 25. Taking advantage of variable space Task: add a message about low availability of the room price shown: “We have only X left on our site!” How about right here in this lovely big gap?
  26. 26. Taking advantage of variable space Problem: the gap is not always big enough to hold a sentence of text
  27. 27. Taking advantage of variable space Solution: use flexbox to place text beside price when space allows; otherwise, it can wrap below price
  28. 28. Taking advantage of variable space Non-flexbox Flexbox enhanced
  29. 29. Improved wrapping Non-flexbox Flexbox enhanced
  30. 30. Flexbox with float fallback .iw_mini_details_wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; } .iw_mini_review_score_wrapper { float: left; } .iw_mini_price_wrapper { float: right; } Flexbox properties on container override floating automatically in supporting browsers Floating gets used by old browsers
  31. 31. Improved wrapping in RWD layout 34 flex: 1 1 auto align-content: space-between
  32. 32. Improved wrapping in RWD layout With float or text-align With flex or justify-content
  33. 33. Flexbox is great for aligning stuff, especially shifting content in RWD.
  34. 34. Demo: full-width nav bar ¨  All links on same line ¨  First link flush left, last link flush right ¨  Equal spaces between all links
  35. 35. Trying display:table-cell J All links on same line J First link flush left, last link flush right L Equal spaces between all links
  36. 36. Spacing with table-layout:fixed
  37. 37. Starter centered nav bar Without flexbox: .list-nav { margin: 0; padding: 0; list-style: none; text-align: center; } .list-nav li { display: inline-block; padding: 0 .5em; text-align: center; } .list-nav li:first-child { padding-left: 0; } .list-nav li:last-child { padding-right: 0; }
  38. 38. Enhanced to be full-width .list-nav { display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; text-align: center; /* fallback */ } .list-nav li { display: inline-block; /* fallback */ padding: 0 .5em; /* fallback */ text-align: center; } .list-nav li:first-child { padding-left: 0; } .list-nav li:last-child { padding-right: 0; }
  39. 39. Combine with inline-block Non-flexbox fallback version Flexbox version
  40. 40. Improve the wide layout Wide: too stretched out A more responsive enhancement
  41. 41. Wide variation: two-piece main nav 1.  Add media query for wide width: @media (min-width:860px) { } 2.  Add link to Modernizr: <script src="js/modernizr.js"></script> <html class="flexbox"> Supporting browsers: <html class="no-flexbox"> Non-supporting browsers:
  42. 42. Add Modernizr as needed with flexbox Flexbox and fallback styles can often co- exist, but sometimes need to isolate them http://zomigi.com/blog/using-modernizr-with-flexbox/
  43. 43. Or use @supports .gallery-item { display: inline-block; } @supports (flex-wrap: wrap) { .gallery { display: flex; flex-wrap: wrap; } } https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
  44. 44. Wide variation: two-piece main nav 3.  Move nav bar up to overlap logo’s line: @media (min-width:860px) { .flexbox .list-nav { position: relative; top: -70px; } }
  45. 45. Wide variation: two-piece main nav 4.  Add margins to control extra space in line: .flexbox .link-party { margin-left: auto; } .flexbox .link-home { margin-right: 15px; } .flexbox .link-tumblr { margin-left: 15px; } (margin)
  46. 46. A more responsive nav bar
  47. 47. This works vertically too.
  48. 48. Demo: full-height stacked icons .wrapper .icons .content
  49. 49. Demo: full-height stacked icons 1.  Turn children .icons and .content into side-by-side, equal-height flex items .wrapper { display: flex; align-items: stretch; /* default */ }
  50. 50. Only children become flex items So these 2 children are the flex items This is the flex container These 3 grandchildren aren’t flex items (yet)
  51. 51. Demo: full-height stacked icons 2.  Turn .icons into flex container with vertically stacked children (the 3 icons): .icons { display: flex; flex-direction: column; /* main axis */ }
  52. 52. Demo: full-height stacked icons 3.  Equally space the 3 icons along the vertical main axis: .icons { display: flex; flex-direction: column; justify-content: space-between; }
  53. 53. Demo: full-height stacked icons
  54. 54. Fallback alignment options Top-aligned (float) Centered (table-cell)
  55. 55. These examples don’t look wrong or broken without flexbox. Flexbox just enhances their sizing and spacing to look better.
  56. 56. Flexbox can also enhance visual ordering.
  57. 57. Remember this? .flexbox .list-nav { position: relative; top: -70px; } .flexbox .link-party { margin-left: auto; } .flexbox .link-home { margin-right: 15px; } .flexbox .link-tumblr { margin-left: 15px; } Nav overlaps logo’s line, so link text could overlap logo if viewport too narrow or text too big
  58. 58. order integer to specify flow order of flex items 0 0 0 default source order 0 0 1 0 0 re-ordered 0 0 0 0 -1 re-ordered 0 0 2 1 0 re-ordered 1 0
  59. 59. Use order property to move logo 1.  Divide nav bar into order groups: .link-home, .link-builder { order: 0; /* default, and first here */ } .logo { order: 1; /* second */ } .link-party, .link-tumblr { order: 2; /* last */ } (margin)
  60. 60. Use order property to move logo 2.  Split extra space on line to center logo: .logo { margin-left: auto; } .link-party { margin-left: auto; }
  61. 61. Order only works on siblings To move logo to middle of list, it needs to be part of list <div class="logo"><img src="images/logo.png"></div> <ul class="list-nav"> <li class="logo"><img src="images/logo.png"></li> <li class="link-home"><a>home</a></li> <li class="link-builder"><a>s'mores builder</a></li> <li class="link-party"><a>throw a party</a></li> <li class="link-tumblr"><a>tumblr</a></li> </ul>
  62. 62. Reorder for good, not evil.
  63. 63. Demo: moving a photo on mobile
  64. 64. Demo: moving a photo on mobile Desktop: HTML order (no flexbox)Mobile: reordered
  65. 65. Use flexbox order in mobile styles .recipe { display: flex; flex-direction: column; } .recipe figure { order: -1; /* before all items with default order: 0 */ } .recipe figure img { width: 100%; } Inspired by Jonathan Cutrell’s example at http://webdesign.tutsplus.com/ tutorials/tricks-with-flexbox-for-better-css-patterns--cms-19449
  66. 66. Turn off flexbox in desktop styles @media screen and (min-width:800px) { .recipe { display: block; /* turn off flexbox */ } .recipe figure { float: right; width: 55%; } }
  67. 67. Demo: moving a photo on mobile Flexbox enhanced Non-flexbox
  68. 68. Reordering on The Guardian 12 3 4 56 flex-direction: row-reverse flex-direction: row-reverse 1 2 3 4 5 6
  69. 69. Flexbox requires a mental shift in how you think about and approach layout.
  70. 70. RWD is not binary. Responsiveness is a continuum. Flexbox can help make your site more responsive.
  71. 71. Flexbox is not all nothing or
  72. 72. Thanks! Zoe Mickley Gillenwater @zomigi design@zomigi.com zomigi.com | stunningcss3.com | flexiblewebbook.com Photo credits: “Currywurst mit Pommes” by Jessica Spengler and “lecker war’s” by Mike Herbst on Flickr.

×