Styling elements

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

Visual Inspector
Advanced Inspector
Using the Design Language
Resizing in the Canvas

In the right side of Teleport 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.

1. 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.

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.

Border & Radius Sections

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

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.



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.

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.

2. 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. You can also toggle properties to see how elements look with or without them.

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.

3. 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.

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.

4. 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.

Updated on: 13/02/2023