Zero Block: Responsive Design

The second part of the guide is dedicated to more complex setting related to responsive web design. The main, basic settings and features of Zero Block editor were reviewed in the first part.
You are here!
Scroll down to read
1
"Container" definition
Zero Block has two working spaces or two "containers": Grid Container and Window Container — conventional symbol of the boundaries of a browser screen.
Grid Container and its position on X-axis
Grid Container is the main workspace. Grid Container has the same grid as Tilda. If we place elements inside Grid Container they will be positioned in a 12 column grid regardless of the screen size.

On X-axis Grid Container is always positioned in the middle.
The same happens with versions for different devices: when switching between screens the width of Grid Container changes to 980, 640, 480, 320 px, it remains fixed and positioned in the middle.

Grid Container's height can be set in the artboard settings or by pulling the container up/down using a mouse. For each resolution there can be set a different height. Grid Container's height is the height of the block.
2
Containers' position in relation to each other on Y-axis
If you want your block to occupy 100% of the screen's height you need to set the height called Window Container which is different from the height of Grid Container. Therefore, you need to specify in the artboard settings 100 % height for Window Container.
After that determine the alignment of Grid Container on the screen: at the top, center or bottom. The default setting is center alignment.
3
Changing the container and origin for an element
Changing the container
By default settings all elements are attached to Grid Container and the origin is in the upper left corner.
However sometimes the element need to be attached not to the grid, but to the screen. E.g. you want the logo to be fixed in the upper left corner on all screens.

To do that you need to open the element's settings and change the type of container to Window Container. The origin will shift to the upper left corner of Window Container.
Now the logo will be in the upper left corner of any screen.
If we want to fix the element, e.g. in the upper right corner, the logic will be the same: set container to Window Container, origin to X-axis — right, Y-axis — left.
Element coordinates
Each element in the workspace has its own coordinates - the position in relation to the origin on x-axis and y-axis.

Select the object, open the settings panel and at the top you will see the object's coordinates.
The origin of all elements is by default in the upper left corner of 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 location of the origin open the panel +Container (by default it's minimized).
If you set the origin to Center Center it will simplify the work on the adaptive version for different screens.
4
Creating fluid elements
We provided for the elements' size to be also set in percent. So we get "fluid" elements which change size depending on the browser's window.

E.g. we want half of the screen to always be yellow. We need to add a shape and in the element's settings set a container — Window Container, and for the width and height change measurement units to percent instead of pixels and set 50% screen width and 100% height. Axis value can also be set in percent: if we need the element to always occupy the right side of the screen, the we set the x-axis value to 50%.
The video shows that the right side of the block always occupies half of the screen.

The settings of the yellow rectangle
: Container - Window, width - 50%, height - 100%, x-axis offset - 50%.
5
Example: creating fullscreen cover
Let's try to create a cover with the following features:

— Background image occupies the whole screen
— Headline, subhead and button are always centered
— The down arrow fixed at the bottom of the screen
1
Let's add in the artboard settings the background image and set it a feature: Window Container Height — 100%.
2
Let's set for the headline, subhead and button the origin — Center / Center and if necessary set the Y-axis offset.
3
For the arrow set the container to Window Container, origin : Center / Bottom and move it to 70 px higher. This means that the button will always be 70 px higher than the bottom corner of the browser window.
Let's look at what we've got: the background image occupies all of the screen, headline, text and button are centered and the arrow aligned to the bottom.
Made on
Tilda