Bricksforge Terminal

A powerful tool that allows you to perform various tasks using an emmet syntax, making it faster and easier to work with the Bricks Builder. With this extension, you can add new elements to the canvas, apply multiple global classes at once, and much more - all from the comfort of your keyboard.

Bricksforge Terminal

Whether you’re a beginner or an experienced user, this extension is sure to become an indispensable part of your workflow.

How to use

To open the terminal, press Ctrl + T or Ctrl + Shift + T. You can also use the Terminal Icon added to the Bricks Builder toolbar. Now you’re ready to start using the terminal.

Add New Elements

The syntax for adding new elements is as follows:

> element-name

The arrow > indicates that you want to add a new element. The element name is the name of the element you want to add. For example, if you want to add a new div element, you can type:

> div

This will add a new div element to the canvas.

You can also nest elements by adding a > after the element name. For example, if you want to add a new div element inside a block element, you can type:

> block > div

This will add a new div element inside a block element. You can nest elements as many times as you want.

Add Siblings

You can add siblings to an element by adding a + after the element name. For example, if you want to add a new heading element after a text-basic element, which are inside a block element, you can type:

> block > heading + text-basic

This will add a new text-basic element after a heading element. These new elements will be siblings. The parent element is the block element.

The + indicates that you want to add siblings to a new element.

Add Global Classes

You can add global classes to an element by adding a . after the element name. For example, if you want to add a new div element with the bg-primary class, you can type:

> div.bg-primary

You can also add multiple classes by writing them after each other. For example, if you want to add a new div element with the bg-primary and text-white classes, you can type:

> div.bg-primary.text-white

If you want to add global classes to an existing element, you need to select it in the structure panel. Then you can add the classes by typing the class names starting with a .

For example, if you want to add the bg-primary and text-white classes to the selected element, you can type:

.bg-primary.text-white

The . indicates that you want to add global classes to a selected element.

Add Element ID

You can add a custom ID to an element by adding a # after the element name. For example, if you want to add a new div element with the ID my-custom-id, you can type:

> div#my-custom-id

The # indicates that you want to add an ID to a new element.

Add Attributes

You can add attributes to an element by using the syntax [attribute-name=attribute-value]. For example, if you want to add a new div element with the attribute data-type and the value primary, you can type:

> div[data-type=primary]

You can also add multiple attributes by writing them after each other. For example, if you want to add a new div element with the attributes data-type and data-color and the values primary and blue, you can type:

> div[data-type=primary][data-color=blue]

Add Settings

You can add every setting to an element by using the syntax {settings-key: settings-value}. For example, if you are adding a new heading and want to set the tag to h1, you can type:

> heading{tag:h1}

You can add as many settings as you want. For example, if you want to add a new heading element with the tag set to h1 and the text set to Hello World, you can type:

> heading{tag: h1, text: Hello World}

To access nested settings, you can use the dot notation. For example, if you want to add a new button with a link set to “external”,the URL set to ”https://bricksforge.io” and “Open in new tab” enabled, you can type:

> button{link.type: external, link.url: https://bricksforge.io, link.newTab: true}

How to find the correct settings key

To find the correct settings key, you can use the following steps:

  1. Select the element in the structure panel and do some settings changes.
  2. Copy the element to the clipboard.
  3. Paste the element into the text or code editor of your choice.

This way you can see the settings key and value pairs and use them in the terminal.

Common Setting Keys

Here are some common setting keys that you can use in the terminal:

  • tag – The tag of the element, e.g., h1, p, a
  • text – The text content of the element
  • link.type – The link type of the element, e.g., internal, external
  • link.url – The URL of the link
  • link.newTab – Whether the link should open in a new tab or not
  • type – The type of the element, e.g., primary, secondary
  • style – The style of the element, e.g., primary, secondary
  • stretch – Whether the element should stretch to the full width or not
  • _display – The display property of the element, e.g., block, flex
  • _overflow – The overflow property of the element, e.g., auto, hidden
  • _opacity – The opacity property of the element, e.g., 0.5, 1
  • _cursor – The cursor property of the element, e.g., pointer, default
  • _zIndex – The z-index property of the element, e.g., 1, 2
  • _width – The width property of the element, e.g., 100%, 200px
  • _height – The height property of the element, e.g., 100%, 200px
  • _widthMin – The min-width property of the element, e.g., 100%, 200px
  • _widthMax – The max-width property of the element, e.g., 100%, 200px
  • _heightMin – The min-height property of the element, e.g., 100%, 200px
  • _heightMax – The max-height property of the element, e.g., 100%, 200px
  • _padding.top – The top padding property of the element, e.g., 10px, 20px
  • _padding.right – The right padding property of the element, e.g., 10px, 20px
  • _padding.bottom – The bottom padding property of the element, e.g., 10px, 20px
  • _padding.left – The left padding property of the element, e.g., 10px, 20px
  • _margin.top – The top margin property of the element, e.g., 10px, 20px
  • _margin.right – The right margin property of the element, e.g., 10px, 20px
  • _margin.bottom – The bottom margin property of the element, e.g., 10px, 20px
  • _margin.left – The left margin property of the element, e.g., 10px, 20px
  • _visibility – The visibility property of the element, e.g., visible, hidden
  • _aspectRatio – The aspect ratio of the element, e.g., 16:9, 4:3
  • _objectFit – The object fit of the element, e.g., cover, contain
  • _objectPosition – The object position of the element, e.g., center, top left
  • _flexWrap – The flex wrap property of the element, e.g., wrap, nowrap
  • _direction – The direction property of the element, e.g., row, column
  • _alignSelf – The align self property of the element, e.g., center, flex-start
  • _justifyContent – The justify content property of the element, e.g., center, space-between
  • _alignItems – The align items property of the element, e.g., center, flex-start
  • _columnGap – The column gap property of the element, e.g., 10px, 20px
  • _rowGap – The row gap property of the element, e.g., 10px, 20px
  • _flexGrow – The flex grow property of the element, e.g., 1, 2
  • _flexShrink – The flex shrink property of the element, e.g., 1, 2
  • _flexBasis – The flex basis property of the element, e.g., auto, 100%
  • _order – The order property of the element, e.g., 1, 2

As you can see, all style related settings start with an underscore _.

Multiplication

You can multiply elements by adding a * after the element name. For example, if you want to add a new div element 5 times, you can type:

> div*5

You can also multiply elements with attributes and classes. For example, if you want to add a new div element with the bg-primary class and the attribute data-type and the value primary 5 times, you can type:

> div.bg-primary[data-type=primary]*5

The * indicates that you want to multiply elements.

Grouping

Currently, grouping is not supported in the terminal.

Custom Commands

Since Bricksforge 2.0.1, you can create custom commands in the terminal. This allows you to create your own shortcuts for adding entire element structures.

Create a Custom Command

In the structure panel context menu (right click), you’ll find a new list item “Create Terminal Command”. After clicking on it, a modal will open where you can enter the name of your command and the structure you want to add.

Use a Custom Command

To use a custom command, you can type the name of the command in the terminal with the prefix >*. For example, if you have created a command called my-command, you can type:

>* my-command

Examples

Here are some examples of how you can use the terminal to add new elements and apply global classes:

> section > container > block > heading + text-basic + text-basic

This will add a section element with a container element inside it. The container element will have a block element inside it. The block element will have a heading element, followed by two text-basic elements.

> section#testimonials > container.testimonials--wrapper > block.testimonials--inner > heading + text-basic + image

This will add a section element with the ID testimonials and a container element with the class testimonials--wrapper inside it. The container element will have a block element with the class testimonials--inner inside it. The block element will have a heading element, followed by a text-basic element and an image element.

> section#cto[data-style=primary] > container > block > heading + button

This will add a section element with the ID cto and the attribute data-style and the value primary inside it. The section element will have a container element inside it. The container element will have a block element inside it. The block element will have a heading element, followed by a button element.