Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Layouts in the world of mobile devices aysha anggraini

Laying out content on the web is one of the many challenges of responsive web development. Positioning content and ensuring consistent behaviour on smaller to larger screen devices requires hacks and workarounds that can be frustrating to wrestle with and when employed wrongly, can make code harder to maintain. Fortunately, the rise of responsive web development has also increased the number of tools that we can use in order to make our workflow easier. The new CSS Grid specification is one of such examples that gives us the power to control grid structures through CSS instead of HTML making laying out content to be easier. In this talk, I will walk you through the future of laying out content on the web.

  • Login to see the comments

  • Be the first to like this

Layouts in the world of mobile devices aysha anggraini

  1. 1. Layouts in the World of Mobile Devices Rakuten Tech Conference 2017 Aysha Anggraini Rakuten Viki
  2. 2. 2 Layouts of the Past ● Floats ● Inline-blocks ● Table display ● Absolute & relative positionings ● Javascript Previous Tools to Wrestle with Layouts
  3. 3. 3 How is it a problem? Previous tools are not meant to be used for layouts Layouts of the Past Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. A common use case for floats Name Age Cersei Lannister 35 Tables - often abused for equal height columns
  4. 4. 4 Working with hacks has consequences Previous Tools are Hacks Layouts of the Past ● Heavily reliant on the source order of HTML ■ Row wrappers to pull & push margins ■ No good way to order elements <div class="row"> <div class="col s12 l8"> <div class="about"></div> </div> <div class="col s12 l4"> <div class="episodes"></div> </div> </div> About Trailers Trailers About On mobile On Desktop
  5. 5. 5 ● Elements have no relationship with one another ■ Floats and equal height columns don’t work well ■ Items do not align as expected ● Complicated CSS and Markups Column 1 Column 2 Column 3 Column 4
  6. 6. 6 Flexbox Layout mode for working with elements arranged in one dimension. This works best for equal height columns & vertical centering of elements. It is not for working with page layouts.
  7. 7. 7 Laying out elements in a single dimensions — rows or columns Candidates for Flexbox Layouts of the Present
  8. 8. 8 Centering elements Candidates for Flexbox Layouts of the Present Column 1
  9. 9. 9 Ordering Elements Candidates for Flexbox Layouts of the Present Column 2 Column 4Column 3 Column 1 Can be done through order properties
  10. 10. 10 Flexbox is not enough
  11. 11. 11 CSS Grid Layout mode for working with elements arranged in two dimension. A true layout system for laying content on the web.
  12. 12. 12 Laying out elements in a two dimensions — rows and columns The Magic of CSS Grid Layouts of the Future ● Simpler to use ■ No more relying on markup’s source order ■ Maintainable code
  13. 13. 13 <div class="row"> <div class="col s12 l8"> <div class="about"></div> </div> <div class="col s12 l4"> <div class="episodes"></div> </div> </div> VS. <div class="wrapper"> <div class="about"></div> <div class="episodes"></div> </div> Floats CSS Grid
  14. 14. 14 <div class="wrapper"> <div class="about"></div> <div class="episodes"></div> </div> .wrapper { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; } .about { grid-column: 1 / 2; } HTML CSS
  15. 15. 15 Position items with grid-column and grid-row CSS Grid Layouts of the Future .wrapper { display: grid; grid-template-columns: 25% 25% 25% 25%; grid-gap: 10px; } Column 1 Column 4 Column 5 Column 6 Column 2 Column 3 Column 7
  16. 16. 16 Position items with grid-column and grid-row CSS Grid Layouts of the Future Column 1 Column 2 Column 3 Column 4 Column 5 Column 6 Column 7 .column-2 { grid-column: 2 / span 2; grid-row: 1 / span 2; } .column-4 { grid-row: 2 / span 2; } .column-7 { grid-column: 3 / span 2; }
  17. 17. 17 The FR Unit CSS Grid Layouts of the Future .wrapper { display: grid; grid-template-columns: 25% 25% 25% 25%; grid-gap: 10px; } Can be change to: 1fr 1fr 1fr 1fr or repeat(4, 1fr) Column 1 Column 4 Column 5 Column 6 Column 2 Column 3 Column 7
  18. 18. 18 The FR Unit CSS Grid Layouts of the Future 1/4 1/41/4 1/4 grid-template-columns: 1fr 1fr 1fr 1fr; 2/3 1/3 grid-template-columns: 2fr 1fr;
  19. 19. 19 The FR Unit CSS Grid Layouts of the Future .wrapper { display: grid; grid-template-columns: 25% 25% 25% 25%; grid-gap: 10px; }
  20. 20. 20
  21. 21. 21 The FR Unit CSS Grid Layouts of the Future .wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; } FR units can be mixed! 25% 25% 1fr 1fr or 500px repeat(2, 1fr)
  22. 22. 22 Get creative with grid-template-areas CSS Grid Layouts of the Future Hero small1 small2 small3 small4 small5 small6 small7 med1 grid-template-areas: "small1 small2 hero hero hero" "med1 med1 hero hero hero" "med1 med1 hero hero hero" "small3 small4 small5 small6 small7";
  23. 23. 23 Flexbox CSS Grid
  24. 24. 24 Hero small1 small2 small3 small4 small5 small6 small7 med1 Grid item can be displayed as a flex container
  25. 25. 25 Hero small1 small2 small3 small4 small5 small6 small7 med1 Grid item as flex Align content inside the items: .hero { align-items: flex-end }
  26. 26. 26 http://cssgridgarden.com/ CSS Grid Garden
  27. 27. 27 https://gridbyexample.com/ Grid by Example
  28. 28. 28 https://codepen.io/collection/nvggZM/ CSS Grid Experiments
  29. 29. 29
  30. 30. 30 @supports Also known as feature queries. Modernizr in CSS. Add stylesheet rules based on whether your browser supports one or more CSS feature.
  31. 31. 31 // fallback code for older browsers @supports (display: grid) { // code for newer browsers // with overrides of the code above }
  32. 32. 32 .wrapper { max-width: 1440px; display: grid; grid-gap: 3px; grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); } .hero-item { width: 70%; grid-column: 1 / span 3; } Will be ignored by unsupported browsers
  33. 33. 33 .wrapper { max-width: 1440px; display: grid; grid-gap: 3px; grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); } .hero-item { width: 70%; grid-column: 1 / span 3; } Will have side effects on supported browsers @supports (display: grid) { .wrapper > * { width: auto; } } Reset the width if grid is supported
  34. 34. 34 Do I have to code the same layout twice? Only if you expect the layout to be the same in all browsers
  35. 35. 35 Code accessible HTML Code layout that works on all browsers Progressively enhance layout for modern browsers
  36. 36. 36 https://codepen.io/rrenula/full/VMWMWx/ Thumbnail presentation with CSS Grid with fallback for older browsers
  37. 37. 37 https://hacks.mozilla.org/2016/08/using-feature-queries-in-css Using Feature Queries in CSS
  38. 38. 38 aysha.me @renettarenula codepen.io/rrenula Thanks

×