Tornado Logo

Responsive Elements - Tornado UI v2

responsive elements is elements that response to the viewport/window/device screen size and increase/decrease width and height together it’s Aspect Ratio Responsive Elements

Sass Customize

in order to edit the Responsive Elements you can use the css classes to overide the theme or you can edit it with sass Tornado Folder/SCSS/assets/_utilities.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.

Responsive Element Structure

in order to create a responsive element upon Aspect Ratio first you have 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 this is the element that will fill the responsive wrapper and the responsive wrapper default size is Standard Monitor 4:3 Aspect Ratio

and you can use the wrapper only to create an image element with Dynamic CSS Background taken with attribute data-src=”image-url” and for other Aspect Ratio sizes you can use one of this class names hd-size , classic-size , cinema-size and for equal width/height use class name square-size watch the examples below and try to resize your browser to see the effect.

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

Image Example

Image Example with HD 16:9 Size Aspect Ratio.

Video Example

Video Example with HD 16:9 Size Aspect Ratio.

<!-- 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>

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.