Beta 1: "All sizes" can be expanded only to 479 px?

Beta
#1

Hi!

I understand the logic of the mobile-first approach, where mobile view is also a base for all sizes. But along the line of my other thread, I believe that “All sizes” should also mean a preview of all the sizes. Otherwise it will get confusing to many and pretty hard to work desktop-first.

I am not sure what would be the best way of implementing this, but If a user sees “All sizes”, he should be able to drag the preview to see all the sizes. Maybe another icon, where one represents the mobile range of views, and the other one is all sizes preview?

Thanks!

1 Like
#2

This label is a bit confusing…
it seems to be for 479 and below from how it works.

The other thing I have noticed here is that if I edit the value on “all sizes” it changes the value of the 480 and up but it does not change any of the others. From the label I almost expect that it would be a way to override all the other breakpoints back to a default value of our choosing.

With the above in mind it would be awesome to have a way to set all the break point back to a single value for whatever we are editing.

1 Like
#3

Ok, I have missed the fact that if the responsive icons don’t have a blue highlight, it means the design is going to be applied to “All sizes”. That makes more sense, but there will be some confused users like I was at first. :slight_smile:

#4

Howdy, @Misho and @urchindesign!

I hear what you’re saying @Misho. When clicking the “base” breakpoint (which is our XS due to the fact that we are mobile-first), it’s applying the styles set at that value to “All Sizes,” but visually it’s mobile in appearance, so their might be a disconnect for some users. Keep in mind that from the Release Notes, there’s a couple things to be aware of:

  • When no responsive icon is selected in the Toolbar, any value updated is being applied to the “base” styles (mobile-first on up).
  • When clicking on a responsive icon in the Toolbar, it is setting the “current” value for that breakpoint and anything above it, unless it is further overwritten up the chain. However, clicking on XS is essentially the same as having no responsive icon selected, since it’s like you’re clicking onto the base style.

To help eliminate the potential confusion from having to think in both stylistic and visual perspectives, something like this might help clear things up:

ex
ex920×222 10.5 KB

We keep with the pattern of {breakpoint) and up for each tooltip, but then we append it with a (base) label inline to help drive home the point that this is the base where styling is applied to all sizes from (along with the circle already found on the icon). That should help people understand why the viewport is resizing down the way it is, but also be aware of the fact that setting any values while on that breakpoint is the same as setting a value if no icon were selected at all.

1 Like
#5

One other thing that might also help this is to have the all sizes option highlighted and active when you create an element and go to one of the various settings. (or is that happening already?) Sorry just working from memory here.

1 Like
#6

@urchindesign, no worries! There are basically two “states” to be aware of when you’re working in the tool, both of which are outlined in the Release Notes as mentioned above. Essentially, if you have no responsive breakpoint selected in the Toolbar, it should look something like this:

getting-started-02
getting-started-02796×102 2.27 KB

The circle in the corner of the XS breakpoint represents the “base” value where if you’re not responsive, the core styling is getting applied. The blue highlighted icon in this instance represents the breakpoint you are currently viewing. When you see your Toolbar in this state, you are not styling anything responsively. Anything you change is getting applied to the “base” and applied to all breakpoints. If you were to resize your browser directly in this mode, you would see the blue highlighted icon moving from breakpoint to breakpoint, simply helping you to understand what breakpoint you’re currently seeing, but again, this does not mean you are applying responsive styling.

Once you have selected a responsive breakpoint in the Toolbar, you will see this type of status:

going-responsive-01
going-responsive-01796×102 3.53 KB

When you see this active state with the blue background and white icon, this means that responsive styling is activated. Only when this state is present, does it mean that you are overwriting something on that breakpoint. So in this example, we can see that the LG breakpoint is selected. This would mean that any changes we make to anything right now will only affect LG and up. If you were to resize your browser around while in this state, you would see this style moving around and it means that responsive styling is still active. So any changes you make on any breakpoint while you see this style means it’s affecting that breakpoint and up. Only once you deselect that toggle to go back to the previous, then you will be back in the “All sizes” mode which is just applying any changes to the base breakpoint.

These two states basically function as the way of knowing whether you’re applying something to “All sizes” or a specific breakpoint on up. Hopefully that helps to provide a little more context on things!

1 Like