1
00:00:01,060 --> 00:00:02,070
And welcome back.

2
00:00:02,790 --> 00:00:09,000
Now we're in fact, we're going to talk about responsive grids now you may be designing for multiple

3
00:00:09,000 --> 00:00:09,440
screens.

4
00:00:09,450 --> 00:00:13,660
I mean, we do that a lot and grids can really help with that.

5
00:00:13,830 --> 00:00:18,870
We just spoke about layout grids and typographic grids and the history of grids.

6
00:00:18,870 --> 00:00:24,480
But grids are used to scale up and down to display information on multiple set of screens.

7
00:00:24,930 --> 00:00:25,560
So let's jump in.

8
00:00:25,560 --> 00:00:26,650
We have some cool demos here.

9
00:00:27,900 --> 00:00:29,210
First is the fixed grid.

10
00:00:29,610 --> 00:00:34,170
Now the fixed grid has a fixed container with position.

11
00:00:35,330 --> 00:00:40,580
I can demonstrate how this works, so as you adjust the frame.

12
00:00:41,600 --> 00:00:48,680
This container that's housing the actual legal grid is going to stay fixed and all the elements within

13
00:00:48,680 --> 00:00:50,270
it will stay fixed as well.

14
00:00:51,170 --> 00:00:58,280
So this actually maintains the exact measurements while the margin sizes increase or decrease like this.

15
00:00:58,850 --> 00:01:01,610
Even when I decrease it like that, they will stay fixed.

16
00:01:02,410 --> 00:01:06,170
Now, this is great if you want all your elements to stay proportional, but when you get to larger

17
00:01:06,170 --> 00:01:08,210
screens, you may end up with way too much.

18
00:01:08,210 --> 00:01:12,560
White space like this would be an extra large desktop screen.

19
00:01:12,560 --> 00:01:14,930
And you're like, wow, that's a lot of white space right there.

20
00:01:14,960 --> 00:01:16,100
And there are ways to handle that.

21
00:01:16,550 --> 00:01:19,370
But fixed grids aren't really used as much anymore.

22
00:01:19,490 --> 00:01:21,790
So let's just put that back there.

23
00:01:22,250 --> 00:01:23,540
Next is the fluid grid.

24
00:01:23,570 --> 00:01:24,460
Now, this is really cool.

25
00:01:25,130 --> 00:01:30,140
Now, food grids are measured in percentages, so the columns of the grid or your entire grid will shrink

26
00:01:30,140 --> 00:01:31,820
or grow depending on the size of your screen.

27
00:01:32,300 --> 00:01:33,170
Let me show you what I mean.

28
00:01:34,780 --> 00:01:41,260
So here is our grid, and you'll notice when I stretch it, the columns will stretch to.

29
00:01:43,360 --> 00:01:47,680
And when I shrink it, the columns and the content shrink as well.

30
00:01:49,480 --> 00:01:52,900
All of these sizes will increase and decrease based off of percentages.

31
00:01:53,290 --> 00:01:54,200
That's kind of cool, right?

32
00:01:56,290 --> 00:01:59,470
You know, it's even cooler, take a look at those margins in gutters.

33
00:02:00,570 --> 00:02:06,190
This is Zoom In now got margins on the right, gutters in the middle.

34
00:02:06,720 --> 00:02:07,350
Look at that.

35
00:02:08,740 --> 00:02:10,060
They aren't even.

36
00:02:11,400 --> 00:02:12,030
Shrinking.

37
00:02:13,520 --> 00:02:18,980
Are growing, the only thing that shrinks and grows is the size of your column, your gutters and your

38
00:02:18,980 --> 00:02:21,180
margins will always stay the same.

39
00:02:21,200 --> 00:02:24,210
They don't change and they adhere to your base unit.

40
00:02:25,130 --> 00:02:27,380
So in this case, let's take a look.

41
00:02:27,560 --> 00:02:28,670
This is our layover here.

42
00:02:28,970 --> 00:02:36,080
We got twenty four pixel gutta and twenty four pixel margin and they are staying the same.

43
00:02:36,740 --> 00:02:40,850
Now one column is that one year on larger screams and you want to utilize some extra space.

44
00:02:41,030 --> 00:02:45,080
Sometimes your content may look kind of stretched out, but there's ways to handle that.

45
00:02:45,080 --> 00:02:50,660
You could actually define a set with for your container but still have to be responsive.

46
00:02:51,540 --> 00:02:53,890
Now, responsive Grit's.

47
00:02:54,930 --> 00:03:00,990
We have a set of four over here, this is always a kind of a topic that designers like to kind of not

48
00:03:00,990 --> 00:03:02,210
really talk about as much.

49
00:03:02,790 --> 00:03:07,590
You know, we need to always keep a breakpoints in mind when we're designing for responsive layouts.

50
00:03:08,050 --> 00:03:13,680
As you notice, based off of our little demonstration there with fixed and fluid content, content will

51
00:03:13,680 --> 00:03:15,660
stretch and shrink depending on your screen size.

52
00:03:15,660 --> 00:03:16,820
And that's fine.

53
00:03:16,830 --> 00:03:21,210
We expect that we can run away from this, but we have a way to work around this.

54
00:03:21,240 --> 00:03:27,780
So breakpoints allow us to scale up and down our design based off of desktop and mobile.

55
00:03:27,780 --> 00:03:30,790
So we have like extra large screens, large, medium, small.

56
00:03:30,840 --> 00:03:32,390
So this is probably like a tablet.

57
00:03:32,970 --> 00:03:41,040
This is your mobile screen, probably like your regular laptop or small desktop and even larger screens.

58
00:03:42,400 --> 00:03:45,220
The first step is to always establish the set of breakpoints.

59
00:03:45,760 --> 00:03:49,360
Don't worry too much, there's a bunch of literature out there about certain breakpoints and what works

60
00:03:49,360 --> 00:03:49,690
best.

61
00:03:49,690 --> 00:03:53,710
But you're sort of breakpoints that I always use and it helps me get started on projects.

62
00:03:54,340 --> 00:03:57,220
So from small zoom in here.

63
00:03:58,240 --> 00:04:04,690
This one's at three hundred seventy five, but I usually define it by a little bit larger, I think.

64
00:04:04,990 --> 00:04:08,470
Six hundred is fine for smaller phones.

65
00:04:09,470 --> 00:04:17,350
Something like that, this is just like your typical size of like an iPhone X screen or in excess median,

66
00:04:17,660 --> 00:04:22,010
you got six hundred to eight hundred and ninety nine.

67
00:04:22,040 --> 00:04:23,180
This one's at 94.

68
00:04:23,180 --> 00:04:23,630
So you get.

69
00:04:25,880 --> 00:04:26,750
Erica.

70
00:04:29,650 --> 00:04:30,720
I could just bring that up.

71
00:04:33,360 --> 00:04:41,850
And then larger, we have nine hundred to one thousand one hundred and ninety nine, so this one we

72
00:04:41,850 --> 00:04:45,420
can fix to that, let's move over our content.

73
00:04:46,960 --> 00:04:51,650
See, sometimes there's really large screens that we need to think about, this would be our large,

74
00:04:52,250 --> 00:04:53,330
medium, something like that.

75
00:04:53,520 --> 00:04:56,560
It's a bit like that for small and for extra large.

76
00:04:56,570 --> 00:04:59,240
It's twelve hundred pixels with an above.

77
00:05:01,010 --> 00:05:05,090
These breakpoints will help you define small, medium, large and extra large breakpoints, and you

78
00:05:05,090 --> 00:05:10,450
can definitely modify your layout to change dramatically based off of that breakpoint, or you could

79
00:05:10,460 --> 00:05:11,200
change slightly.

80
00:05:11,660 --> 00:05:12,290
So cyclical.

81
00:05:12,320 --> 00:05:15,200
We got here after we modified just a bit.

82
00:05:16,800 --> 00:05:18,800
Let's just align them together.

83
00:05:20,320 --> 00:05:22,360
There you go, we just distributed horizontally.

84
00:05:23,530 --> 00:05:29,740
So we can see on our extra large column grid, we have a 12 column grid.

85
00:05:31,320 --> 00:05:35,910
And when we move a little bit down to large, nothing really changes with the layout, but we still

86
00:05:35,910 --> 00:05:37,460
are the same type of column grid.

87
00:05:38,640 --> 00:05:43,380
And when we move down to a medium grade, we start seeing some changes like we can use a six column

88
00:05:43,380 --> 00:05:43,740
grid.

89
00:05:44,010 --> 00:05:48,320
This would be typically a smaller laptop screen or even a tablet.

90
00:05:49,200 --> 00:05:54,840
So we start thinking about things like how are these users actually experiencing our product?

91
00:05:54,930 --> 00:05:59,970
Do we need to scale down elements to me to scale up elements just to keep them topical?

92
00:06:01,400 --> 00:06:06,410
And on small, like I said before, you could use like a two column grid, but I think that really limits

93
00:06:06,410 --> 00:06:06,690
you.

94
00:06:06,980 --> 00:06:08,420
So over here I have a six column grade.

95
00:06:08,420 --> 00:06:09,140
So we have.

96
00:06:10,000 --> 00:06:14,170
Two items together and there, and we can even do three items on this one.

97
00:06:18,160 --> 00:06:19,510
It gives you a little more variety.

98
00:06:19,690 --> 00:06:22,570
Before I said I like a Congress and I'll show you what that looks like.

99
00:06:22,580 --> 00:06:25,460
So I'm going to just do zoom out here.

100
00:06:25,930 --> 00:06:29,050
I'm going to copy this over here so we can work on it.

101
00:06:29,560 --> 00:06:33,010
And we're going to change the columns from six to eight.

102
00:06:34,230 --> 00:06:39,240
Now, that kind of looks skinny, doesn't give us much breathing room and the margin in the gutter,

103
00:06:39,240 --> 00:06:42,630
you can tell we'll play around with red so it's easily visible.

104
00:06:42,910 --> 00:06:49,950
You have four columns on to have the eight column grid, but you can even like if you want to have things

105
00:06:49,950 --> 00:06:52,860
kind of scale off the page a little bit.

106
00:06:54,240 --> 00:06:57,690
And have that as a swiping behavior, you can do that.

107
00:06:58,810 --> 00:07:03,400
Now, the really nice thing you can do on a concrete is have something really large.

108
00:07:05,790 --> 00:07:09,240
And like that, and you can type like that, which is really great.

109
00:07:10,660 --> 00:07:13,240
You know, let's step back, actually, you can just delete this.

110
00:07:14,200 --> 00:07:20,260
OK, so these are fluid levels, once we stretches out like it will give us an indication on if we need

111
00:07:20,260 --> 00:07:25,360
to actually scale up your design, if we need to scale down certain components, like I mentioned before.

112
00:07:25,870 --> 00:07:31,270
But this is where you should probably start if you have to actually build a product or a website based

113
00:07:31,270 --> 00:07:31,840
off of.

114
00:07:32,090 --> 00:07:32,380
All right.

115
00:07:32,380 --> 00:07:34,390
That allows for multiple screens.