Zero Block: Responsive Design

Zero Block has two workspaces that are called containers. The grid area is called the Grid Container, while the Window Container is an area that indicates the boundaries of the browser screen.

The Grid Container is the main workspace. It has the same grid as Tilda. If you place elements inside the Grid Container, they will be inside the twelve-column grid regardless of the screen size.

On the X-axis, the Grid Container is always centered.

The same happens with the versions for different devices: when you switch between screen types, the width of the Grid Container becomes 980, 640, 480, 320px, it remains fixed and centered.

You can set the Grid Container's height in the Artboard Settings or by dragging the container up/down with your mouse. You can set a unique Grid Container's height for each resolution. The Grid Container's height is the block's height.

If you want a Zero Block to always occupy 100% of the screen height, you need to set the Window Container's height to a different one than the Grid Container's. So, you need to set the Window Container's height to 100% in the Artboard Settings.

After that, select the Grid Container's alignment on the screen: Top, Center, Bottom, or Stretch. It's centered by default.

By default, all elements are attached to the Grid Container and the origin is in the upper left corner.

Sometimes, you need to attach an element not to the grid but to the screen. For example, you want the logo to be fixed in the upper left corner on all screens.

To do this, open the Settings panel of the element and change the container type to Window Container. The origin will shift to the top left corner of the Window Container.

Now the logo will be in the upper left corner of any screen.

If you want to attach an element, for example, to the upper right corner, you can use the same method: select "Window Container" and set the origin of element coordinates as follows: X—right, Y—top.

Each element in the workspace has its own coordinates that indicate its position to the origin on the X-axis and the Y-axis.

Select an element, open the Settings panel by pressing the Tab key, and you will see the element's coordinates at the very top of the panel.

The default origin of all elements is in the upper left corner of the Grid Container. But it can be moved and placed in one of the nine points of the rectangle: right, top, bottom left, etc.

To change the origin's location, open the +Container panel (by default, it's minimized).

We provided for the elements' size to be also set in percent. So, you can create "fluid" elements that change size depending on the browser window.

For example, you would like half of the screen to always be yellow. To do this, add a shape and open the Settings panel of the element. Set the container type to Window Container, change the units of measure for width and height to percent instead of pixels, set the screen width to 50% and the screen height to 100%. You can also set axis values in percent. If you want the element to always occupy the right half of the screen, set the X-axis value to 50%.

The video shows that the right side of the block always occupies half of the screen.

By default, all elements are attached to a Grid container. This is a rectangle with a width of 1200 pixels on the desktop. It is always centered on the screen and has the same size, regardless of display width.

With Auto Scale, you can scale all elements that belong to the Grid container in proportion to the width of the screen or browser. The Grid container will not occupy a fixed width of 1200 pixels, but will stretch to the full width of the screen. All added elements will be proportionally enlarged to take up the entire screen.

To enable automatic scaling, open the artboard settings and find the Scale Grid Container option. Select the Autoscale to Window Width option and save your changes.

This setting will adapt the site design for any resolution, including HD screens. The option will help to avoid unnecessary empty space on high resolution screens, as well as speed up the design workflow - you won't have to waste time on the adaptive layout.

If necessary, you can set automatic scaling for all screen types e.g. only for mobile devices by setting up only a certain screen width range. The container of the desktop version zooms from 1200px to 1920, 4K or even 6K. The mobile version increases in size from 320px.

The block height will be dynamic: it will change in proportion to the width when you scale the block.

Buttons: To keep the button at the desired distance from the borders of the browser window, but not to scale at different resolutions, set coordinates for it in Window Container. Use binding to different containers to scale some elements within the same block, and to leave some elements with a fixed distance from the browser edges, but without resizing.

Images: Be careful when uploading images: they should be the right size so that they don't lose quality when scaled for larger screens.

Use vector images in .svg format for icons, and load background images and photos with reserve. When you upload a large image, its width is resized to 1680 pixels by default, but if you click on the gear icon when uploading, you get the option to upload a 1920px large-side image. Toggle the "Allow to upload up to 1920px" toggle switch and upload the files. Images larger than 1920px cannot be uploaded because that size will affect browser performance and website loading speed.

Let's try to create a cover with the following features:

— The background image occupies the whole screen.
— Headline, subhead, and button are always centered.
— The down arrow is fixed at the bottom of the screen.

Let's look at what we've got: the background image occupies the whole screen; the headline, text, and button are centered; the arrow is at the bottom.