Responsiveness

Syntax

Responsive values are formatted as [{base-value} {breakpoint}::{specific-value}].

• Base value ({base-value}): Applies to all screen sizes by default and is always required.
• Breakpoint value ({breakpoint}::{specific-value}): Specifies a different value for a particular screen size.

Example syntax for responsive web design: [1 md::2 xl::3].

Breakpoint list

TorusKit includes the the most used CSS breakpoints that define screen sizes for responsiveness. Following the mobile-first design approach, there’s no xs breakpoint since smaller screens are targeted by default.

Responsive CSS values

To adjust CSS property values for different screens, enclose them in brackets [] with the base value and breakpoints. For example:

Responsive options

Just like property values above, you can can set responsive options similarly. 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

In some cases, you may want to disable the entire effect on certain resolutions. You can control the trigger using breakpoint-based conditions, where you specify the resolution at which the trigger becomes active. Here, the hover trigger will active only on md resolution and up.

Static styling

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 have 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 to shorten the 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.