Making Responsive Design even Easier

Max Koehler

Having control over almost all module settings at different breakpoints might be one of the most important features we have to offer. Today we’re happy to introduce some changes to interface and functionality that we think will make testing your designs at different resolutions and changing things at various breakpoints a lot easier and quicker. We’ve been working on this for a long time.

More Breakpoints!

The main reason we’ve only been offering three breakpoints in addition to the default desktop resolution was to encourage people to design for general device categories like “Tablet” or “Phone”, rather than specific models like “iPhone 6s Landscape”.

We still think that that’s the right approach, but we also understand from our own experience and from user feedback that especially with more complex layouts, you need some more fine-grained control. That’s why we’re introducing three additional, custom breakpoints, making a total of six.

You can enable them from the breakpoint settings and set them to any resolution you might need.

Breakpoint Configuration

Introducing the Breakpoint Ruler

With more breakpoints, managing and keeping track of all of them from the right sidebar became difficult. So, we looked for a more visual and cleaner way to represent breakpoints in the interface and came up with the all-new breakpoint ruler. Check out the video below to see it in action.

Every breakpoint will show up as a colour-coded section in the ruler on top of the preview window. Left-click any of them to set the preview window to that resolution. Left-click the grey area to the right of the breakpoint sections to get back to the default desktop resolution.

What do you think?

What do you think about the changes? How many of the six breakpoints are you going to use, or do you wish there were even more? Let us know on Twitter @rukzukfacebook or via email at

Built with pride in rukzuk © 2018 rukzuk AG