November Highlights: Classes, Interaction, and layout rendering

We're constantly working to improve our product for a better experience. Below are some changes and improvements we've made in the past month for Inverr.

1. Element classes

A class allows you to apply some specific styles to any element that use that class. It's convenient for repeatable or similar elements where you can't use Symbols.

You can manage classes elements from the Designer Panel header (on the left of the Interaction state dropdown list).

To create a new class, select an element (let's use a header in this case):

1. From the Designer Panel header, click on text (on the left of :normal). The Target popup will apear
2. In the textbox, enter the new class name, for example my text class
3. Then press Enter to create the class

Now, the new class is created and will be added to the header element.

To add an existing class into an element, after selecting the element:

1. From the Designer Panel header, click on text (on the left of :normal) to open Target popup
2. Click the arrow down icon in the textbox (or enter the class name). The available class will appear in the dropdown list
3. Click on the class you want to add to the selected element

To custom styling for an existing class:

1. Click on any element that has the class you want to custom
2. From the Designer Panel header, open and select the class in the Target popup (on the left of :normal)
3. Now, every style change will be applied to the selected class

2. Interactions

Small impression count. Interactions are basic events like when moving your mouse over an element (hover event), a button is being clicked (active event), or when editing a text input (focus event).

With the new updates, you can now enrich each interaction with custom styles. For example, expand a container height or change text color on the hover event.

To custom style an element for a specific interaction, select the element then:

1. From the Designer Panel's header, click on :nomal to open the Interaction state dropdown list

2. Choose the interaction you want (i.e Hover)

3. Start making changes (including from the Designer Panel and Toolbar). Remember to switch back to the Normal state, if you want to update the element's default style (or simply select a different element to return to the Normal state).

After completing the changes, you can review by hovering your mouse over the element.

Influence the browsing experience with Interactions

You can intentionally influence the browsing experience by setting the speed of style changes between each state on an interaction.

For example, some websites change the link color or a button background at ~200ms, making users feel they're browsing a high-performing website. Or some websites selling luxury items, the speed of interactions is slower, giving a feeling of relaxation, or confidence.

You can control the speed and other options with the Transition options. They're available from the Designer Panel > Effects options.

3. Improving layout rendering

Dynamic pages or when navigating between pages used to have a 3 seconds delay to make sure everything was loaded properly. But we've made some updates recently to instantly update the layout when ready. And often is less than 1 second.

Besides the above changes, there are a few improvements such as:

• You can now write JavaScript code or embed JavaScipt files using the Embed Code block
• Font smooth-rendering will be enabled (as -webkit-font-smoothing: antialiased;)

That was the November update highlights. To sum up, you can use element class to share styles between elements, and interaction to customize style changes of an element on hover, focus, or active.

Besides, we made some improvements to speed up the layout rendering process, smoothen font rendering and enable support for inline JavaScript

Feel free to leave your feedback, and thanks for your support.