Documentation-styling-elements - teleportHQ.io - Production

Styling Elements

Style elements from the Style Inspector Panel and use the design language tokens we previously set up.

In the right side of the Studio you will find the Style Inspector Panel. This will be visible only when one or more elements are selected. There are two types of Inspector, visual and advanced.

Visual Inspector

The Visual Inspector will help you quickly set the most common style properties on your elements. It is split into sections that are visible depending on your element's type and display property.

In the case when multiple elements are selected, only the common sections will be visible and if the values differ, then we will show mixed instead.
Let's take a closer look into the most important sections.
image

Layout Section

The Layout Section is visible only for elements that have flex display. From here you can change the most important flex properties that will help you to align and position the children of the flex element.

Margin & Padding Sections

You can easily set margin and padding for your elements by locking all values or binding values on the two axis.
image

Border & Radius Sections

The Border and Radius sections have expand icons so you can overwrite the values for each side or corner.
image

Background Image Section

The Background Image Section allows you to set an URL for the background image and change different settings for the position and size of the background.
image
You can also use the Asset Manager, which will open when you click on the replace icon. Hover over the desired photo and press alt + click to set it as a background image for the selected element or right click on it and select Set as Background Image.
image

Text Style Section

While you edit text elements you are able to edit specific sections of that text by selecting them and editing properties from the Text Style section. The usual shortcuts like ctrl+B for bold or ctrl+I for italic are also available in this case.
image

Advanced Inspector

The inputs in the Advanced Inspector are similar to what you would find in the dev tools section of your browser.

You can see all the styles that are applied on an element and add custom CSS properties that are not available in the Visual Inspector.

The inputs with autocomplete will enable you to set up your desired styles quickly and easily. Here you can see that you can also add styles for media queries but we will cover this in a future lesson.
image

Using the Design Language

You can use tokens and text styles from the design language we set up from both the Visual and the Advanced inspectors.

Tokens

You can use tokens by clicking on an input, and selecting an option from the list of available tokens. Keep in mind that you will find color tokens in sections like Text Color or Bg Color and layout tokens in sections like Size, Margin and Padding.
image

Text Styles

For text elements you have the option to link Text Styles that we defined in the Design Language Panel. From the Text Styles section you can choose an existing text style or create a new one using the styles defied on the selected elements.
image

Resizing in the Canvas

As we've seen in the Selecting Elements lesson, some elements have resize handlers around the selection border. These are elements that do not have inline display and allow changes to their size.

You can edit your element's size from the canvas by dragging the small dots around it called resize handlers. When you hit the parent's middle point or you fill the parent's width/height we will automatically set the value in percentage.

By keeping shift pressed you can resize while keeping the same aspect ratio.
image