Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Very Popular


    Jimi Wikman

    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


    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.

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

    Discuss the Guide

    Recommended Comments

    There are no comments to display.

    Please sign in to comment

    You will be able to leave a comment after signing in

    Sign In Now

    • Invision Community Playbook

  • Latest Updates

  • Create New...