1 00:00:00,420 --> 00:00:01,690 Hey, welcome back. 2 00:00:01,710 --> 00:00:05,520 So I want to get into grids and spacing. 3 00:00:05,540 --> 00:00:12,030 Now, this is very important because it dictates how we space elements out, how we choose different 4 00:00:12,030 --> 00:00:13,110 unit sizes. 5 00:00:13,110 --> 00:00:22,920 And what I've done here is I've used the four pixel grid and I'm using multiples of eight, so let's 6 00:00:22,920 --> 00:00:24,070 get right into it. 7 00:00:24,420 --> 00:00:28,200 So I've created different grids here and we've created them together in the past. 8 00:00:29,250 --> 00:00:33,680 And my mobile layout grid is just a regular eight column grid. 9 00:00:33,690 --> 00:00:37,650 And let's take a look at what it looks like when we go to Ed Styles. 10 00:00:38,670 --> 00:00:44,490 So we have an account in terms of our columns, and I like using an eight column grid just because on 11 00:00:44,490 --> 00:00:49,230 mobile it gives us a lot of variance in terms of how we like display cards, especially our application. 12 00:00:49,240 --> 00:00:50,660 I think it's really card heavy. 13 00:00:50,880 --> 00:00:57,240 So we have different variants in terms of like larger cards, cards that bleed off in terms of horizontal 14 00:00:57,240 --> 00:00:57,760 fashion. 15 00:00:57,780 --> 00:01:00,100 We have cards that stack upon each other. 16 00:01:00,450 --> 00:01:06,450 This allows us to do two columns in terms of cards in a column, a larger column, and then something 17 00:01:06,450 --> 00:01:08,340 that bleeds off, which you'll see later. 18 00:01:08,760 --> 00:01:10,640 This is how I've set it up color. 19 00:01:10,680 --> 00:01:12,570 I just kind of use the standard color. 20 00:01:12,600 --> 00:01:15,390 I have an eight count type to stretch. 21 00:01:15,720 --> 00:01:21,960 Margin is set to twenty four pixels and my gutta is 16. 22 00:01:21,960 --> 00:01:27,570 So my margin over here is at twenty four pixels, which is another multiple of eight. 23 00:01:27,570 --> 00:01:30,750 My gutta is sixteen which is another multiple of eight. 24 00:01:31,260 --> 00:01:32,340 If we move over. 25 00:01:32,520 --> 00:01:36,360 I've created just a baseline grid if you wanted to use that as well. 26 00:01:36,510 --> 00:01:43,020 Within your projects you have the option to this really helps just if you want to space things vertically. 27 00:01:44,530 --> 00:01:50,350 You don't have to necessarily use this just within the entire mobile screen, if you have a I'll show 28 00:01:50,350 --> 00:01:52,060 you how I would apply it sometimes. 29 00:01:52,520 --> 00:01:55,990 So if I've created a frame, maybe this is a card. 30 00:01:57,630 --> 00:02:00,660 And I go to my local grid, which is right there. 31 00:02:01,760 --> 00:02:08,920 I can just apply to a card and now I have a different way to track my vertical spacing within this card, 32 00:02:09,530 --> 00:02:10,190 so. 33 00:02:11,210 --> 00:02:14,730 There's another one, this is an eight pixel grid. 34 00:02:14,750 --> 00:02:17,740 Let me just change the name into that eight pixels. 35 00:02:18,260 --> 00:02:21,920 So we have our eight pixel grid, which is just a little bit larger. 36 00:02:21,920 --> 00:02:25,880 I prefer four pixel grids because there's a lot more variance within that. 37 00:02:25,970 --> 00:02:28,430 It gives you a lot more to work with. 38 00:02:28,940 --> 00:02:30,330 This is more of a preference thing. 39 00:02:30,350 --> 00:02:33,410 So still a pixel grid. 40 00:02:33,830 --> 00:02:41,440 We also have the four pixel grid combined with the mobility grid that we've created here. 41 00:02:41,930 --> 00:02:45,540 And I've done the same thing also for an apex baseline grid. 42 00:02:46,430 --> 00:02:50,120 So these are the baseline grids and the grids combined. 43 00:02:50,120 --> 00:02:51,450 And I'll show you what that looks like. 44 00:02:52,220 --> 00:02:53,540 So this is my style. 45 00:02:54,140 --> 00:02:59,150 And what I'm going to do is I'm just going to select this little icon here that says that style. 46 00:02:59,690 --> 00:03:02,040 And once I've done that, you can see what I have here. 47 00:03:02,270 --> 00:03:06,260 So if I go to edit the properties, I'm going to see if those are my rose. 48 00:03:06,260 --> 00:03:12,520 My rose is my baseline grid and I have them set to auto account type right from the top. 49 00:03:13,310 --> 00:03:19,640 I, I've changed the color just so I have a little more hierarchy within here so I can distinguish between 50 00:03:19,640 --> 00:03:20,310 both of them. 51 00:03:21,200 --> 00:03:26,600 I have a four pixel height, I have zero offset and a four pixel gutta. 52 00:03:27,350 --> 00:03:32,600 So that is how I've set up my spacing for this project. 53 00:03:33,450 --> 00:03:41,060 And like I said, this could change if this is a mobile app and if we were working in a responsive application, 54 00:03:41,300 --> 00:03:43,400 we may see many more variations. 55 00:03:44,060 --> 00:03:48,350 We may see like a desktop version, we'll probably see a tablet version, we'll probably see even a 56 00:03:48,350 --> 00:03:49,880 little extra large desktop version. 57 00:03:49,880 --> 00:03:51,710 So keep that in mind. 58 00:03:51,720 --> 00:03:52,940 Don't just stick to one grid. 59 00:03:52,940 --> 00:03:55,850 You probably have variants if you have a responsive system. 60 00:03:56,540 --> 00:04:00,860 But this is going to really be what you base everything off of. 61 00:04:01,130 --> 00:04:05,750 You have your grid here and your spacing is based off of eight pixels. 62 00:04:06,820 --> 00:04:12,940 In increments of that, so this is grades and spacing.