How to use Breakpoints

Here we take a comprehensive look at how breakpoints work in Framer, how to use them, as well as some best practices you should follow. Let's dive into making a responsive resume website.

Starting with the Primary Breakpoint

Starting off, our design fits comfortably within a 1200 pixel breakpoint, this is also known as the primary or desktop breakpoint. At this stage, the design can seem barebone, often giving the feeling of a design tool exploration which lacks structure, hierarchy or responsiveness.

Understanding Breakpoint Inheritance and Overrides

Adding a tablet breakpoint to our design, we come face to face with the principle of inheritance in breakpoints. One of the fundamental ideas here is that any change to the primary breakpoint also affects the other breakpoints. This interaction is not unidirectional though, thanks to breakpoint overrides, we can make adjustments to individual breakpoints, without affecting the rest. And to keep your workflow running smoothly, we have the option to reset or update breakpoints as needed.

Encountering Issues and Applying Fixes

Moving our design to a tablet view, we often meet with certain layout issues such as centering and responsive design. Rather than getting caught up in the mess of trying to fix these too early, we stay focused on first setting up an overall scalable design via the primary breakpoint. A wrapping frame around the different layout layers can help maintain structure. Coupled with grouping elements using stacks and a few tweaks to layout properties, we slowly start to see improvements in the flexibility of the design. Applying all these to a phone breakpoint requires a bit of an extra effort to ensure responsiveness and rectify layout issues.

Fine-tuning the Breakpoints

Once the foundation of responsiveness and layout is set, we then concentrate on fine-tuning the tablet breakpoint while at the same time reviewing how it all comes together on smaller displays. Here we adjust widths to "fill" the maximum available space, ensuring a sleek and appealing view in the end.

The Auto-sizing Approach

While the final design is responsive and user-friendly, it could be argued that an alternative approach would be to make the page auto-sizing for added flexibility. This can be achieved by transforming the page into a stack. This offers an added degree of flexibility and makes the task of adjusting padding much more straightforward.

The beauty of working with Framer is its ability to flexibly set up and control your layouts. Remember that while the discussions and techniques we've covered are invaluable, the final touch often depends on personal preference and the specific requirements of individual web pages.