1
00:00:00,960 --> 00:00:03,300
So, Nellie, you know how to design your own grid.

2
00:00:03,680 --> 00:00:05,280
You're going to need to know how to use it.

3
00:00:06,090 --> 00:00:10,410
I mean, there are rules, after all, and these guidelines that you're going to learn are going to

4
00:00:10,410 --> 00:00:12,650
really help you work with your new friend, the grid.

5
00:00:13,020 --> 00:00:18,690
So rule number one, your elements must always sit on some number of columns like we have here.

6
00:00:19,260 --> 00:00:23,760
We have these cards that are all sitting on their own columns.

7
00:00:25,230 --> 00:00:30,780
You may run into a case where Texas stretches way too much, you can move over here.

8
00:00:31,870 --> 00:00:37,810
And you can see that text stretches too much in this container and there's not enough breathing room

9
00:00:37,810 --> 00:00:41,110
in between each other and there's ways we can remedy this.

10
00:00:41,240 --> 00:00:42,730
So we'll just turn on the grid.

11
00:00:43,540 --> 00:00:46,150
We're going to we're going to just shrink this text.

12
00:00:46,150 --> 00:00:53,070
Remember when we spoke about creating frames within frames and creating grids within those frames,

13
00:00:53,080 --> 00:00:57,820
while we can do that here and we can see that we create a little bit more breathing room.

14
00:00:59,250 --> 00:01:05,820
Between our grid items, it's really powerful for moments like this.

15
00:01:07,280 --> 00:01:14,150
And like I mentioned before, sitting on a grid, these three elements are going to be on four columns

16
00:01:14,360 --> 00:01:20,600
each and these two are in half, and there is that sense of rhythm and uniformity.

17
00:01:21,440 --> 00:01:23,450
Rule number two.

18
00:01:24,430 --> 00:01:31,660
Your elements should never be left in the gutters, if we shrink this like this that's in the gutter

19
00:01:32,440 --> 00:01:39,520
like that, we can see already things are starting to look a bit off and.

20
00:01:40,540 --> 00:01:43,810
That's because we are not really adhering to our grid.

21
00:01:46,150 --> 00:01:53,740
Things start to look squished or just not even so, remember, never leave anything within that gutter.

22
00:01:53,770 --> 00:01:55,960
I mean, it defeats the whole purpose of the grid.

23
00:01:56,870 --> 00:01:58,920
Make sure your elements are in columns.

24
00:01:59,180 --> 00:02:04,090
So let's just reverse what we did there, so let's Kamandi all the way out.

25
00:02:04,970 --> 00:02:05,810
Perfect.

26
00:02:06,960 --> 00:02:07,530
Now, this.

27
00:02:08,670 --> 00:02:14,350
Just applies to the parent container, like I mentioned before, about creating frames over here, like

28
00:02:14,370 --> 00:02:15,510
green grids and frames over here.

29
00:02:16,020 --> 00:02:21,430
This is just going to apply to the parent container within the parent container.

30
00:02:21,450 --> 00:02:22,410
We can create our own grid.

31
00:02:24,350 --> 00:02:25,770
So we have to call them grid in here.

32
00:02:25,790 --> 00:02:31,970
It's a little hard to see with Baseline Grid and this is that card that we saw originally and everything

33
00:02:31,970 --> 00:02:34,570
is adhering to this grid within here.

34
00:02:34,850 --> 00:02:38,230
So there is uniformity with in this container.

35
00:02:38,240 --> 00:02:41,960
It doesn't necessarily adhere to the overall grid.

36
00:02:42,530 --> 00:02:44,180
It adheres to its own grid.

37
00:02:44,720 --> 00:02:48,200
And these grids should be consistent across your own UI elements.

38
00:02:48,740 --> 00:02:52,850
This comes in handy when you want to customize a card or content within it.

39
00:02:53,060 --> 00:02:58,160
And, you know, like I said before, the overall grid may not accommodate you as well.

40
00:02:59,940 --> 00:03:05,280
Our next rule is your outside column is not for padding.

41
00:03:06,310 --> 00:03:07,690
I mean, it's just not how it works.

42
00:03:07,930 --> 00:03:11,230
It may be the width of your content, but it will have an outside margin.

43
00:03:11,320 --> 00:03:15,850
Like I mentioned, if your screen expands, you can fix the width of your grid.

44
00:03:16,150 --> 00:03:20,020
That's a discussion that you should probably have with your developers on how you want things to look

45
00:03:20,020 --> 00:03:22,450
at certain sizes and break points.

46
00:03:22,630 --> 00:03:27,790
But don't use your margins here and your columns as some sort of padding.

47
00:03:28,630 --> 00:03:35,680
You could do that if it's actually intentional, but it's just something that you should stick to as

48
00:03:35,680 --> 00:03:36,400
much as possible.

49
00:03:37,210 --> 00:03:40,300
So next, release full bleed elements.

50
00:03:41,390 --> 00:03:44,930
Now, this little landing page header over here.

51
00:03:46,180 --> 00:03:54,310
It bleeds right off of our grid, it's going right into the margin, and the reason for that is that

52
00:03:54,310 --> 00:03:57,250
they should go beyond your grid and stretch to the edge of your arthaud.

53
00:03:58,060 --> 00:04:01,630
So it's going to extend right directly to the frame and that's fine.

54
00:04:02,230 --> 00:04:04,870
The content within is going to adhere to this.

55
00:04:04,880 --> 00:04:11,770
Generally, people say like hero images or headers and footers don't necessarily adhere to your grid.

56
00:04:12,100 --> 00:04:17,620
I like to keep the content within those things adhering to my 12 golomb grid at all times.

57
00:04:17,890 --> 00:04:22,120
But the images, if you want them to be full bleed, I think it's best especially for communication

58
00:04:22,120 --> 00:04:27,110
between yourself and your product team to just bleed them right across during implementation.

59
00:04:27,130 --> 00:04:32,740
This will go one hundred percent with right across here at your screen and that's it.

60
00:04:33,130 --> 00:04:37,630
You're pretty much good to go and you can go off and build your own grid for your own designs.

61
00:04:37,840 --> 00:04:42,550
And I think a great thing to do is try and build a mobile grid for our app that we're trying to build

62
00:04:42,550 --> 00:04:43,210
for a visual.

63
00:04:43,600 --> 00:04:44,800
So have fun.

64
00:04:45,070 --> 00:04:45,970
Just remember how fun.

65
00:04:45,970 --> 00:04:46,870
I mean, it's easy.

66
00:04:46,930 --> 00:04:50,290
Create those styles like we said before, and follow these guidelines.