Supported classes

Table of classes shown here provides dynamic for different devices and their work in conjunction with the layout grid and media queries (split by device).

Class Smartphone from 480px and less Tablet from 768px up to 481px Desktop By default
.m-hide Hidden Visible Visible
.t-hide Visible Hidden Visible
.d-hide Visible Visible Hidden
.m-visible Visible Hidden Hidden
.t-visible Hidden Visible Hidden
.d-visible Hidden Hidden Visible

Using this functionality makes it possible not to create different versions of the same site for different devices. Instead, you can control content display and hiding depending on the device.

See the example of how it works:

Green mark means that the unit can be seen in the current template window.

Hide classes for different devices

Telephone
(.m-hide)
Tablet
(.t-hide)
Monitor
(.d-hide)
Telephone
(.m-hide)
Tablet
(.t-hide)
Monitor
(.d-hide)
Telephone
(.m-hide)
Tablet
(.t-hide)
Monitor
(.d-hide)

Dispaly classes for different devices

Telephone
(.m-visible)
Tablet
(.t-visible)
Monitor
(.d-visible)
Telephone
(.m-visible)
Tablet
(.t-visible)
Monitor
(.d-visible)
Telephone
(.m-visible)
Tablet
(.t-visible)
Monitor
(.d-visible)

Mobile components


Mobile panel

<!-- _MOBILE BAR POSITION_ = top, bottom -->
<div class="mobile-bar _MOBILE BAR POSITION_">
    ...
</div>

Menu button

<!-- _POSITION BUTTON MENU_ = left, right -->
<span class="menu-btn _POSITION BUTTON MENU_" data-menu-position="_POSITION MENU_">Menu</span>

Mobile menu

<!-- _POSITION MENU_ = left, top, right, bottom -->
<aside class="mobile-menu _POSITION MENU_">
    ...
</aside>

Mobile dropdown box

<!-- _DROPDOWN POSITION GROUP_ = left, top, right, bottom, center and centered -->
<aside class="dropdown-menu-mobile _DROPDOWN POSITION GROUP_">
    ...
</aside>