Jump to content

Jim M

Invision Community Team
  • Posts

  • Joined

  • Last visited

  • Days Won


Reputation Activity

  1. Like
    Jim M reacted to Rikki for a guide, 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.
  • Create New...