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.

Building Layouts with CSS

2,659 views

Published on

You have some basic knowledge of HTML and CSS? Go further by learning how to build advanced layouts of real-life apps like Airbnb, Medium or Slack using the most recent CSS techniques.

Published in: Education
  • Be the first to comment

Building Layouts with CSS

  1. 1. Building layouts with CSS @bpapillard @bpapillard
  2. 2. 1. What’s a layout 🤔? 2. Real-life examples 📖 3. Row layout, the easy one 4. Column layout with flexbox 5. Grid layout with CSS grids
  3. 3. 0. Let’s setup ⚙ github.com/lewagon/layouts-101 Download starting boilerplate
  4. 4. 1.What’s a layout 🤔?
  5. 5. Components = Elementary blocks of UI
  6. 6. Layout = Global structure of your page 📐
  7. 7. The layout is the page’s skeleton
  8. 8. tabs cards navbar The layout is the page’s skeleton in which you inject components
  9. 9. 2. Real-life examples 📖
  10. 10. What examples of layouts do you know 🤔?
  11. 11. Row layouts
  12. 12. Example - Homepage
  13. 13. Example - Homepage
  14. 14. Example - Blogpost
  15. 15. Example - Blogpost
  16. 16. Column layouts
  17. 17. Example - Map with results
  18. 18. Example - Map with results
  19. 19. Example - Inbox
  20. 20. Example - Inbox
  21. 21. Example - Social feed
  22. 22. Example - Social feed
  23. 23. Example - SaaS app
  24. 24. Example - SaaS app
  25. 25. Grid layouts both merged rows & columns
  26. 26. Example - Newspapers
  27. 27. Example - Newspapers
  28. 28. Example - Analytics Dashboard
  29. 29. Example - Analytics Dashboard
  30. 30. 3. Row layouts
  31. 31. Let’s code a blogpost
  32. 32. using containers Let’s code a blogpost
  33. 33. <body> <div class=“banner”> <div class=“container”> <!-- title & subtitle --> </div> </div> <div class=“container”> <!-- content --> </div> </body> Very simple layout 😊
  34. 34. Dumb container .container { width: 900px; margin: 0 auto; }
  35. 35. @media(max-width: 992px) {
 .container { width: 700px; } } @media(max-width: 768px) {
 .container { width: 500px; } } @media(max-width: 480px) {
 .container { width: 350px; } } Responsive container
  36. 36. Let’s code it 💻
  37. 37. 4. Column layouts
  38. 38. Column layouts = 99% of layouts
  39. 39. Easy with flexbox 🔥 we need to rehearse flexbox
  40. 40. Flexbox - Vocabulary flexbox flex items
  41. 41. In a flexbox, items are naturally placed by column .flexbox { display: flex; }
  42. 42. Then, you can distribute space around or between items using justify-content .flexbox { justify-content: space-around; }
  43. 43. Then, you can distribute space around or between items using justify-content .flexbox { justify-content: space-between; }
  44. 44. You can center items vertically using align-items .flexbox { align-items: center; }
  45. 45. You can set the with of an item killing flex-grow and flex-shrink .fixed-item { flex: 0 0 25%; }
  46. 46. You can allow items to grow with a flex-grow .growing-item { flex-grow: 1; }
  47. 47. You can allow items to go to the next line with flex-wrap .flexbox { flex-wrap: wrap; }
  48. 48. Let’s code a map with results
  49. 49. Identify the main flexbox flex item flexbox flex item
  50. 50. Identify fixed and growing items fixedgrowing
  51. 51. Set the height of the map to 100vh
  52. 52. Apply position sticky magic ✨ Map full height Sticking to the top
  53. 53. Use flex-wrap for the grid of cards The cards container is also a flexbox containing cards
  54. 54. Let’s code it 💻
  55. 55. Let’s code Slack
  56. 56. Identify main flexbox flexbox flex item flex item flex item
  57. 57. fixed fixedgrowing Identify fixed and growing items
  58. 58. Let’s code it 💻
  59. 59. 5. Grid layouts
  60. 60. Easy with CSS grid 🔥 we need to rehearse CSS grid
  61. 61. First, define your grid
  62. 62. Then, define each element behavior “ I start row 1 and take 1 row I start column 1 and take 2 columns “
  63. 63. Then, define each element behavior “ I start row 1 and take 3 rows I start column 3 and take 1 column “
  64. 64. Let’s code a dashboard
  65. 65. Recap 🔥 Row layouts: center content with container Column layouts: flexbox is your friend Grid layouts: define your CSS grid, that’s it!
  66. 66. Want to go further? 🚀 lewagon.com/apply

×