How responsive web design works in Greyd.Suite

Hello I’m Jakob from Greyd and today I’m going to talk to you about responsive web design. You might have heard the term “intrinsic web design”, which could be described as a new era of responsive web design. And WordPress has a lot of the concepts of intrinsic web design already built into the site editor and the intrinsic behavior of the page, but we start off with kind of a classic responsive thing. We take a look at the header. The header if you actually resize it to mobile, doesn’t really break too beautiful. So actually, I don’t want to see these elements on mobile, I maybe just want to go down to the burger menu, but I have to test that out. And how I’m doing that, I will show you right now.

I have this header inside the site editor and I now take a look at my navigation element. So I have this navigation element and I go to the advanced tab, the settings tab and advanced panel, and here I can hide it for different breakpoints. So for example I want to hide it on tablet and mobile breakpoints and save that, and now this element doesn’t really get reflected in the preview, because we still need to be able to see the element, because otherwise we couldn’t really edit it. But we take a look of how this page is actually behaving in the frontend after I save the setting. So it looks the same on desktop, but as soon as I go down to this breakpoint, the element is gone. It already has a really nice behavior, so now I can go down to as much as 360 pixel and I still have a nice behavior.

So, I can maybe think about not having the burger menu on desktop devices, because I actually have all my menu items in the header and maybe I want to hide the download button as well when I come down to a mobile device. So let’s just do this. So similar here, I go into the buttons element and say, I want to hide them on mobile devices only, and I go into the popover block. The popover block, which is the off-canvas menu, is configured inside the popover block. I have the same navigation menu in here as well, so similar to the navigation element which I’m hiding on all my mobile devices, I now want to hide the popover element which pretty much just shows the navigation items. I want to hide them on desktop devices. I’m going to save this and I’m going to go back to my page and reload it. Now I have no burger menu on desktop devices. And I go down and the burger menu appears in the same moment the actual navigation elements are not shown anymore, so now I can highlight this navigation menu. I can put all my navigation items in this popover block and if I go further down to mobile, now I only have my burger menu and now I can easily go to really small screen sizes that actually do not really matter, because nobody has a screen size below 320 pixel I think. But this is the way I can configure a navigation, but also every single element inside your page, your post, whatever, can be displayed based on a specific screen size. That’s pretty much the default behavior how you can hide and show elements.

Now we want to take a closer look at what you can actually do to resize elements adjusting to the screen size you have. Before I show you how you can actually set this up, I want to show you how this actually is behaving when you build your website. First of all, we go down to these headlines and take a look at the font size setting. If I go to the design tab, I have font size settings in here, and these are just presets. I can take small, medium, large up to huge and huge is what is already defined. I can go down to small and huge is actually a pretty large headline, but if I go down to a mobile screen size, it still looks nice and behaves nice. And that’s actually based on a fluid preset which automatically resizes to the viewport width. And how to set this up I’m going to show you in a second.

But before I show you that, we are going to take a look at spacing sizes as well, because similar to font sizes, you have presets and you’re able to pick those presets in here. For example for my paddings, my margins and my spacings I have presets. It goes from zero to small, medium, up to extra large and I have the same for the padding on the side, I have the same for the margin and I have the same for the block spacing inside of the block. And this makes it really easy for the actual editor of the page to just select the padding sizes. Instead of having to define a padding, for example 80 pixels on desktop, 60 on tablet, 40 on mobile, where I always have to think about what pixel value is the best for my design, I can just select a preset and this preset is automatically resizing to the viewport width if I configured it correctly. And it makes it a lot easier for the user to actually set up these dimension widths, so these paddings, margins, spacings, whatever. I always have the option to go back to the classic approach and have for example my padding to be 100 pixels. And if I configured my padding to be 100 pixels you see the problem really fast. If I go down to a specific screen size, 100 pixel is just way too much.

So I go back to desktop and now I want to set it up for tablet, make it maybe not 80, make it 60, and I want to go down to mobile and make it 20. So this way I did define a responsive value and it actually looks okay, but I have to define three different values just to set up our largest or medium spacing size. So usually I just don’t want to do it this way, I would highly recommend doing it the intrinsic way by just setting up and selecting one preset and you can select and you can configure these presets globally. And how you do this we take a look at this now.

So I have the Greyd Global Styles, which are pretty much a version of the global styles, but it has a lot more options. First we take a look at font sizes. In font sizes I can define all my presets. By default these presets are mapped upon my headline sizes, so huge as headline one, extra large as headline two and so on, but you can of course set up each headline one to be 40 pixels or to be extra large or large, but by default those are mapped upon each other. And you see here, you can configure this font size by choosing a fluid value or a static value. So what a static value does, is pretty easy, for example I want to go back to my 100 pixels, I want to have a huge headline one, looks really nice on desktop, but the problem is, if I go down to mobile, I now have the issue that this is way too large. So I’d rather like to configure my font size in a fluid way. And what fluid does in this example is, it has a minimum and a maximum value. The minimum, it’s never smaller than this value, which is kind of necessary for mobile devices. If I go down to mobile again, I need to scroll a lot here, you see this value, is now probably around 1rem, but I need to make the least amount a little bit bigger, so 2.5rem is pretty good, because it’s a bit larger than the large preset and the extra large preset and the huge preset looks nice on mobile devices, but I still want to have a huge headline on desktop.

And this way I configured it by using viewport width. 10 viewport width is 10% of the actual width of my viewport of my device. This way I can use this dynamic value to make like huge headline, 15 viewport width, this is a huge headline or desktop I can make really statements, but if I go down to mobile it still looks all right because it’s actually resizing adjusting to the viewport width and then never gets smaller than 2.5rem. And actually WordPress does all the calculations for you to resize this element in between the smallest breakpoint and the largest breakpoint and calculates all the values for you. You don’t have to think about that too much. And this is, if we go down back to desktop, pretty similar to spacing sizes. Spacing sizes you have a lot more options, but at the end of the day it’s pretty much built the same. So what you’ve seen in fluid typography sizes, clamp is actually the CSS function that is all based upon, but with spacing sizes you have all the CSS functionalities yourself and you can configure it yourself.

So again I can configure this extra large preset that I’ve selected in this group to be a static value, for example make it 100 pixels. 100 pixels does look all right on desktop, but looks terrible on mobile. So again I want to make it more dynamic. And what I can do for example, I can select min. Just shortly explained what min does: min always selects the smallest value of these two. So it actually makes sure that it’s never getting bigger than any of these values. Max does the opposite, it actually selects the largest of these two values, so it makes sure it’s never smaller than both of these two values. And the one we’re looking at a bit closer is clamp. Clamp is what fluid is actually based upon. We have a minimum value, again never smaller than this value, I want to make a 2.5, bit larger, and maximum value – never larger than this value. And I want to make this pretty large make it 6rem. And the preferred values, actually as long as I’m in between these two values I’m trying to be this one. So three viewport width, 3% of the viewport width, is actually not really much, so I want to make it six. So now it’s automatically resizing to my viewport width, but it’s never getting smaller than 2.5rem, which makes sure that it’s always larger than the large setting. And it’s never getting any larger than the maximum value, which again makes sure that it’s never too large, that if I view this on a really huge desktop, it’s never actually too large it’s always kind of restricted in this behavior.

So I have a lot of options on a global stage to actually configure these values, these unit values and font sizes to be automatically responsive and I later on just select them. So if I think about this at this stage, I do not have to set these values again for every single breakpoint separately. And one more thing when it comes to responsive web design and the entire intrinsic approach of WordPress, the alignment is one important thing we have to talk about. I want to quickly explain how alignments work inside the block editor. By default, we have three different alignment types. I can show them right here. We have none, which is the content width, so the width of the content pretty much. We have wide width and we have full width. Full width explains itself, it’s just full width. Wide width is a wider size that is configured and selectable in most of the elements. And inside these groups I can set the wide and content width myself.

What I do on a global level is actually, you might have seen that before. In the layout tab of the global styles I can set up my content and my wide size, also my paddings and spacings by default. But my content and my width set actually the size I’m referring to in here. So content width is when you think about WordPress as a blog system, content width is usually what your text content should be. So your text content usually should never be much wider than 600 to 800 pixels, because that’s the most readable width. It obviously depends on your font size, but that’s one of the recommended values. And the wide width is usually what you use for pages, for featured images and everything like that. And then of course you have full width. You cannot configure full width here, because it is always 100% of the viewport. So I can set them in here globally. I don’t want to do it for now, but just to let you know that you configure them globally and refer to them, but I’m happy with the values how they are and I can select them here, so I have this content width, which is the default behavior. I picked no alignment. I have wide width and full width.

One thing I forgot to mention, but that’s actually really important, is this only affects elements on the first level of a page. On the first level actually it affects elements that can be aligned, for example this group block. And I can set my wide and my content width for this element. And I now can say okay, all my blocks inside of me, they should be using the content width. So the content width is again what I figured in content, usually around 600 to 800 pixels. And you see all the elements are perfectly aligned to the elements outside of it, because they all use the content width. If I deselect that now, they’re just inside this group and aligning to the padding of my group. So if I go to my padding step, you can see that’s where the elements do align to, but by default I want to make it my inner blocks use the content width.

This now allows me to do something. I make it full width. That’s actually really interesting. I can now select these elements inside and I have the alignment controls again. And I can now select these to be a wide width. And maybe the headline as well to be a wide width. I can even make it full width. It doesn’t really make sense in my opinion, but yeah. Maybe make this full width as well, but as soon as I say okay this doesn’t need to be full width, but wide width or even content width, you see the wide alignment doesn’t have any effect. Full width does, but doesn’t really make sense, does not have the effect that I wanted to have to be actual full width. But this is how alignments work and this is how the settings work. You can select the default behavior, configure it on your own. If I deselect it again, I have all the blocks aligning to the padding of the group. And that’s how alignments work inside the site editor and the block editor.

One last thing I want to highlight today is column behavior and column behavior especially inside the Greyd.Suite, because we took the core columns and built a brute STP grid inside of them. So for example I have these three columns and they’re looking really nice. And on mobile, if I go down to that breakpoint, actually this highlight one it could be a highlight product, could be whatever, I want this to be the most important thing, so I want this to be the first thing. So what I can do here is, I can configure the order based on my breakpoint. So I want to be this to be the start element. So now it’s the first element inside my columns, but if I go back to desktop, it is still the first element, because I haven’t actually configured the order to be something different on a desktop device. So from smaller desktops on, I want this to be in the second position.

One tricky thing here is, offset in CSS are always based on a numeric value and the default is zero. So if I configure something to be the position one, it has the value one. If I configure something to be at position two, it has the value two. But by default everything has the value zero, which leads to this column actually being in the second position, because it still has the value zero, but I want this to always be in the third position. And now I have on desktop devices this as my middle column and if I go down to mobile devices I have this as my first column. And maybe I want to do something different. I now want to have on tablet, because the content in here could be way larger, I want this to break out of this column and actually highlighted on top. So starting with this breakpoint, I want this to be very large, so this doesn’t actually make sense for the other contents, but we get there. And I want this to be in the middle. So I have this in a eight column grids. So I want to have this as an offset with two and now this breaks already, which is nice, but I need this to be breaking as well. So what I want to do is, based on my screen size, I want this to be a small column on the left. And now it automatically breaks into the next row pretty much, because it doesn’t have enough space in this first one. So it looks nice in here. Let’s go down to mobile. Mobile should be unchanged, because we changed everything from this point up, but desktop should look pretty terrible. And it actually does.

So what I want to do on desktop, I want to kind of reset the settings, so I want this to be automatically sized, to have no offset. And there we go, it’s reset already. This has no offset, it’s automatically sized, so every single column of these three has the same space, so the same width again. And this is just one last thing that I wanted to highlight, where you can actually define responsive behavior in kind of a nice way and define columns without actually hiding and displaying everything based on a breakpoint, but naturally just by resizing them in this layout. I hope you learned a lot. This is what responsive web design and especially intrinsic web design is all about. See you in the next one.

For more videos and information please visit our Helpcenter.