Responsiveness

Overview

Torus Kit allows to create mobile-first design with its responsive effects feature. It helps you to set different values for different resolutions, or completely disable/enable the whole effect across the resolutions.

Responsive values

Responsive values are available for the effects that includes a parameter in parenthesis (). The syntax is as follows: <effect>(<breakpoint>::<value>) where:

• <effect> is the one of the available effects
• <breakpoint> is one of the sm, md, lg, xl or xxl resolution name, followed with the double colon :: that defines the resolution
• <value> is the desired effect value

Example

In this example, we’re adding a hover:scale.to(125%) effect that will scale the the element on hover to 125% in all resolutions until, but it will scale the element to 150% on xl resolution and up.

<div data-tor="hover:scale.to(125% xl::150%)"></div>

You can define multiple values for one effect even for non-numeric values.

<div data-tor="hover:bg(primary md::warning xl::red)">hover:bg(primary md::warning xl::red)</div>

It’s also possible to set responsive values to custom effects

<div data-tor="scroll:@parallax(10 xl::30)">scroll:@parallax(10 xl::30)</div>

Responsive effects

There are cases that you need to completely disable or enable the effect for desired breakpoint. You can achieve that by adding a breakpoint definition before the effect name with this syntax: <breakpoint>::<effect> where

• <breakpoint> is one of the sm, md, lg, xl or xxl resolution name, followed with the double colon :: that defines the resolution
• <effect> is the one of the available effects

Example

This example shows how to enable background change effect on hover only on xl resolution on up.

<div data-tor="hover:xl::bg(primary)">hover:xl::bg(primary)</div>