Responsiveness

Introduction to responsive classes

IPS4's CSS framework is responsive, meaning elements adapt according to the size of the display the users chooses to use. In most cases, the existing classes already outlined in this guide take care of it for you; for example, menus automatically adjust, and tab bars collapse into a dropdown menu on mobile phones.

There may be times when you need to control on which devices sizes elements show or hide themselves. For example, if you add a custom footer element, you may want to only show it on desktop, and hide it from tablets or phones.

The responsive classes that IPS4 provides allow you to control this kind of behavior.

Responsive sizes used by IPS4

For the purposes of the media queries we use to control responsiveness, the following sizes represent each device:

• Phones - up to 767 pixels wide
• Tablets - between 768 pixels and 979 pixels wide
• Desktops - 980 pixels and wider

Basic show/hide functionality

The CSS framework includes two groups of three classes that show or hide elements on desktop, tablet and phone-sized devices, respectively. The classes act in an exclusive way; that is, if you use the show classes, any devices that don't match will not show the element. The opposite is also true; if you use the hide classes, then the element will not show on those devices but will show on the others not specified.

The classes are:

• ipsResponsive_hidePhone
• ipsResponsive_hideTablet
• ipsResponsive_hideDesktop
• ipsResponsive_showPhone
• ipsResponsive_showTablet
• ipsResponsive_showDesktop

You can combine these as needed. For example:

<div class='ipsResponsive_hidePhone ipsResponsive_hideTablet'>
  This element *will not* display on phones or tablets, but *will* display on desktops
</div>

Additional classes to control element display

When using the show classes outlined above, you typically need to include an additional class that controls how the element is rendered. This can be one of the following:

• ipsResponsive_block
• ipsResponsive_inlineBlock
• ipsResponsive_inline

• <div class='ipsResponsive_showDesktop ipsResponsive_block'>
    This element will *only* show on desktop sizes, and will render as a block-level element.
  </div>

  These additional classes aren't usually necessary when using the hide classes.