Pratique du Shadowing: Handy CSS layout patterns, and fun ways to elevate them - Apprendre l'anglais à l'oral avec la vidéo

Hello my friend and friend in this video we're gonna be looking at three layout patterns

that I use quite a lot that I think are useful

that I don't see used often enough and some cool tips and tricks along with using them.

Actually the second one is one that's common but there's a problem

that people run into with it that we're going to look at

but first let's look at this one which is an overflow scroller.

I recently did a workshop where I was talking about this

and a few people were like oh I use

so much javascript to do this so we're going to see how we can do it.

the css only way with like a few lines of code

so you can see here i have this overflow scroller with a bunch of cards in it

and i'm going to use grid you could definitely use flexbox for this

but i prefer grid because if we do it with grid the parent controls everything

which is always nice so we can do display grid a gap of one

and then the very underused grid auto flow and with

that i'm going to say that the auto flow is column

and i always forget i think this is columns

or was it column column singular it's always fun knowing with grid

if it's singular or plural and

that makes all of my cards turn into columns instead of creating rows

and change the the flow this is a little bit like changing the flex direction with the exception

that we can't have a flex wrap involved in it

but yeah our flow now creates columns and then what i can do is

because you know they're all different sizes which is kind of awkward

so now what i can do is a grid auto column

and we can control the size of the column

and this is columns plural and i know that one's plural

because this one's singular and that's how i remember it

and here i can just bring in a size

and we could do a lot of different things for this

size uh let's just say we could do something like 300

pixels i think we'll be fine i might make them a

bit bigger maybe for this layout actually it's okay we'll see uh

but you can see right now that's creating my my going

that way and i put gap one Let's make that one run.

But yeah, now we're now overflowing quite literally, which isn't what I want.

I want like an overflow scroller that's not causing the entire page to scroll.

So then I can just come on here and say that my overflow on the x-axis is going to be a scroll.

And in doing that, now we can see here I'm scrolling left and right, which not ideal maybe, but this is a very common pattern

that we see these days and where the real part of this comes in, because I guess this is enough.

I'm just holding shift down, by the way, to scroll sideways, which is the awkward part if you are on a desktop computer.

But on mobile, this is a very common thing with UI interfaces these days.

But the part that I want to look at really is once you've put this in place, is coming with scroll snapping.

And scroll snapping is definitely underused for these types of things, where we can just say that we have a scroll snap type.

and this is the part I always mix up.

I think you want to do the direction first.

So it'd be my inline axis in line or we could do X because we're on the X axis and then mandatory.

When you first do this, it's a little bit of a letdown.

I won't lie because you're going to try it and nothing is going to snap into place.

I actually thought I made a mistake at first here.

But what you want to do is combine the scroll snap type with selecting the children

and saying how they're going to align when they're snapped

and this is the perfect use case for nesting

because we can just do an ampersand

and then get the children with the star selector here uh

you don't actually need the ampersand you could also do it

like this i i just have this habit of putting the ampersand uh it's completely up to you

if you feel like this needs a comment you can just put select the children

so you know everybody knows what's going on

and then here what we're going to do is a scroll snap a line

and i'm going to say center for now you can do start you can do end we can do center

and if i do center you can see now it's going to grab the one in the middle

and it's going to center it so

when we are not the one in the middle but

when we get

when we scroll over it's going to snap the one that's

being snapped into the middle uh for this one i am

using a scroll snap type of mandatory there's also proximity for this i don't really like proximity

because it leaves like proximity leaves a little bit of leeway

so uh we'll let the page reload and then so now

when i'm going over actually it's still going to act very similar

but there is this like chance where things might not snap

into place i think in the way we're setting things up here it won't matter but

if you're doing something that's more based on like scrolling horizontally

with big sections proximity might be your better bet uh

because mandatory becomes a little bit aggressive i'm not a huge

fan of using scroll snap type for sections of content though it's a bit like scroll jacking

which can be a little bit annoying uh

so i'm going to change this one back to mandatory man da tory like

that and we're going to move on

but i do have a really cool trick

that we're going to show you I'm going to show you at the very end with this one

but it's not really related to layout patterns this is a really fun thing

that we can do with this that just makes it

so much cooler

but for now what I'm actually going to do is comment out this overflow scroller this entire section

so we can move on to my second layout

which is going to focus on similar cards that we have

but we're going to be doing auto grid

and I realize most people are familiar with auto grid So let's just go look here quickly at the HTML.

Same thing.

Auto grid, bunch of cards.

And the auto grid does have two choices.

So let's just come here and say that we have the auto grid.

I'm going to do a splay grid once again.

We're going to do a gap.

And as I said at the beginning, I think a lot of people are familiar with auto grid, but there's a gotcha with it that people run into issues with, which is why I want to look at it today.

And so this is going to be my grid template columns.

and the reason I'm saying autogrid is because I want to use the repeat and I want to use the autofit syntax.

100

I'm going to drop this on another line just

101

so we can see it all and for now I'm going to say autofit and just say 300 pixel.

102

Let's do 200 pixels so we get a few more columns which means that it's automatically going to autogrid.

103

I put it in the wrong place apparently.

104

Let's go fix that.

105

I named them both the same.

106

Auto grid section will help alleviate that issue.

107

So you don't normally see an auto fit with 200 pixels like this because it's kind of clunky, but it works.

108

I mean, it automatically adds or removes columns if they're based on

109

if there's enough room to squeeze in an extra 200 pixel column there.

110

But we don't do that because it's kind of clunky.

111

So usually what this is, is with a min max.

112

And this is where things get a little bit interesting or more useful, I should say, but harder to remember.

113

So I will give you the trick that I use on remembering the syntax here along the way as well.

114

So for this min max, we're going to say this is we'll stick with the 200 pixels as our minimum.

115

And then we're going to say one fr for the maximum, which just means it allows them to stretch.

116

So it's exactly the same thing that we had before.

117

But now those columns are kind of squishy.

118

So they'll shrink down a little bit, then they fill up the space, then they, you know, it makes it responsive.

119

And that's great.

120

The problem with this layout is if you have a larger size here.

121

And this larger size can cause overflow if the total space is below 400 pixels, right?

122

Because we're saying the smallest these can get is 400.

123

And the trick here is to put this all inside of a min, and this becomes 100%.

124

So this is weird that we have a min inside a min max.

125

Again, I'll give you the trick on remembering this and an easier way to write it in a second.

126

But yeah, this works really well.

127

And you can see it's exactly the same thing we had before, except now it's small sizes.

128

It's using the 100%.

129

And that's because it's going use whichever of these is smaller, is the 100% smaller, which it is right now.

130

So use that.

131

And then as soon as the parent is larger than 400 pixels, it switches over and it's now using that 400 pixels here instead of the 100%,

132

which, yeah, I think is a nice win, but it's a little bit hard to remember.

133

So really fast.

134

Whenever you want to do this, you use the repeat and you don't know how many you want.

135

So we just say auto figure it out for me.

136

There's auto fit or auto fill.

137

I default to auto fit.

138

Pick one if it's the wrong one, pick the other one.

139

And in this case right here, there is no difference anyway.

140

So I'm going to do an auto fit comma.

141

And then I know I need a min max.

142

In my min max, I need a minimum value.

143

So I'm to use a min function comma one fr

144

so i don't forget it

145

and then i don't have to worry about where the fr goes between all these closing braces

146

because i i mix that up if not so we have the

147

min max again min because i need a minimum value comma one fr

148

and then i go in my minimum and i put a value

149

that i want let's do 300 pixels this time and 100 and the only value that ever changes is this one.

150

So the nice thing to do is say

151

that we have a min call size of 300 pixels and use that custom property instead.

152

And then this becomes var min call size like that makes it for an even longer declaration,

153

which is, you know, it's a lot of a lot of code, I guess, for a single CSS declaration.

154

But now we have the layout that is working exactly like we want it to.

155

And it's very perfectly responsive, a nice intrinsic layout pattern right there.

156

And you can just, you know, rinse and repeat this, use it anywhere you want

157

and just change this min call size for the different values that you might need.

158

So another one that I quite like.

159

So let's get rid of this section now here

160

and get into another one adaptive what does adaptive mean for

161

this i'm also going to move the the heading off we'll comment this out

162

so this is closer to the top and let's look at this

163

so here i have this layout once again similar to before

164

i actually have the auto grid uh in this section as well i believe auto grid is here

165

or that doesn't really matter too much what matters right now is the uh this area here this active promotions

166

which is this promo list that i have right here

167

and it's inside of a section a sidebar section and

168

so for this one we're going to be using container queries

169

and container queries don't get enough love usage of them is

170

very low browser support for them is very good now you

171

can safely use container queries unless you really need to support some legacy browsers

172

and what we're going to do is let's start with our promo list

173

and the reason actually okay let's talk about the reason why

174

I want to use a container query for this in the

175

first place is right now this is in a narrow sidebar section

176

and then as the viewport gets smaller we get to a wide area

177

and then eventually it will get narrow as well

178

and what I want to do with this one we have a bonus tip with this one too

179

but what I want to do with this one is

180

when there's enough room I want this active promotions to actually be three columns instead of stacking like this

181

because it looks kind of ugly But when it's at this area, I want it to be stacked because that makes sense.

182

And when it's over here, I want it to stay stacked because that would make sense.

183

And using a media query for this is a nightmare because as the viewport gets wider, that area it has to live in gets smaller.

184

So it doesn't really make sense to do this with a media query.

185

So let's get that.

186

That's my promo list.

187

And I want to say an at container.

188

And we can say our width or even inline size, but I'll do width in this case.

189

is we're going to say if the width is larger than, let's try 500 pixels.

190

We want it to be a grid template columns of repeat three one fr.

191

I have some other styles floating around, but we can, let's just say display grid gap one rem, because this would sort of be what the pattern would be for this type of thing.

192

And if we try this at first, it won't work.

193

So we get to here, this is clearly bigger than 500 pixels, but we don't have three columns.

194

The reason that's not working is because there is the side effect of having to have a container.

195

And for this, the white border around here is my sidebar section.

196

We have this aside.

197

I call this sidebar content because we have first the sidebar, then the content.

198

Maybe there's a better name for that.

199

But yeah, sidebar content.

200

I want to grab either the aside or the section itself.

201

Either one of these would work perfectly fine so it's up to you which one you want to use.

202

I like making the closest thing the container but the aside makes complete sense.

203

If you'd rather the aside be a container that would work completely fine

204

but I'm going to say that the sidebar section is a container type of inline size

205

and in doing that when I make this smaller we get to here

206

and then we get those three columns

207

because this is clearly bigger than 500 pixels and as we get smaller then it wraps here as well.

208

And yeah, so I think that works really well.

209

It's an adaptive layout.

210

It's able to change to where it's being used.

211

I really like this for anything that might end up in a sidebar.

212

And these types of patterns like this work really well.

213

Much easier than trying to figure it out along the way with a media query and then having to readapt.

214

And then the breakpoint changes and you have to have another breakpoint changing for the other thing.

215

It's a little bit annoying.

216

The only side effect here is we do need to declare our container type.

217

But whatever, not the end of the world.

218

And now just before we get to the bonus tips, including how we can do these interesting little cutout corners

219

and a really fun effect for the first thing that I'd mentioned earlier, I do just want to quickly mention that this video is being brought to you by my course CSS Demystified, which I've built from the ground up

220

and includes an entire module based on patterns that we're seeing here where we're looking at fluid,

221

intrinsic, and responsive design patterns that go into a little bit like what we looked at in the previous example, as well as a deep dive into container queries, some useful patterns with them,

222

some gotchas along the way, how we can overcome some of the gotchas, and yeah, just a deep dive into helping you learn how you can start writing CSS with confidence.

223

So if you'd like to know more about that, there is a link just down below in the description.

224

And with that, let's jump back into things

225

and look at how we can do these little scoop out corners that are right here.

226

Two bonus tips.

227

I mentioned a few things along the way though.

228

Now we're going to get into the fun stuff.

229

So on my active promos here, let's go.

230

That's my promo list.

231

And then these are just LIs inside.

232

So I could say that the LIs that are direct to children, which I had the ampersand before.

233

So I'll use the ampersand again here where first I'm going to give these a border radius.

234

So border radius, I'm going to say like, I don't know, I'm going to make it bigger than what I'd actually want uh

235

so i probably whatever 16 yeah it's probably a little bit big uh actually well i'll leave it big

236

so you can actually see what it is let's also change the border color

237

because i think it a standout more border color can be white uh just

238

so it highlights a bit more

239

and then what i'm going to do is a corner shape of scoop

240

which will now scoop out those corners nice right So corner shape is new.

241

This is a progressive enhancement.

242

If it doesn't work, then people get the border radius.

243

And if it does work, then they get the scoop.

244

And again, I think that's a little bit big.

245

So we can drop that down to like an eight.

246

And scoop, I'll put a link to more information on corner shape.

247

You can do squircles, you can do scoops, you can do bevels and insets and all sorts of interesting things there.

248

But I'm going to leave it with my little scoop there to make it look like a ticket

249

or something that people are getting for their coupons.

250

And the last one that I wanted to look at, which is one of my favorite new things is with scroll driven animations,

251

which let's get this scroller turned back on all the way at the top here.

252

And what we're going to do with this one is something very cool, at least in my opinion.

253

I think this is the super amazing.

254

So on my overflow scroller here, we have, you know, we scroll side to side and we can make this just, I don't know, so much more satisfying.

255

where I'm trying to remember how I'm going to do this.

256

So we need to create some keyframes for this.

257

I'm going to say an at keyframes of, let's call it a scroller.

258

And we're going to say at 0% and 100, comma, 100%.

259

So when they're at like the extreme ends of the animation, we're going to give them an opacity.

260

We're going to exaggerate this and then we'll make it look better.

261

0.5 and let's give it a scale of 0.5 as well.

262

So it's pretty substantial.

263

and then what we're going to say is in the let's say like a 35 comma 65 does

264

that make sense uh we're going to say that the opacity is one

265

and the scale is one and

266

that means the animation basically goes from zero to 35

267

and then from 65 to 100 and we have that middle range where things will just always be at this, in between these two values,

268

it will always be at the opacity and scale of one.

269

Then I'm going to go on here where we have the scroll snap align.

270

So I'm selecting the individual items that are snapping.

271

And I'm going to say that they have an animation of scroller.

272

I'll put the name.

273

I'm also going to say that it's linear because if you don't use linear, maybe we don't need linear for this one.

274

I'm not 100% sure, but I'm going to throw it on there anyway.

275

and I'm also going to put the both keyword

276

which just makes sure there we go we're currently now at the end of the animation

277

so by putting both here

278

if the animation is not currently running it means you know go to either the first

279

or last keyframe depending on where you were

280

so they're at the beginning of the animation right now

281

which does not look fantastic but we can see

282

that at least it's working but now we don't want to put a duration on here

283

because that wouldn't make any sense so we can come in with an animation timeline

284

and with the animation timeline we have two options

285

one of them is scroll which is not what we want in this case

286

and I think scroll won't work if we just do it like this

287

so you can see it's actually broken

288

if you do scroll it's defaulting to up and down

289

so our horizontal vertical scrolling so

290

if I want it to be based on horizontal scrolling I just do x

291

and there we go it's now animating it

292

but it's based on the entire way across that I have for this

293

which I know the scroll bar is going a bit behind my head

294

but as we sort of come across

295

and then we come this way it's it's based on the entire scrolling distance

296

that we have instead of scroll though i can use view

297

and then it's gonna be based on the item's position in the view so now

298

oh that's kind of better right i love it it's

299

so nice uh and as i make

300

that a bit wider we can start getting some of those ones

301

that are further out we could even let's do opacity like 0.25 maybe we We want to really fade those out.

302

And now, yeah, looks a little bit, I don't know.

303

I find that I actually thought that I was exaggerating with these values, but it ended up working out pretty well.

304

Where are I think pretty well, in my opinion.

305

And you can play with the keyframes a little bit.

306

But yeah, I thought that would be a fun way to sort of finish this one off.

307

Less practical necessarily, but a way to elevate our design a little bit

308

with just like a couple of extra lines of CSS.

309

And yeah, if you are interested in CSS Demystified, do make sure to check out the link for that is right down in the description below.

310

And with that, I want to say a very big thank you to my enabler of awesome Johnny, as well as all my other patrons and channel members for their monthly support.

311

And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.

Qu'est-ce que la technique du Shadowing ?

Le Shadowing est une technique d'apprentissage des langues fondée sur la science, développée à l'origine pour la formation des interprètes professionnels. Le principe est simple mais puissant : vous écoutez de l'anglais natif et le répétez immédiatement à voix haute — comme une ombre suivant le locuteur avec un décalage de 1 à 2 secondes. Les recherches montrent une amélioration significative de la précision de la prononciation, de l'intonation, du rythme, des liaisons, de la compréhension orale et de la fluidité.

Pratique du Shadowing: Handy CSS layout patterns, and fun ways to elevate them - Apprendre l'anglais à l'oral avec la vidéo

About This Lesson

Key Vocabulary & Phrases

Practice Tips

Qu'est-ce que la technique du Shadowing ?