Responsive utilities

Media queries allow you to change the CSS "on the fly", depending on the screen size, width and height ratio of the screen, the device type, etc. It is generally used to change min-width and max-width.

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
Class.m-hide Smartphone from 480px and lessHidden Tablet from 768px up to 481pxVisible Desktop By defaultVisible
Class.t-hide Smartphone from 480px and lessVisible Tablet from 768px up to 481pxHidden Desktop By defaultVisible
Class.d-hide Smartphone from 480px and lessVisible Tablet from 768px up to 481pxVisible Desktop By defaultHidden
Class.m-visible Smartphone from 480px and lessVisible Tablet from 768px up to 481pxHidden Desktop By defaultHidden
Class.t-visible Smartphone from 480px and lessHidden Tablet from 768px up to 481pxVisible Desktop By defaultHidden
Class.d-visible Smartphone from 480px and lessHidden Tablet from 768px up to 481pxHidden Desktop By defaultVisible

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)

Share with your friends

Google+