How Does Responsive Design work in Amaze?

Overview

Amaze can be used to create responsive designs. Responsive designs automatically adjust as the size of the viewport (the space where your Amaze page is displayed - the Live Preview window or on an actual device) changes. 

 

Responsive

Amaze does not use CSS grids or flexbox for the layout. Instead, elements are positioned absolutely, and pinning, layout and scale settings dictate how they will position and scale (if at all) on different viewport sizes.  You can manually override all settings by toggling on Advanced Responsive on the Object tab in the right inspector. 

 

The following principles can be applied to individual layers or groups of elements.

• The element can be pinned to the top or bottom and the left or right.
• This position can be expressed as an absolute pixel value, a percentage of the viewport width, or a percentage of the viewport height.
• The item’s scale can be expressed as an absolute pixel value, a percentage of the viewport width, or a percentage of the viewport height.
• In addition, items can scale on both dimensions but will not maintain aspect ratio. Forimagesin this scenario, the user can set whether that imagecovers, fits or is stretched to the item’s container.

How Responsive Works in Practice

The layout of elements on the workspace is the starting point for all calculations. All relative units are based on that design. In other words, if the viewport on the device is exactly the same as that design, it will look exactly the same as the workspace, no matter what responsive settings the user has.

Only if the viewport of the device is different, the design will adjust. For example, on a 375x667 (iPhone 7) mobile design, say there’s a 300x150 image that’s set to scale by width and pinned top/left by vw. It’s 10 pixels from both the top and left. On a 411x731 device (Pixel 2), that image will be (approximately):

• Width: 80vw = 328px
• Height: 40vw = 164px
• Top: 2.6vw = 10.68px
• Left: 2.6vw = 10.68px

Unpinned Items

When an item is “unpinned”, we use a (CSS) calculation to keep the center point of the object the same relative distance to the (top/left) edge that it is in the original design.

Default Settings

The default settings are as follows: items on the root level are scaled by width and unpinned (see above). Items in folders are scaled by width and pinned top/left by vw. Note, that in Famous folders are translated directly into DOM and become <div> tags. A special case is scrolling screens. In this case, all items are scaled by width and pinned top/left vw.