Jump to content

Guides

Miscellaneous

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='<strong>ipsNotificationCount</strong>'>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>
  Online
  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


×