Responsiveness
Create responsive effects with different values that changes according the resolution
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 thesm
,md
,lg
,xl
orxxl
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 thesm
,md
,lg
,xl
orxxl
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:<xl::bg(primary)</div>