Layout & Design
Practice: Creating Breakpoints in Framer (Fundamentals Lesson 25)
Practice: Creating Breakpoints in Framer (Fundamentals Lesson 25)
Practice: Creating Breakpoints in Framer (Fundamentals Lesson 25)
Joseph
·
19:02
·
37K views
·
About this lesson
Even the most flexible layouts have their limits, and will eventually reach a point where they, well, break.
Which is exactly where breakpoints come in, allowing us to adapt layouts to drastically different viewport sizes like desktop computers, tablets, and phones.
In this lesson, we’re looking at how to take the responsiveness of our sites to the next level using breakpoints in Framer.
https://www.youtube.com/watch?v=yTFB9QXL_do&t=0s Intro
https://www.youtube.com/watch?v=yTFB9QXL_do&t=17s Why breakpoints matter
https://www.youtube.com/watch?v=yTFB9QXL_do&t=46s Understanding breakpoint sizes
https://www.youtube.com/watch?v=yTFB9QXL_do&t=87s Creating multiple breakpoints
https://www.youtube.com/watch?v=yTFB9QXL_do&t=128s How breakpoints switch in the browser
https://www.youtube.com/watch?v=yTFB9QXL_do&t=166s Breakpoint overrides explained
https://www.youtube.com/watch?v=yTFB9QXL_do&t=239s Adjusting layouts for tablet and phone
https://www.youtube.com/watch?v=yTFB9QXL_do&t=305s Non-destructive overrides
https://www.youtube.com/watch?v=yTFB9QXL_do&t=348s Optimizing hero images
https://www.youtube.com/watch?v=yTFB9QXL_do&t=400s Resetting overrides and updating primary
https://www.youtube.com/watch?v=yTFB9QXL_do&t=464s Changing layer order and visibility
https://www.youtube.com/watch?v=yTFB9QXL_do&t=542s Managing breakpoints efficiently
https://www.youtube.com/watch?v=yTFB9QXL_do&t=598s Previewing breakpoints in the browser
https://www.youtube.com/watch?v=yTFB9QXL_do&t=639s Responsive text styles
https://www.youtube.com/watch?v=yTFB9QXL_do&t=725s Breakpoints inside layout templates
https://www.youtube.com/watch?v=yTFB9QXL_do&t=832s Fixing the footer on tablet
https://www.youtube.com/watch?v=yTFB9QXL_do&t=946s Fixing the footer on mobile
https://www.youtube.com/watch?v=yTFB9QXL_do&t=1078s Previewing final responsive footer
https://www.youtube.com/watch?v=yTFB9QXL_do&t=1107s Wrap up
Sign up: https://framer.link/yt
Follow: https://framer.link/yt-x
0:00Even the most flexible layouts have0:02their limits and will eventually reach a0:04point where they well break, which is0:07exactly where break points come in,0:09allowing us to adapt layouts to0:11drastically different viewport sizes0:13like desktop computers, tablets, and0:16phones. In this lesson, we're looking0:18how to take the responsiveness of our0:20sites to the next level using0:22breakpoints in0:23[Music]0:26Frame. For this one, we'll pick up where0:28we left off at the end of the previous0:30lesson. We got pretty far in making this0:33layout flex nicely as the viewport0:35changes size, but even still, we do0:38eventually get to the point where the0:39layout just doesn't work anymore. On0:42more narrow tablets or phones, we just0:44won't have the width we need for0:46headings to be quite so large or for0:48things to sit side by side, etc. So, for0:52this particular layout, we're definitely0:53going to need a phone breakpoint to0:55adapt to the most narrow viewport sizes.0:57And we could probably use a tablet0:59breakpoint as well for when things start1:01to get crunched like the feature section1:03or the footer. At the top of the desktop1:06breakpoint, we see the breakpoint bar1:08where on the left we can see that this1:10breakpoint is called desktop and is set1:12to 1200 pixels. And we can double click1:15to change the name and the size. But1:18changing the name here is the same as1:19renaming this breakpoint on the layers1:21panel. And changing the size here is the1:24same as changing the width of this1:25breakpoint on the properties panel. But1:28things don't really get interesting1:29until we create multiple breakpoints. So1:31let's start by clicking this add button1:33on the right hand side where we get to1:35choose to add a tablet preset that's 8101:38pixels wide, a phone preset that's 3901:41pixels wide, or a custom breakpoint. An1:45endless debate rages on regarding what1:47exact pixel size is ideal for each1:49breakpoint, but the defaults in Framer1:51are actually a really solid happy medium1:53to start with, but let's also be sure1:56we're clear on what these numbers really1:58mean. The size of the breakpoint is the2:00size that'll appear on the canvas, but2:02more importantly, it's the minimum size2:05for this breakpoint to appear in the2:07browser. So 810 means show this layout2:10when the viewport width is larger than2:12810 pixels. Unless and until we hit the2:15next larger breakpoint. Since our next2:18larger desktop breakpoint is 1,2002:20pixels, the desktop breakpoint will2:22appear at or above a 1200 pixel viewport2:25width. But the tablet breakpoint will2:27appear when the viewport is even just2:29one pixel smaller than that or 11992:32pixels. In fact, you'll see the number2:351199 next to tablet because despite2:38starting at 810 pixels, it'll reach its2:41limit at 1199, then switch over to the2:43desktop breakpoint one pixel later. When2:46I create my phone breakpoint, you'll see2:48the same thing going on next to the word2:50phone. And with tablet now sitting2:53between both a larger and smaller2:55breakpoint, it now shows the range2:57between its upper limit and its lower2:59limit. Okay, mental model number one out3:02of the way. Now you know what the sizes3:04of breakpoints mean and how they relate3:06to layout switching over in the browser.3:09Now it's time to talk about the3:10mechanics of editing things between3:12breakpoints in Framer. You may have3:15noticed that our breakpoints look like3:16they all share the same content and3:18that's because they do. But the desktop3:20breakpoint is the boss. If you think of3:23a page like one giant component, the3:25desktop breakpoint is the primary3:27variant. And the other breakpoints are3:29variants where we can override things.3:32We can override layout properties, style3:34properties, component variance, and even3:36layer order or visibility. But3:38ultimately, every breakpoint always3:40shares the same elements. And again,3:43since the desktop breakpoint is the3:44boss, any changes we make there get3:47inherited by the other breakpoints. But3:49those changes don't continue to cascade3:51down. If you override a property on the3:53tablet breakpoint, for example, it won't3:55have any effect on the phone breakpoint3:58and vice versa. Now, let's actually get4:00in here and make some changes to4:02optimize this layout for each4:03breakpoint. So, now on my canvas, I've4:06got my three breakpoints. And I want to4:07start with optimizing the tablet4:10breakpoint. And then we'll move on to4:11the mobile breakpoint. And you can see4:13here when I select a layer on this4:14tablet breakpoint, you can see a little4:16shadow outline around this same4:18selection on the other breakpoints,4:20which is further evidence that this is4:22the same element. It just happens to4:23show up on all three breakpoints. It4:25shows up on every breakpoint. But I'm4:26going to press command two to zoom in on4:29my selection here. I'll zoom out just4:30ever so slightly. And let's start by4:33fixing the layout of these four cards4:36which are laid out horizontally in four4:38columns that work great on the desktop4:39breakpoint but are starting to get a4:40little crunched on the tablet4:42breakpoint. So what I'm going to do is4:44just reduce the number of columns from4:46four down to two. And now you can see4:48the word columns actually turned blue4:50and that indicates that this property4:52has been overridden. that this property4:54differs on this breakpoint from the4:56desktop breakpoint. And I can actually4:58click on that label and reset that5:00override at any time if I choose to. So5:02all these adjustments are very5:04non-destructive. I'll point out again5:06while we're here that this change that I5:07made to the tablet breakpoint did not5:10cascade down to the phone breakpoint.5:11These overrides are completely separate5:14between the two. So, while we're here5:16looking at the phone breakpoint, I'm5:18going to select that same frame, and I'm5:20going to reduce the columns from four5:22all the way down to one. And that's a5:24pretty common thing, reducing a four5:26column or three column or even two5:28column layout down to one column on5:30phones because they're so narrow. The5:32other way we could go about this is just5:34by switching it from a grid to a stack5:36and making it a vertical stack. Pretty5:38much the same effect since we're only5:39distributing these things on one axis5:42instead of two. A grid is kind of5:43overkill. And to further improve things5:45here on the phone breakpoint, I'm going5:47to come up to where our hero image is.5:49And the padding is pushing in on the5:51hero image and making it smaller than it5:54needs to be. This image could and5:55probably should fill the full width of5:57this narrow viewport that we have5:59available to us. So I'll select its6:01parent frame that has the padding on it.6:03That's the section itself. And this6:05right padding I'm going to reduce from6:0640 down to zero. And same with the left6:09padding from 40 down to zero. And that6:11does right by the image. But the text up6:13above does get wider than I want it to.6:15Which is fine because if I click on this6:17text box, you could see here that its6:19parent is this text lockup frame. And6:22that text lockup frame could have that6:2440 pixels aside padding instead of the6:26entire section having it. So I'm going6:28to add the 40 pixels here and left6:31padding. And now we're kind of back6:32where we started with the exception of6:34this little issue where we have rounded6:36corners for a full width image which is6:39kind of weird, kind of awkward. We don't6:40want rounded corners if we're going full6:43bleed, so to speak, off the edges. So,6:45I'm going to select this image, find our6:47corner radius down here, and I'm going6:49to reduce that down to zero. That now6:52looks much more natural with the edges6:53being flush from top to bottom. Another6:56thing I'll point out is if you want to6:57reset all of the overrides for a6:59particular layer, rather than clicking7:01on it and going and looking for all the7:03blue labels and resetting them one at a7:04time, you can rightclick on the element7:06itself on the canvas and choose reset7:09overrides. Another option you'll see7:11here is update primary. And I want to7:13show you what that looks like real7:14quick. Let's say for this little tag, we7:16wanted it to be more of a pill shape.7:18Right now, the corners are pretty7:19rounded. It's kind of somewhere halfway7:22between a rounded rectangle and a pill7:24shape. So let's say we want to go all7:26the way and just bump up this radius7:29super high so that we get that7:30pill-shaped button. Now that is7:33overriding the property for this7:34particular breakpoint. So only the phone7:36breakpoint has that pill-shaped button7:39now. And I might realize that after I've7:41done it and say, "Oh, I should have done7:42that on the desktop breakpoint so that7:44it would get inherited on all of the7:46breakpoints." But it's not too late. We7:48can just rightclick and we can choose7:49update primary. And now if we look at7:52any other breakpoint, here's tablet.7:54We've got that pill-shaped rectangle.7:56And then if we go all the way over to7:57desktop, here we go. We got that7:58pill-shaped rectangle. So now it's as if8:01I made that change to the desktop8:02breakpoint. Even though I accidentally8:04made it to the phone breakpoint, it's8:06never too late to fix something like8:07that. Back over here on the phone8:09breakpoint, another thing that we can8:10override is the order that layers8:13appear. I can just click and drag this8:15layer to put it in a different place in8:17the stack. And that actually did not8:19affect any of the other breakpoints. It8:22is technically a property. Even though8:24the layer order doesn't appear on the8:26properties panel, it's still a property.8:28And more specifically, it's a property8:30of the parent frame. So if I press8:32escape to select the parent frame, I can8:34rightclick and you'll see here reset8:37order override. And we're back to8:39normal. And beyond overriding the order8:41of layers, we can override whether or8:43not they show up on the breakpoint in8:45the first place. So, if I select my8:46little tag at the top here, sure,8:48visibility is a property that I can8:50override here on the properties panel.8:52But I could also just tap the delete key8:53on the keyboard, cuz like I said8:55earlier, the desktop breakpoint is the8:57boss. You can add and delete layers from9:00the desktop breakpoint, and they add or9:02delete from all of the other9:03breakpoints. But anything we do on a9:05breakpoint that is not the desktop9:07breakpoint is just going to be an9:09override. So, while it looks like I9:11deleted it, I actually just overrode the9:13visibility. And you can see here on the9:15layer list, it's still there. It's9:17grayed out. And if I select it, it's9:19really just the visibility property that9:21has been toggled from yes to no. And I9:23can reset that at any time by switching9:25it back to yes or by resetting the9:27override. It's probably not ideal to get9:30in the habit of using the delete key to9:32hide things on breakpoints that aren't9:33the desktop breakpoint cuz occasionally9:35you will be working on the desktop9:37breakpoint. You'll forget, you'll hit9:38delete, and you'll actually delete9:40something. So, it's probably good to9:41commit to memory the keyboard shortcut9:43command semicolon on a Mac or control9:46semicolon on a PC, which will toggle the9:49layer visibility without accidentally9:51deleting anything. If you make a total9:53mess of a breakpoint and you just want9:54to start over, you can always just9:56delete it and then add it again. As long9:58as it's not the desktop breakpoint, of10:00course, because remember that's the10:02primary breakpoint where your layers10:04actually live. A little trick I'll give10:06you is that the add button actually10:08copies over the overrides from the10:11specific breakpoint you click it on. So10:13I can add a phone breakpoint from the10:15add button here on the tablet breakpoint10:17to copy over the overrides we made there10:20or click it from the desktop breakpoint10:22to get a totally fresh start. But I'm10:24going to hit undo a few times to get10:25back to where we were.10:27It's awesome being able to see all of10:29our breakpoints side by side, but it's10:31also great to preview how things will10:33behave in the browser and see the magic10:35happen. I'm just going to press command10:37P on my Mac to switch to preview mode.10:40And then here in the preview window, I10:41can grab the handles to drag the10:43viewport like I usually do. And you'll10:45see that as soon as I cross those10:47thresholds from one breakpoint to10:48another, the layout switches10:50automatically, which is exactly what'll10:52happen in the browser. We can also10:54switch between our breakpoints by10:56clicking up here on this drop-own menu10:58and choosing the specific breakpoint11:00that we want to jump to. And it will11:01jump to that breakpoint at the size that11:03it appears on the canvas. So we don't11:06have to drag things into a specific11:07position or type a number here in the11:09width field. And then you also may have11:11noticed there is a next button and a11:13previous button to just cycle through11:15our break points. Or you can use the11:17keyboard shortcuts which are command11:18period and comma on a Mac or control11:21period and comma on a PC. And that'll11:23let you just quickly cycle from11:25breakpoint to breakpoint again at the11:26size that these appear on the canvas.11:29Each breakpoint also has its own preview11:32button to jump directly into previewing11:34at that particular viewport size. Let's11:37head back to the design canvas and talk11:39about this text for a sec. Specifically,11:41this main heading that's looking a bit11:44too large on the phone breakpoint. With11:46regular text layers, you can of course11:48override the size like any other11:50property. But when you use text styles,11:52you can define how the text responds to11:54breakpoints within the style itself.11:56That way, anywhere you use that style,11:59it'll always adapt to different viewport12:00sizes without having to worry about it12:02page by page, layer by layer. We looked12:05more deeply at text styles in a previous12:07lesson, but we skipped over this12:08breakpoint section at the bottom. All we12:11need to do is click add breakpoints and12:13boom, we get a large, medium, and small12:15breakpoint. Each of which have their own12:18settings for size, letter spacing, line12:21spacing, and paragraph spacing. In fact,12:24this min width field here actually lets12:26us set different points for the text to12:28change size than the break points that12:30we're designing on the canvas. For my12:32purposes, I'm just going to leave the12:33large size at 1200 to match my desktop12:35breakpoint. My medium I'll leave at 810,12:38but I'll keep the size reduced to 48.12:40And small is going to go from 809 all12:42the way down to zero. So, I'll leave12:44that alone. But I think I want to make12:46this text even smaller and bring it down12:48so that it fits on two lines at perhaps12:5134 points. I'm going to do the same for12:54this textile here because in my opinion,12:56now that we've reduced our H1 heading12:58down, this subheading looks much too13:00large. So, I'm going to come down here,13:02do the same thing, edit the text style,13:05add break points, which automatically13:07adds a smaller size for the medium and13:09small break points. And if I'm happy13:11with that, I can leave it alone. Or I13:13could say, you know, let's increase this13:14to 16. But I thought 14 actually looked13:17pretty good, solid defaults. And then13:19when we go back to the preview window,13:21we can see that the text changes size13:23between desktop, tablet, and mobile,13:26just as expected. for elements like our13:29navbar and footer that live within a13:31layout template. We set up break points13:33for those things within the layout13:35template itself. I can jump straight13:37into the layout template by13:38doubleclicking on the navbar which is13:41part of the layout template. And here13:43within the layout template, you could13:44see that I only have one breakpoint. So13:46I'm going to do the same thing again13:47that I did earlier. I'm going to click13:49the plus sign, add my default tablet13:51breakpoint, click the plus sign again,13:53and add my phone breakpoint. And one13:55thing you might notice here is that our13:57navbar looks a little bit different13:59because our navbar is a component and14:02within that component we have several14:04variants and one of those variants is14:06called phone and when you have a variant14:08called phone and you create a phone14:10breakpoint it automatically switches to14:12the variant called phone. Framer is just14:14trying to help you out there. But if I14:16go back let's say this didn't happen14:17automatically. What's happening here is14:20that on the properties panel for this14:22particular breakpoint, the variant is14:24just being overridden from desktop to14:26phone. So you could also accomplish the14:28same thing manually regardless of how14:30you've named your variants. Now let's14:32zoom back out. Our footer is the next14:34glaring problem. So the first thing I'm14:36going to do before I start working on14:38these is I'm going to stretch these out14:40and make a little extra room for myself14:42because when you're working on a layout14:43template, we're working with a fixed14:45height preview of the breakpoint frame.14:47So, we got to make enough room for14:48ourselves to work. So, let's zoom in14:50here on the tablet breakpoint and see14:53what we're dealing with. It looks like14:54our links are really the problem. We've14:57got a collision going on here. These14:59links are fitting the content and the15:01content just happens to be so wide that15:04it starts to go off the screen. So, not15:06good. And there are a few ways around15:08this. We could change this from a stack15:10to a grid. So, that way we can have two15:13axes here where we have two columns and15:15two rows. That actually kind of solves15:17the problem. Or leaving this as a15:19horizontal stack, we could just enable15:21wrap. And because we have fit size15:24turned on, it's going to clamp down as15:26tightly as it can, which squishes15:28everything down to one column. So if I15:29switch this to fixed, I could also just15:31make this a bit wider until two columns15:33fit. And I can leave that as is. And you15:36might be thinking, okay, fixed, that's15:38kind of inflexible. But because what15:40we're seeing here on the canvas is the15:41minimum size of this tablet breakpoint,15:43we know that these things are never15:45going to collide. Now, let's look at15:47what's going on with the phone15:48breakpoint, which is a bit more15:50constrained. I'm going to head down15:52here, and things are definitely getting15:54pretty squashed. And if we look at the15:56parent frame for our footer, frame15:58actually tried to do us a favor here and15:59override the direction from horizontal16:01to vertical, cuz horizontal is obviously16:04not going to work for a viewport this16:05narrow. So, it switched it to vertical16:07for us. And you may have seen the height16:09of this just jump. And that's because we16:11have a bit of a conflict here with the16:13sizing properties of the layers inside16:15of this frame versus the properties of16:17the frame itself. And it all starts here16:19with this space between. We're telling16:21things to occupy the available space.16:24And then we also have the height of the16:25frame clamping down to the layers that16:27are within it. And then we also have16:29some layers within the frame that are16:30trying to expand to fill the height of16:32it. So, we've got some conflicts going16:35on now that we're dealing with this one16:37vertical axis. So, I'm just going to16:39switch distribute to start. So, that way16:41we can take control over the gap here.16:43And I'm going to set this gap property16:46to 80. And the frame that caused that16:48layout to jump was actually this one,16:50the info frame, which you can see has16:52now become a fixed height. On the other16:54breakpoints, this is actually set to16:56fill the height, which is only possible16:57because we have the nav links next to it16:59that are kind of propping up the height,17:01acting as sort of like a structural17:03scaffolding, almost like a piece of wood17:06propping up the height of the footer so17:08that it doesn't collapse when we set17:10this to fill it. So, now that we're17:12dealing with a vertical layout, the fill17:14height really just doesn't make sense17:16anymore. So, we've got to go with fixed.17:17Or I can switch it to fit to clamp this17:20down. And then I can add the gap back in17:23to get things looking kind of the way17:24they were before. And this will give us17:26the opportunity for those social icons17:28to get pushed out of the way if that17:29text needs to reflow. And let's also17:30make sure that the text is able to17:32refflow cuz right now we've got the17:34width of this frame clamping down with17:36fit sizing. I'm going to make that fill17:38the viewport instead. And then the text17:41box. Same thing. We've got a fixed size17:42on this text box. So, it's not going to17:44refflow on wider phone view ports unless17:47I come over here and set this to fill as17:50well. Then, we pretty much just got our17:52nav links down here to worry about. So,17:54much like I did on the tablet17:55breakpoint, I can just turn on wrap. So,17:56when these run out of width, they'll17:58just fall down to the next line, one18:00after the other. And because we're18:02filling the full width in a single18:03column, I'll change the width of this18:05parent frame to fill. So that way, these18:07links can take full advantage of the18:09width that they have available to them.18:10If two fit side by side, they'll end up18:13side by side. If two don't fit side by18:14side, then we'll get a single column.18:16So, let's actually preview that and see18:18what it looks like. I'll press command18:19P. And there we go. On a wider mobile18:22phone, we get more columns. On a more18:24narrow mobile phone, we get fewer18:26columns. But the one thing that we can18:27count on is that nothing will get cut18:29off. And there you have it. Now you know18:32how break points allow us to make more18:34drastic adaptations to different18:36viewport sizes and device types, which18:39you can combine with the fluid layout18:40techniques from previous lessons to18:43create smoothly responsive sites that18:45look and work beautifully at any size.18:48That's it for this one. I'll see you in18:50the next one.
More in this topic
4:198 Framer shortcuts you're probably sleeping on
Layout & Design3K views · 2 months ago
2:16Framer Update: Stack Sorting and Bento Grids
Framer Update7K views · 2 months ago
3:41Sharing Vector Sets Across Projects (Vectors Lesson 7)
Layout & Design1K views · 3 months ago
3:38Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)
Layout & Design2K views · 3 months ago
4:25Animating Vectors in Framer (Vectors Lesson 5)
Layout & Design4K views · 3 months ago
4:59Customizing Vectors with Variables in Framer (Vectors Lesson 4)
Layout & Design3K views · 3 months ago
1:39Replace component instances site-wide in Framer
Layout & Design4K views · 4 months ago
6:58Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)
Layout & Design3K views · 4 months ago