Brics are individual user interface elements that we use in order to make up our web page design. Images, buttons, icons, headers and many others are all classed as Brics within the Blocs application.

Selecting Brics
To select a Bric, simply Left Click the Bric when in design mode. Once a Bric is selected a small blue marker will be displayed around the Bric, this indicates the Bric is now selected. When you have a Bric selected, it’s also possible to quickly select the Bric above using the keyboard shortcut ⌘+↑, the Bric below using ⌘+↓, the Bric to the left using ⌘+← and the Bric to the right using ⌘+→.

Moving Brics
You can move any selected Bric up the layout stack using the keyboard shortcut ⌘+⌥+↑ and down the stack using ⌘+⌥+↓. You can also move Brics across into neighbouring stacks using the keyboard shortcut ⌘+⌥+← or ⌘+⌥+→.

Alternatively, you can also drag and drop any Bric from one location to another. When you are dragging a Bric, a blue drop marker will appear in the stack at the location that the element will be placed. When you release the mouse button the Bric will be moved.

Scale Nudging
When a Bric is selected it’s possible to quickly nudge it’s scale up using the keyboard shortcut ⌥+↑ and down using the keyboard shortcut ⌥+↓. This is useful when formatting text.

Align Nudging
When a Bric is selected it’s possible to quickly nudge the alignment of a Bric left using the keyboard shortcut ⌥+← and right using the keyboard shortcut ⌥+→. This is useful when formatting text or positioning Brics such as buttons.

Duplicating Brics
To duplicate any Bric, first select it and then use the keyboard shortcut ⌘+D, alternatively you can also duplicate a Bric by right clicking it and selecting Duplicate from the contextual menu.

Deleting Brics
There are many ways to delete a Bric from a page, the most efficient way is to right click the Bric and select delete from the contextual menu. An alternative option is to use the keyboard shortcut ⌘+Backspace.