building layouts with css
TRANSCRIPT
Building layouts with CSS
@bpapillard@bpapillard
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
0. Let’s setup ⚙
github.com/lewagon/layouts-101Download starting boilerplate
1.What’s a layout 🤔?
Components = Elementary blocks of UI
Layout = Global structure of your page 📐
The layout is the page’s skeleton
tabs
cards
navbar
The layout is the page’s skeletonin which you inject components
2. Real-life examples 📖
What examples of layouts do you know 🤔?
Row layouts
Example - Homepage
Example - Homepage
Example - Blogpost
Example - Blogpost
Column layouts
Example - Map with results
Example - Map with results
Example - Inbox
Example - Inbox
Example - Social feed
Example - Social feed
Example - SaaS app
Example - SaaS app
Grid layoutsboth merged rows & columns
Example - Newspapers
Example - Newspapers
Example - Analytics Dashboard
Example - Analytics Dashboard
3. Row layouts
Let’s code a blogpost
using containersLet’s code a blogpost
<body> <div class=“banner”> <div class=“container”> <!-- title & subtitle --> </div> </div> <div class=“container”>
<!-- content --> </div> </body>
Very simple layout 😊
Dumb container
.container { width: 900px; margin: 0 auto;}
@media(max-width: 992px) { .container { width: 700px; }}@media(max-width: 768px) { .container { width: 500px; }}@media(max-width: 480px) { .container { width: 350px; }}
Responsive container
Let’s code it 💻
4. Column layouts
Column layouts
=
99% of layouts
Easy with flexbox 🔥we need to rehearse flexbox
Flexbox - Vocabulary
flexbox flex items
In a flexbox, items are naturally placed by column
.flexbox { display: flex;}
Then, you can distribute space around or between items using justify-content
.flexbox { justify-content: space-around;}
Then, you can distribute space around or between items using justify-content
.flexbox { justify-content: space-between;}
You can center items vertically using align-items
.flexbox { align-items: center;}
You can set the with of an item killing flex-grow and flex-shrink
.fixed-item { flex: 0 0 25%;}
You can allow items to grow with a flex-grow
.growing-item { flex-grow: 1;}
You can allow items to go to the next line with flex-wrap
.flexbox { flex-wrap: wrap;}
Let’s code a map with results
Identify the main flexbox
flex item
flexbox
flex item
Identify fixed and growing items
fixedgrowing
Set the height of the map to 100vh
Apply position sticky magic ✨
Map full height Sticking to the top
Use flex-wrap for the grid of cards
The cards container is also a flexbox containing cards
Let’s code it 💻
Let’s code Slack
Identify main flexboxflexbox
flex item flex item flex item
fixed fixedgrowing
Identify fixed and growing items
Let’s code it 💻
5. Grid layouts
Easy with CSS grid 🔥we need to rehearse CSS grid
First, define your grid
Then, define each element behavior
“ I start row 1 and take 1 row I start column 1 and take 2 columns “
Then, define each element behavior
“ I start row 1 and take 3 rows I start column 3 and take 1 column “
Let’s code a dashboard
Recap 🔥Row layouts: center content with container
Column layouts: flexbox is your friend
Grid layouts: define your CSS grid, that’s it!
