Padding
ipsPad
15px padding on desktop
ipsPad_half
7px padding on desktop
ipsPad_double
30px padding on desktop
The padding classes are scaled appropriately on mobile devices.
Spacing
ipsSpacer_top
15px top margin
ipsSpacer_bottom
15px bottom margin
ipsSpacer_both
15px top and bottom margin
ipsSpacer_half
When combined with one of the above, halves the spacing
ipsSpacer_double
When combined with one of the above, doubles the spacing
Clearing
ipsClear
Clears floats preceding the element this class is applied to
ipsClearfix
The popular 'clearfix' technique, which causes a wrapper element with this class applied to fully wrap elements contained within it, even if they are floated. This class should be applied to all elements where descendents may be floated.
Positioning
For text positioning, see typography.
ipsPos_left
Floats the element left
ipsPos_right
Floats the element right
ipsPos_center
Sets automatic margins on the element in order to center it. Block elements will require a width to be set for this to be noticeable, otherwise they will naturally display at 100% width.
Horizontal rules
Horizontal rules can be styled simply by adding the class ipsHr to a standard <hr> element.
Notification counts
ipsNotificationCount is a class for a floating bubble which can denote a notification count of some kind. The parent element should have a non-static position for this class to work correctly. By default, the notification bubble will be offset to the top and right, but this could be overwritten with additional specific styles if desired. Usage:
<!-- The element the notification belongs to --> <!-- position: relative; is set inline here, but avoid that in practice --> <a href='#' class='ipsButton ipsButton_primary ipsButton_medium' style='position:relative'> A button with notification <span class='ipsNotificationCount'>12</span> </a>
This would render:
Online/Offline status
Provides simple styling to denote whether something (a user, for example) is online or offline. ipsOnlineStatus is the base class; add ipsOnlineStatus_online or ipsOnlineStatus_offline to denote the actual status.
<strong class='ipsOnlineStatus ipsOnlineStatus_online'><i class='fa fa-circle'></i> Online</strong><br> <strong class='ipsOnlineStatus ipsOnlineStatus_offline'><i class='fa fa-circle'></i> Offline</strong>
Offline
Cursors
Several classes are provided as shortcuts for changing the mouse cursor on elements.
ipsCursor_locked
"No permission" cursor (example)
ipsCursor_drag
Shows an element can be moved (example)
ipsCursor_pointer
Shows an element can be clicked (example)
ipsCursor_help
Shows an element provides help (example)
ipsCursor_default
Sets the cursor to the default state (example)
Report Guide