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