Freehand

Freehand is an underlying technology build into the core of Blocs, it delivers a more visual way to size and position elements on the design canvas. When freehand controls are used to edit elements, custom classes are automatically written in real-time that contain the relevant values based on the type of freehand control that is being interacted with. This delivers a design experience that feels more free form, but still respects the key values of responsive web design and the CSS box model.

Size Controls

When a Bric element is selected on the design canvas the active marker that highlights the Bric element may contain freehand editing controls. These controls let you set the selected element width, height or corner radius by simply dragging them.

The type of freehand controls made available is dictated by the type of element that is selected. For example, a button will give you access to the width, height and corner radius freehand controls, but, a text element such as a paragraph will only give you access to the width freehand control. The reason for this is to prevent values being applied to elements that either typically do not require them or should not have them applied.

Margin Controls

The margin freehand controls are initially hidden when an element is selected. Pressing and holding the key, will reveal them. Dragging these controls allows you to freely move and adjust the element on the design canvas.

Beginners Tip

It’s also possible to switch to another break point and customise the relevant freehand control values for that specific screen width.

Manually Assigning Freehand Classes

When a freehand canvas control is interacted with, a freehand class is automatically generated and assigned to that Bric element, (unless it already has one). However, it is also possible to manually assign a freehand class to a Bric element. To manually assign a freehand class, navigate to the chevron symbol that is located to the right of the class field title in the sidebar inspector and left click it. This will list all of the classes for the currently selected element, allowing you to select which one you would like the freehand values to be written to.

When a class is set as the freehand class for a Bric element its tag token will appear highlighted in the sidebar inspector class input field.

Beginners Tip

Freehand classes can also be copied and pasted onto multiple elements, making it easy to style more than one element at a time.

Updated on 29th November 2018

Was this article helpful?

Related Articles