Mini tutorials

[Larrie]

I learned a lot from these mini tutorials posted by Tiago, it would be nice to bring them back in some form.

Example below:

[jonne]

Hi Larry, I agree. Those were great! Let us know if there’s any specific content you’re looking for. I’m also curious to hear if others on this forum have the same need for similar content.

Additionally - although they are not completely similar - you can find some how-to’s on our Guides & Courses page.

[Larrie]

Thanks for the Guides and Courses link @jonne

At the moment I’m using Sketch a lot for web design and I’m struggling with the Layout Settings, I know how many columns I want for different viewports and what gutter size I want etc. but implementing those in Sketch is something I need to master, so any content related to that would be super useful to me.

It was the format of those mini tutorials I liked the most, just one page and easy to understand.

[dfmedrano (Jorge)]

Hey @Larrie, welcome to the Forum!

Would you mind sharing your layout specs? Number of columns, and if you have some preferred screen sizes. We’ll give it a go and share a tutorial

[Larrie]

Hi @dfmedrano

My layout specs are:

Mobile:

Tablet:

Desktop:

Preferred screen sizes:

• Mobile width: 375px
• Tablet width: 768px
• Desktop width: 1440px

Number of columns

• Mobile: 4 columns
• Tablet: 8 columns
• Desktop: 12 columns

Gutter and column width:

• Gutter width: 20px
• Column width: 70px

Side Margins:

• Side margins mobile: 20px
• Side margins tablet: 40px
• Side margins desktop: 190px

---

At the moment I’m using trial and error to get the layout settings for my needs, side margins are proving difficult, so I change the offset until it looks right, I’m sure there must be an easier way to do it.

Thanks,
Larrie.

[dfmedrano (Jorge)]

Thanks @Larrie I’ll get to it and share it here!

[Larrie]

Thanks

[dfmedrano (Jorge)]

Hi @Larrie,

Here’s the tutorial! I hope it helps!

You can see a step by step breakdown in our SketchHelp X (Twitter) handle, or the fullsize image below:

Let us know what you think!

[Larrie]

Thanks @dfmedrano for all the hard work in making the tutorial, I really appreciate it.

I carefully followed the steps and for an artboard with a width of 1440px as in the example it works fine, but for artboards of different sizes, I’m still having problems with the side margins.

Mobile (375px width):

• Columns: 4
• Column Width: 65px
• Gutter Width: 20px
• Side Margins: 20px on each side

So I did the following:

1. Multiply the number of columns by the column width.
   4 columns @ 65px width, 4x65 = 260

2. Subtract 1 from the total number of columns.
   4 column layout has 3 gutters

3. Multiply the number of gutters by the gutter width.
   3 gutters @ 20px each, 3x20 = 60

4. Add the columns width and the gutters width.
   260 from columns + 60 from gutters makes 320

5. Subtract the columns total width from your artboard’s width and divide the result by 2.
   Artboard (375) minus Total width (260) = 380. Divided by two and we have 48.5 for side margins

6. Enter 260px in the total width

7. Disable the outside gutters

8. Enter the gutter width 20px, press the tab key

9. Center the layout

And I get this:

This is a 375px wide artboard with those settings:

I don’t know what I’m doing wrong

[dfmedrano (Jorge)]

Hi @Larrie

Let me take a look and I’ll get back to you!

[dfmedrano (Jorge)]

Hey @Larrie I think I found what’s going on.

It’s the artboard’s width. Your choices for columns and gutters define the total layout area, and that will live inside an artboard with a specific width.

The difference between the artboard’s total width minus the layout area (columns + gutters) defines the area that’s left for the side margins. In this case we have these values:

• Columns = 260
• Gutters = 60
• Total width = 320
• Artboard width = 375

Artboard (375) minus Total width (320) = 55px. That will leave us with 27.5 on each side, which, as you can see, don’t match the side margins of 20 on each side. Note also that on the settings panel, you’ll see 28 in the offset field, since decimals are not supported here.

To get the 20px side margins take the 55px and subtract 40 (for 2 side margins and then subtract the result (15) from the artboard’s total width.

So this would make your artboard 360 and not 375.

Tip: when your side margins are half pixel values keep in mind that your columns will have half pixel positions too.

Here’s the settings for the values you shared with me. Let me know what you think and if you have any questions

[Larrie]

Hi @dfmedrano thank you for all your help

[dfmedrano (Jorge)]

Anytime Larrie!

Please feel free to share any other questions, thoughts or feedback you have!