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-fx="hover:scale.to(125 xl::150)"></div>

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

<div data-tor-fx="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-fx="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-fx="hover:xl::bg(primary)">hover:xl::bg(primary)</div>

Breakpoints method

As a default, if you define the effect breakpoint, it will be available from that breakpoint and up. But what if you want to define the the effect for the one resolution only? Or you need to enable effect until the desired resolution only? You can achieve that by adding a <method> before the breakpoint definition with this syntax: <method><breakpoint><effect> where <breakpoint> is one of:

• = effect will be enabled only if the breakpoint equals the current breakpoint (resolution)
• < effect will be enabled only for resolutions that are lower than defined resolution (the defined breakpoint does not count)

The = equal method

The bg(primary) hover effect will be enabled on xl resolution only.

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

The < lower method

The bg(primary) hover effect will be enabled on all resolution until the xl and disabled for xl and xxl resolution.

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