Responsivedesign

Screen sizes

Metro UI 4 Jekyll supports following general screen size rules:

Device Size Device Type Container size Typography
min 1200 Large desktops 1140px html > font-size 70%
min 1024 Desktops 940px html > font-size 62.5%
max 1024 Tablet landscape 940px html > font-size 62.5%
max 768 Tablet portrait 720px html > font-size 62.5%
max 640 Phone landscape 100% html > font-size 60%
max 480 Phone portrait type 1 100% html > font-size 45%
max 360 Phone portrait type 2 100% html > font-size 40%
max 320 Phone portrait type 3 100% html > font-size 40%

General requirements

First create a page wrapper with class .container. This wrapper will change size for any devices.

<div class="container">
    ...content here...
</div>

Dimensions of the basic elements of typography expressed in rem units relative to the font size specified for html.

Grid

Grid changes its behavior for different screen resolutions.

Tablet landscape, desktop and lage Grid has default behavior
Tablet portrait Grid has next behavior:
  • cells from .span1 to .span6 changes self size to 50%
  • cells from .span7 to .span12 changes self size to 100%
Phones All cells change self size to 100%

Grid with fluid subclass currently is unchanged.

Helpers

Metro UI 4 Jekyll provides helper classes to control the visibility of elements on different types of devices:

Helpers for hide elements

.no-large element is not shown on the big screen
.no-desktop element is not shown on the desktop
.no-tablet element is not shown on the all tablets and phones
.no-tablet-portrait element is not shown on the tablets with portrait orientation and phones
.no-phone element is not shown on the all phones

Helpers for show elements

.on-large element is shown on the big screen
.on-desktop element is shown on the desktop
.on-tablet element is shown on the all tablets
.on-phone element is shown on the all phones

If you have something that does not work as in the demo, see the demo source code