Add support for multiple device and responsive design

[MikaelPorttila]

Hi,

A feature request for an already great tool: The option to design for multiple device sizes and orientations at once and then the choice to export all the needed responsive styles.

[patak-dev]

Thanks for your interest in the project! We discussed this feature a few times in the past. It would be very useful. It is not that easy to add though, but let's use this issue to track future progress.

[krekosiewicz]

@patak-dev I'd like to work on this issue to improve my Vue.js skills, as I have barely used this framework in the past.

I've created a couple of mockups in Figma to ensure I correctly understand the scope, and to include some of my thoughts about responsiveness based on my past experience.

This is the default view. I've trimmed the top a bit and added tabs with two actions. Some elements are blurred, but in the final merge request, they should rather be display: none until a custom breakpoint is added. Apart from this toolbar, there should be no changes to the UI in non-responsive use cases.

In the top toolbar, there are two actions: one for adding an additional breakpoint, and another for switching between mobile and desktop orientation. I really like Tailwind's mobile-first approach; in my opinion, it saves time and results in fewer orphaned styles long-term. I'd like to set mobile-first as the default option.

We need to display an extra set of rules, such as:

// Device names
$mobile: 'mobile';
$tablet: 'tablet';
$smDesktop: 'small-desktop';
$desktop: 'desktop';
// dynamic 

// Breakpoints
$breakpoint-mobile: 420px;
$breakpoint-tablet: 668px;
$breakpoint-small-desktop: 992px;
$breakpoint-desktop: 1200px;
// dynamic 

// Media queries MOBILE FIRST
@mixin respond-to($breakpoint) {
  @if $breakpoint == $mobile {
    @media (min-width: $breakpoint-mobile) { @content; }
  } @else if $breakpoint == $tablet {
    @media (min-width: $breakpoint-tablet) { @content; }
  } @else if $breakpoint == $smDesktop {
    @media (min-width: $breakpoint-small-desktop) { @content; }
  } @else if $breakpoint == $desktop {
    @media (min-width: $breakpoint-desktop) { @content; }
  }
}

or

// Device names
$mobile: 'mobile';
$tablet: 'tablet';
$smDesktop: 'small-desktop';
$desktop: 'desktop';
// dynamic 

// Breakpoints
$breakpoint-mobile: 420px;
$breakpoint-tablet: 668px;
$breakpoint-small-desktop: 992px;
$breakpoint-desktop: 1200px;
// dynamic 

// Media queries DESKTOP FIRST
@mixin respond-to($breakpoint) {
  @if $breakpoint == $mobile {
    @media (max-width: $breakpoint-mobile) { @content; }
  } @else if $breakpoint == $tablet {
    @media (max-width: $breakpoint-tablet) { @content; }
  } @else if $breakpoint == $smDesktop {
    @media (max-width: $breakpoint-small-desktop) { @content; }
  } @else if $breakpoint == $desktop {
    @media (max-width: $breakpoint-desktop) { @content; }
  }
}

In fact, this is the first result when searching for "mixin, responsive, multiple devices." I’ve noticed that media queries often become problematic in commercial projects. I believe this approach is good enough to share with any Layoutit user, but if you know of a cleaner or more universal strategy to handle breakpoints, please let me know.

If the user creates a custom breakpoint, they should be able to set the width threshold in the leftbar or at the bottom of the view container (as vertical dimensions are less common, I'd like to ignore them in the first implementation).

This image shows where we can display the respond-to mixin (ideally, it should be suggested to place it in a separate file).

This image shows that breakpoints have been added and are being handled by the mixin from the previous screenshot.

futher improvements

App should have some sort of width validator/warning that will inform user if current breakpoint "overlapping" another one

The mockups are just PoC of how this feature can look like. I've reproduced app in Figma to make this raw roadmap