1
00:00:03,000 --> 00:00:05,859
Let's continue working on the user interface.

2
00:00:06,359 --> 00:00:08,406
We added these product cards,

3
00:00:08,406 --> 00:00:10,948
with this nice little shadow effect.

4
00:00:10,948 --> 00:00:14,055
And this list looks good on a narrow screen,

5
00:00:14,696 --> 00:00:16,966
but if we expand the browser window

6
00:00:16,966 --> 00:00:20,013
then there's too much white space on this page.

7
00:00:20,577 --> 00:00:22,320
On a typical desktop screen

8
00:00:22,320 --> 00:00:25,030
we may want to display a grid of products.

9
00:00:25,594 --> 00:00:28,933
Now, Tailwind provides some utility classes

10
00:00:28,933 --> 00:00:30,564
for using a CSS grid.

11
00:00:31,760 --> 00:00:34,192
We can basically write "grid-cols"

12
00:00:34,192 --> 00:00:37,338
and the number of columns we want, like "3",

13
00:00:37,909 --> 00:00:40,166
and this will create a 3-column grid.

14
00:00:40,666 --> 00:00:42,572
So let's try that in our application.

15
00:00:45,166 --> 00:00:47,507
Not in the ProductCard but in the HomePage,

16
00:00:47,507 --> 00:00:49,357
that is where we display the list.

17
00:00:50,966 --> 00:00:53,197
So we can style this list

18
00:00:53,197 --> 00:00:55,873
with "grid" and "grid-cols-3",

19
00:00:56,462 --> 00:00:59,151
And this will lay out our product cards

20
00:00:59,151 --> 00:01:00,806
in a nice 3-column grid.

21
00:01:02,195 --> 00:01:04,700
That's great. But what happens now

22
00:01:04,700 --> 00:01:06,543
if we resize this window?

23
00:01:06,543 --> 00:01:08,680
It always displays 3 columns,

24
00:01:08,680 --> 00:01:11,260
even though the screen is too small

25
00:01:11,260 --> 00:01:13,397
to show 3 full product cards.

26
00:01:14,191 --> 00:01:16,004
If somebody looks at our website

27
00:01:16,004 --> 00:01:17,646
on a mobile phone for example

28
00:01:18,202 --> 00:01:20,575
it would be better to display a single column.

29
00:01:21,075 --> 00:01:22,671
But of course if we do that

30
00:01:22,671 --> 00:01:24,740
we have the same problem as before,

31
00:01:24,740 --> 00:01:27,341
that it doesn't look good on a large screen.

32
00:01:27,959 --> 00:01:29,939
That's where the concept of

33
00:01:29,939 --> 00:01:32,065
"Responsive Design" comes in.

34
00:01:32,638 --> 00:01:35,131
You're probably familiar with this idea:

35
00:01:35,131 --> 00:01:37,125
it's about designing our website

36
00:01:37,125 --> 00:01:39,119
so that its adapts automatically

37
00:01:39,119 --> 00:01:40,740
to different screen sizes.

38
00:01:41,426 --> 00:01:43,953
But in this video I want to show you

39
00:01:43,953 --> 00:01:46,269
how Tailwind CSS makes this easy.

40
00:01:46,839 --> 00:01:49,831
Tailwind provides some breakpoint prefixes

41
00:01:49,831 --> 00:01:52,751
we can put in front of any utility class.

42
00:01:53,322 --> 00:01:56,402
For example if we prefix a class with "lg:"

43
00:01:56,402 --> 00:01:59,769
that means it will only apply to large screens.

44
00:02:00,340 --> 00:02:03,641
Where "lg" means a screen that's at least

45
00:02:03,641 --> 00:02:05,009
1024 pixels wide.

46
00:02:05,589 --> 00:02:09,275
There are a few predefined "breakpoints",

47
00:02:09,275 --> 00:02:13,680
from "sm" for a small screen of at least "640px",

48
00:02:13,680 --> 00:02:17,276
to "2xl" for a double extra-large sceen,

49
00:02:17,276 --> 00:02:19,524
that is "1536px" or more.

50
00:02:20,293 --> 00:02:22,853
Let's see how this works in practice,

51
00:02:22,853 --> 00:02:26,519
which is actually easier than explaining it in words.

52
00:02:26,519 --> 00:02:29,978
We can leave "grid-cols-1" as the default setting,

53
00:02:29,978 --> 00:02:33,021
meaning this will apply to all screen sizes,

54
00:02:33,021 --> 00:02:34,889
unless otherwise specified.

55
00:02:35,665 --> 00:02:38,597
But then we can add a different class

56
00:02:38,597 --> 00:02:42,005
prefixed by "lg:", that as we've seen means

57
00:02:42,005 --> 00:02:45,333
when the screen is at least "1024px" wide.

58
00:02:45,991 --> 00:02:49,325
And in this case we can set "grid-cols-3".

59
00:02:49,325 --> 00:02:52,421
Now, the important thing to notice here

60
00:02:52,421 --> 00:02:55,993
is that by default, that is without a prefix,

61
00:02:55,993 --> 00:02:58,613
styles apply to all screen sizes,

62
00:02:58,613 --> 00:03:00,835
and then we can add a prefix

63
00:03:00,835 --> 00:03:03,455
to limit certain rules to screens

64
00:03:03,455 --> 00:03:05,439
larger than a given size.

65
00:03:05,439 --> 00:03:08,456
So you should first design your styles

66
00:03:08,456 --> 00:03:11,234
so they look good on small screens,

67
00:03:11,234 --> 00:03:15,203
and then apply different rules for larger screens.

68
00:03:16,417 --> 00:03:20,082
Some other CSS frameworks actually do the opposite:

69
00:03:20,082 --> 00:03:22,741
they assume a large screen by default

70
00:03:22,741 --> 00:03:26,119
and let you add exceptions for smaller screens.

71
00:03:26,119 --> 00:03:29,568
I think the Tailwind approach works much better:

72
00:03:29,568 --> 00:03:32,874
it encourages you to take a mobile-first view.

73
00:03:33,661 --> 00:03:35,839
Anyway, with these rules we see

74
00:03:35,839 --> 00:03:37,736
a single column by default,

75
00:03:37,736 --> 00:03:39,633
but as we expand the window

76
00:03:39,633 --> 00:03:43,076
at some point it will switch to a 3-column layout

77
00:03:43,786 --> 00:03:45,540
And by the way, that's why

78
00:03:45,540 --> 00:03:47,698
it's called "responsive design",

79
00:03:47,698 --> 00:03:51,206
because it "responds" to changes in the screen size.

80
00:03:51,840 --> 00:03:53,789
Now, when I record these videos

81
00:03:53,789 --> 00:03:56,304
I always increase the browser zoom level

82
00:03:56,304 --> 00:03:58,567
to make sure the videos are clearer.

83
00:03:59,192 --> 00:04:00,964
But let me reset the zoom briefly,

84
00:04:01,464 --> 00:04:04,600
so I can show you the exact breakpoint,

85
00:04:04,600 --> 00:04:07,172
that is when the layout changes.

86
00:04:07,172 --> 00:04:09,905
Note in the top-right that at 1024

87
00:04:09,905 --> 00:04:11,834
we still show 3 columns,

88
00:04:12,575 --> 00:04:14,705
but as soon as I shrink the window

89
00:04:14,705 --> 00:04:16,082
just a little bit more

90
00:04:16,082 --> 00:04:18,399
it changes to a single column layout.

91
00:04:19,024 --> 00:04:20,790
This proves that 1024

92
00:04:20,790 --> 00:04:24,404
is indeed the breakpoint for an "lg" screen

93
00:04:24,404 --> 00:04:27,178
when using the Tailwind prefixes.

94
00:04:27,846 --> 00:04:29,117
Let me increase the zoom again,

95
00:04:30,312 --> 00:04:33,354
and this is how we can have a responsive grid.

96
00:04:34,778 --> 00:04:36,304
Now, there's just a small thing

97
00:04:36,304 --> 00:04:37,337
I want to tweak here.

98
00:04:38,379 --> 00:04:40,510
We set a margin on the ProductCard,

99
00:04:40,510 --> 00:04:42,764
to have some space between the cards,

100
00:04:43,325 --> 00:04:45,443
but since we're now using a grid

101
00:04:45,443 --> 00:04:48,356
we could set some "gap" on the grid instead.

102
00:04:49,291 --> 00:04:51,798
This way we make sure there's some space

103
00:04:51,798 --> 00:04:54,369
not just vertically but also horizontally

104
00:04:54,369 --> 00:04:56,250
between the cards in the grid.

105
00:04:56,876 --> 00:04:58,548
Ok, that was just a small thing.

106
00:04:59,048 --> 00:05:01,789
But the main point about this video

107
00:05:01,789 --> 00:05:05,157
was showing you how to do responsive design

108
00:05:05,157 --> 00:05:06,645
using Tailwind CSS.