Start a new topic

Inverted breakpoints

The way breakpoints work now kind of requires you to work from large to small, to start with a desktop or tablet version and then modify down to phone size. A lot of the work I'm doing starts with the phone and then gets expanded upward to other devices.

Is it possible to make "Default" be 0-320 (or even 0-∞) and then layer modifications for larger sizes on top of that?

Yes, that would work too. In fact, in the tutorial, the states are in place before the large version is designed.

That's not a bad way to approach it. It does require careful orchestration of when you start working on the breakpoints, but that's true the way we're doing it too.

The reason I've been trying to set up my breakpoints in advance is there are a couple of us trying to share widgets and documents. In order for all the responsiveness to work, we need to agree on all the values up front, as far as I can tell. It's a lot easier to start from a common document with breakpoints and template screens already set up.

(Speaking of which, I'd love to be able to define my own template docs, but it looks like your templates are more complex than just "drop your document in this folder and it's a template".)

Our current plan is to start with the the breakpoints set up, but do initial work in Default, even though the breakpoint for it is far above the size we're starting with. When we reach the point where we're satisfied with the small version, we flip the breakpoint on and then start making changes for larger devices in Default. Will that work? I think it should behave roughly the way you suggested, but with the breakpoints already in place and agreed upon. 

You can add breakpoints at any time. So if you start in the default breakpoint, which is always 0-∞, and want to design the larger version, you just add a 0-320 breakpoint. 

Then you have to activate states for this breakpoint so that the widgets keep their styling. 

If you go to the 321-∞ breakpoint (which is then the default) you can make changes to the widgets in this breakpoint. 

In the responsive design tutorial we did it that way The creation of breakpoints starts at around 4:00.

Login or Signup to post a comment