Utilities - Tornado UI

Item Remover

item remover is an element that when click on it removes its parent from the DOM and you can simply do that by givin the class name remove-item to any element you want and for more advanced options you can use the data attributes for targeting specfic element by an id selector data-target=”ID” or you can remove the closest element like the grandparent or siblings by a CSS Selector added to the attribute data- closest =”Class or ID or tagName” thats it.

<!-- Example -->
<div class="target-element">
<a href="#" class="remove-item">Remove</a>
</div>
<!-- Example Target -->
<a href="#" class="remove-item" data-target="target-element">Remove</a>
<div id="target-element"></div>
<!-- Example Closest -->
<div class="target-element">
<div class="sub-element">
<a href="#" class="remove-item" data-closest=".target-element">Remove</a>
</div>
</div>

ViewPort Detactor

viewport detactor is a function that check for certain element if its visible right now on the screen or not and when its show up to be visible you can do stuff to it like intering animations to make your elements fancy it comes with options to add css animation name and set a duration and a delay for it with data attributes

and to use that effect you can add a class name [ view-status ] and for css animation use attribute [ data-animation ] with a css animation name you can use tornado builtin animations for that and you can add a duration with [ data-duration=”0.5s” ] and you can delay your animation by [ data-delay=”1s” ] and also you can use the activation class to do your own effects with class name [ view-active ].

<div class="view-status" data-animation="fadeIn">...</div>

Tooltips

in order to use the tooltip you can easily by give your element class name tooltip then add a data-title attribute with your tip/hint text in it for an example Hover Me and see the code below.

<a href="#" class="tooltip" data-title="Default Tooltip Example">Hover Me</a>

Tooltip Positions

you can change the position of a tooltip by changing the class to tooltip-position here is example of the 4 positions
Default Position and Bottom Position and Start Position and End Position

<span class="tooltip" data-title="Default Position">Default</span>
<span class="tooltip-bottom" data-title="Bottom Position">Bottom</span>
<span class="tooltip-start" data-title="Direction Start Position">Start</span>
<span class="tooltip-end" data-title="Direction End Position">End</span>

Tooltip Responsive

for a responsive position of tooltip and avoid overflow elements you can do that by adding class name tooltip-responsive and it works like that if you have a default positioned tooltip and the element is closer to the top edge of the window will change the position to bottom position tooltip and the same thing applyed to any other position.

<a href="#" class="tooltip-start tooltip-responsive" data-title="Direction Start Position">Start</a>

Responsive Elements

in order to create a responsive element upon Aspect Ratio you will need to create a wrapper element with class name responsive-element and inside of it you can create iframe or video or custom element with class name element-content , and the default size is 4:3 screen size for other sizes you can use one of this class names hd-size, classic-size, cinema-size, square-size

<!-- Responsive Element -->
<div class="responsive-element">
<div class="element-content">...</div>
</div>

<!-- Image Responsive Element -->
<div class="responsive-element hd-size" data-src="https://via.placeholder.com/1280x720"></div>
<!-- Video Responsive Element -->
<div class="responsive-element hd-size">
<video controls="">
<source src="mov_bbb.mp4" type="video/mp4">
</video>
</div>

Images Light-box

Tornado provide a method to create an images lightbox to show the original size of an image thumbnail and you can use it from tornado ts module like this Tornado.lightbox(‘.image[data-original=”img-url”]’); to activate the functionality of the light box the create a link that contains the img element or image element with data attribute data-lightbox and the image full size as value and for a group of images as slider use data-group to identify that the image is part of a group to switch between as slider

//=====> Import Tornado Methods <=====//
import Tornado from './Base/Tornado';
//=====> Usage <=====//
Tornado.lightbox('[data-lightbox]');

<!-- Single Image Lightbox -->
<a href="#" data-lightbox="https://via.placeholder.com/750x600?text=IMAGE">
<img src="https://via.placeholder.com/190x100?text=IMAGE" alt=""/>
</a>
<!-- Images Group Lightbox -->
<a href="#" data-lightbox="https://via.placeholder.com/750x600?text=IMAGE Group" data-group="demo-lightbox">
<img src="https://via.placeholder.com/190x100?text=IMAGE Group" alt=""/>
</a>
<a href="#" data-lightbox="https://via.placeholder.com/750x600?text=IMAGE 2 Group" data-group="demo-lightbox">
<img src="https://via.placeholder.com/190x100?text=IMAGE 2 Group" alt=""/>
</a>
<a href="#" data-lightbox="https://via.placeholder.com/750x600?text=IMAGE 3 Group" data-group="demo-lightbox">
<img src="https://via.placeholder.com/190x100?text=IMAGE 3 Group alt=""/>
</a>

Quick CSS Assets

tornado provides a collection of CSS Properties to use it Quickley as you build your website like margin , padding, floats, display etc..

Class Name	Description
section-small	setup a padding top/bottom for spacing and sepreate sections from each other.
section-medium	setup a padding top/bottom for spacing and sepreate sections from each other.
section-large	setup a padding top/bottom for spacing and sepreate sections from each other.
block-center	Centering any Block Level Element With Margin.
fluid-block	setting a 100% Width to any Element.
float-start	creating floating element in the page-direction start.
float-end	creating floating element in the page-direction end.
overflow	Hides Elements that Flows outside the Element.
overlay-dark	Creating Dark [#000] Overlay w/ 25% opacity
overlay-light	Creating Light [#FFF] Overlay w/ 25% opacity
overlay-darker	Creating Dark [#000] Overlay w/ 50% opacity
overlay-lighter	Creating Light [#FFF] Overlay w/ 50% opacity

Display Utilities

Use our display utilities for responsively toggling Show/Hide values of the display property. Mix it with our grid system, content, or components to show or hide them across specific viewports.

Class Name	Breakpoint
Hide Elements
hidden	Hide The Element Across All Screen Sizes.
hidden-s-up	Hide The Element From 576px Small Screen’s and up.
hidden-s-down	Hide The Element From 640px Small Screen’s and Down.
hidden-m-up	Hide The Element From 768px Medium Screen’s and up.
hidden-m-down	Hide The Element From 980px Medium Screen’s and Down.
hidden-l-up	Hide The Element From 1024px Large Screen’s and up.
hidden-l-down	Hide The Element From 1200px Large Screen’s and Down.
hidden-xl-up	Hide The Element From 1366px Large Screen’s and up.
hidden-xl-down	Hide The Element From 1600px Large Screen’s and Down.
Displaying Elements
display-block	Make The Element as Block Lvl Element.
inline-block	Make The Element as Inline-Block Lvl Element.
show-s-up	Show The Element From 576px Small Screen’s and up.
show-s-down	Show The Element From 640px Small Screen’s and Down.
show-m-up	Show The Element From 768px Medium Screen’s and up.
show-m-down	Show The Element From 980px Medium Screen’s and Down.
show-l-up	Show The Element From 1024px Large Screen’s and up.
show-l-down	Show The Element From 1200px Large Screen’s and Down.
show-xl-up	Show The Element From 1366px Large Screen’s and up.
show-xl-down	Show The Element From 1600px Large Screen’s and Down.

Margin Assets

tornado provides a collection of CSS Properties to use it Quickley as you build your website like margin , padding, floats, display etc..

Class Name	Description
Margin Bottom
mb5	setting a margin bottom 5px.
mb10	setting a margin bottom 10px.
mb15	setting a margin bottom 15px.
mb20	setting a margin bottom 20px.
mb30	setting a margin bottom 30px.
mb35	setting a margin bottom 35px.
mb40	setting a margin bottom 40px.
mb50	setting a margin bottom 50px.
Margin Top
mt5	setting a margin top 5px.
mt10	setting a margin top 10px.
mt15	setting a margin top 15px.
mt20	setting a margin top 20px.
mt30	setting a margin top 30px.
mt35	setting a margin top 35px.
mt40	setting a margin top 40px.
mt50	setting a margin top 50px.
Margin Start
ms-auto	setting a margin start auto.
ms5	setting a margin start 5px.
ms10	setting a margin start 10px.
ms15	setting a margin start 15px.
ms20	setting a margin start 20px.
ms30	setting a margin start 30px.
ms35	setting a margin start 35px.
ms40	setting a margin start 40px.
ms50	setting a margin start 50px.
Margin End
me-auto	setting a margin end auto.
me5	setting a margin end 5px.
me10	setting a margin end 10px.
me15	setting a margin end 15px.
me20	setting a margin end 20px.
me30	setting a margin end 30px.
me35	setting a margin end 35px.
me40	setting a margin end 40px.
me50	setting a margin end 50px.

Padding Assets

tornado provides a collection of CSS Properties to use it Quickley as you build your website like margin , padding, floats, display etc..

Class Name	Description
no-padding	setting a padding 0.
Padding Top
pt10	setting a padding top 10px.
pt15	setting a padding top 15px.
pt30	setting a padding top 30px.
pt50	setting a padding top 50px.
Padding Bottom
pt70	setting a padding top 75px.
pt100	setting a padding top 100px.
pb10	setting a padding bottom 10px.
pb15	setting a padding bottom 15px.
pb30	setting a padding bottom 30px.
pb50	setting a padding bottom 50px.
pb70	setting a padding bottom 75px.
pb100	setting a padding bottom 100px.

Width Assets

tornado provides a collection of CSS Properties to use it Quickley as you build your website like margin , padding, floats, display etc..

Class Name	Description
Max Width
mxw-1024	setting a Max Width of 1024px.
mxw-768	setting a Max Width of 768px.
mxw-640	setting a Max Width of 640px.
mxw-480	setting a Max Width of 480px.
mxw-360	setting a Max Width of 360px.
mxw-200	setting a Max Width of 200px.
mxw-180	setting a Max Width of 180px.
mxw-120	setting a Max Width of 120px.
Min Width
miw-1024	setting a Min Width of 1024px.
miw-768	setting a Min Width of 768px.
miw-640	setting a Min Width of 640px.
miw-480	setting a Min Width of 480px.
miw-360	setting a Min Width of 360px.
miw-200	setting a Min Width of 200px.
miw-180	setting a Min Width of 180px.
miw-120	setting a Min Width of 120px.