Figma + JointsWP + Gutenberg Design System – Layout grids and grid styles

How do I use Foundation's grids to define the content area to edit with Gutenberg? hmmm...

So I did the color styles for Figma in the last post, and that basically leaves me with 3 more styles I can define for this little system – Grid, Typography, and Shadows. Since I haven’t really thought about the shadows yet, I’m doing the other two first.

Foundation Grid + Gutenberg Content Area Exploration

JointsWP 5 uses the Foundation XY grid. By default, you have a 12 column grid layout with 30 pixel gutters on large screens and 20 pixel gutters on small screens.

This is the grid section of the JointsWP 5 _settings.scss file.

Setting this up in Figma is not hard at all. But I had to conceptualize how I’d actually be using Gutenberg. I looked at a lot of “content section” widths for a lot of webpages, as right now Gutenberg pretty much only allows you to build with block in this area of your site. After messing around with some ideas in Figma, I came up with these layouts.

Let me try to explain the solutions I came up with.

The .grid-container class from Foundation in JointsWP will restrict the width of your grid to 1200px. In the first 4 layouts above, you can see how the grid has a max-width applied to it (and the fifth is “full” screen).

The first layout (labeled “page.php”) is a standard 12 column grid, with an 8 column wide content area, and a 4 column sidebar. (Quick easy math: 12 columns with a 1200px width means 100px a column – hence, the 8 column content area is about 800px minus any margins or paddings or grid gutters, etc. But let’s just say 800px).

Looking at the third layout design above (labeled “wide”), it is 8 columns centered within that same 1200px 12 column grid. The reason I made this one is because the content area will be the same size as the first grid layout with the sidebar (page.php) – they are both 8 columns wide / 800px. So in theory, I should be able to use both pretty easily on the same site, with the same components, with no problem.

The first layout on the second row (labeled “widest”) makes the content area a full 12 columns with a 1200px max-width, and the one after that (labeled “full”) has no max-width, so it occupies the full screen width. Both of these are cool, because I can hand over full control to Gutenberg to lay out the page within the block editor. If I want columns within that area, I can use Gutenberg columns, for example.

The weirdo one – the 2nd layout above, labeled “skinny”, is actually inspired by the NY Times content area.

A typical 600px width NY Times content area.

That little skinny content area on NY Times measures 600px, so I centered a 6 column grid inside of the a 1200px wide 12 column grid. On this very blog, you are seeing this layout right now. (Scroll back up and look at the layout labeled “skinny”…. notice there are technically two 3-column sections on each side of this 6 column grid…maybe I can emulate that little sign up form that NY Times has in the right sidebar in a later design).

So, I essentially have two different grids to make in Figma now – a 12 column fixed grid (which can hold the “page.php”, “skinny”, “wide”, and “widest” layouts) and a 12 column auto adjusting grid (“full” layout, and also this can be used in any container where I want the grid to take up 100% of the width of the container).

Creating the Figma grid styles

If you need a reminder on how to make styles, go revisit my other Figma references articles.

And I lied a few sentences back…. We’re making a third grid!

But first, this is what the settings for the 1200px wide grid look like:

See where it says Columns in bold? That’s a dropdown. Make sure you set it to Columns to get all of these choices – 12 columns. Centered. Width of each row is 70. Gutter is 30 (as defined by your _settings.scss in JointsWP above). 70 + 30 = 100 x 12 = 1200px. I named this grid “Foundation 12 (1200px fixed)” in Figma.

Actually, to create the other grid, just change Type -> Center to Type -> Stretch. I called this one “Foundation 12 Full Auto Width”. EZ.

Btw, I’m terrible at naming things. However, I think these are better than my labels “skinny” and “wide” etc. above, which I’m still thinking about.

The names of my Grid styles.

The last grid? An 8 pixel grid! From what I’m reading, it seems like this is a good standard. 1 rem is 16px, so 8 goes nice and evenly into that. Google’s material design is built on a 4px grid, I believe, and I also found myself using increments of 4 pixels when assigning rem values (1.25rem is 20px for example. But I also sometimes use 1.125rem aka 18px / 2px increment!). I don’t have a right answer here, but I think this 8px grid will work for me and that’s my third grid for now.

There are several ways to toggle grids on and off so I suggest checking out menu -> view for one way to toggle them, and also, if you select an item with a grid, you will be able to turn it off with the little eyeball icon in the right sidebar. And also, keyboard shortcuts. Experiment and learn these methods because turning the grids on and off quickly is super helpful.

And while on the subject of the pixel grid, you can also change the nudge values in Figma. Go back to the menu, down to preferences, and go to nudge amount. Changing the big nudge to 8px is the move. Now I should be able to make perfect 1rem, 1.5rem, 2 rem etc. spacings throughout my design, and everything should be able to snap to that pixel grid pretty well.

These grid styles can be applied quickly to anything I’m designing.

Getting these layouts into my theme

I know I could find a sexier way to do this, but I just made some template files to represent these layouts, and they can all be chosen in the Gutenberg Settings area found on the right side of the screen by choosing Document -> Page Attributes -> Template. It looks like this when I have it set up:

All you have to do is name the files template-widest.php and template-full-width.php, etc. and then just make a few minor grid changes in the templates and you should be good to go.

Again, I know this might not be the sexiest way to do this, but for now, only I’m using this theme, and it works for me to get the right content area for the pages that I’m trying to create with Gutenberg.

Here is the template-skinny.php code just to show you how little work this is:

Template Name: Skinny (600px No Sidebar)

get_header(); ?>
	<div class="content">
		<div class="inner-content grid-x align-center grid-container">
		    <main class="main small-12 medium-8 large-6 cell" role="main">
				<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

					<?php get_template_part( 'parts/loop', 'page' ); ?>
				<?php endwhile; endif; ?>							

			</main> <!-- end #main -->
		</div> <!-- end #inner-content -->
	</div> <!-- end #content -->

<?php get_footer(); ?>

So now we’ve got colors and grids set up to match JointsWP 5 colors and grids in Figma and Gutenberg.

I hope this made sense – if you have any questions / thoughts / help for my not so smart ass, please reach out.

Leave a Reply

Your email address will not be published. Required fields are marked *