Responsiveness

Syntax

A responsive value consists of a breakpoint name followed by :: and the specific value, formatted as [{general-value} {breakpoint}::{specific-value}]. The {general-value} is the base value applied across all resolutions and must always be defined when setting responsive values. Multiple responsive values can be specified, for example: [1 md::2 xl::3].

Breakpoint list

The list of the breakpoint names with corresponding screen resolutions. There is no xs resolution as the mobile-first approach targets the smallest screens first, then customize the bigger ones.

Value responsiveness

Adjust the css property value for various screens by adding the value into the brackets [] with base value and corresponding resolutions. In example below, the element will scale to 0.75 when hovered on all resolutions, but to 1.25 on xl and up.

Option responsiveness

Just like property values above, you can define the responsive values for options. The syntax is the same. The only difference is that you define the options in the <> angle brackets. This example shows how to set the responsive transition duration to 1s on all resolutions but to 0.5s on xl and above.

Trigger responsiveness

In some cases, you may want to disable the entire effect on certain resolutions. In that situation, you can define the resolution from which the trigger becomes active. Here, the hover trigger will active only on md resolution and up.

Static styling responsiveness

Static (initial) values can also be responsive. Example below shows how to apply the base opacity to 0.3, but to 0.8 on xl and up.

Complex values

For now, we have used properties that takes just single value like 0.75, 1rem or 1s. But the TorusKit allows you to define the resolutions also for more complex values. Here we’ll take the background-color (shorten as bg). The rgba() CSS function is a good example of more complex value where you can apply the responsiveness. There are two method of how you can set the resolutions for screens:

1. Parent-based values
2. Children-based values

These two examples below shows the same result, but with the different approach. Both of the buttons will be red on hover on all resolutions, but becomes pink on xl and up. The first one uses parent value-based approach and the second one the children value-based one.

Parent-based value

In this case, you take the whole parent value and set the resolution for each one in the brackets []. This can be used for shorter values, as the string can be too long at the end in the more complex values.

Children-based value

This approach defines the resolutions only for one (or multiple) children values that are inside the parent definition. In this case, it’s an rgba() CSS function that acts as a parent. This method is shorter that previous one and it’s more suitable for longer strings.