Rikki

Description
We make use of an icon font called FontAwesome. This enables us to display icons that are accessible, that don't require an additional HTTP request, that can be styled with CSS (and inherit styling automatically), and which scale without loss of quality.
 
Usage
An icon can be included within the markup by using the following code:
<i class='fa fa-iconname'></i> The list of possible icons and their classnames is available at http://fontawesome.io/icons/. Note that these classnames are not prefixed with ips as with other framework classes; they are left with their default names as they appear on the FontAwesome website.
Icons can be used anywhere that HTML can be used. For example, within text, on buttons, in menus and more.
    Icon on a button    A caret icon indicates a dropdown     Yes, I think so   No, I disagree   This is another caret  
Icon consistency
It is important that icon use remains relatively consistent throughout the suite. This applies to core developers as well as addon developers. If different icons are used for the same purpose (or worse, an icon is used for a purpose different to it's usual purpose), users will become confused by the software.
To help alleviate this, we have a list of icons that we generally refer to when choosing an icon to represent an action. Check this list to see if your action already has an associated icon, and lean towards using that instead of choosing another.
The list below organizes actions, with the title being a general concept. The icon names are FontAwesome icons, without the preceding fa-
 
Adding
  plus-circle   plus Deleting
  times-circle   trash-o Editing
  pencil Reverting
  undo Go Somewhere
  arrow-right Open External Link
  external-link Confirming Yes/No
  check   times Permissions
  lock   unlock Log In/Sign In
  key Copy
  copy Settings
  cog Flagging On/Off
  flag   flag-o Star On/Off
  star   star-o Developer/Application
  cogs Help
  question-circle Merge
  level-up Code/PHP/HTML
  code Mail/Send Mail
  envelope-o Search
  search View
  search Refresh/Reload
  refresh Execute/Run Now
  play-circle Easy Mode/Visual Editor
  magic  

Description
We make use of an icon font called FontAwesome. This enables us to display icons that are accessible, that don't require an additional HTTP request, that can be styled with CSS (and inherit styling automatically), and which scale without loss of quality.
 
Usage
An icon can be included within the markup by using the following code:
<i class='fa fa-iconname'></i> The list of possible icons and their classnames is available at http://fontawesome.io/icons/. Note that these classnames are not prefixed with ips as with other framework classes; they are left with their default names as they appear on the FontAwesome website.
Icons can be used anywhere that HTML can be used. For example, within text, on buttons, in menus and more.
    Icon on a button    A caret icon indicates a dropdown     Yes, I think so   No, I disagree   This is another caret  
Icon consistency
It is important that icon use remains relatively consistent throughout the suite. This applies to core developers as well as addon developers. If different icons are used for the same purpose (or worse, an icon is used for a purpose different to it's usual purpose), users will become confused by the software.
To help alleviate this, we have a list of icons that we generally refer to when choosing an icon to represent an action. Check this list to see if your action already has an associated icon, and lean towards using that instead of choosing another.
The list below organizes actions, with the title being a general concept. The icon names are FontAwesome icons, without the preceding fa-
 
Adding
  plus-circle   plus Deleting
  times-circle   trash-o Editing
  pencil Reverting
  undo Go Somewhere
  arrow-right Open External Link
  external-link Confirming Yes/No
  check   times Permissions
  lock   unlock Log In/Sign In
  key Copy
  copy Settings
  cog Flagging On/Off
  flag   flag-o Star On/Off
  star   star-o Developer/Application
  cogs Help
  question-circle Merge
  level-up Code/PHP/HTML
  code Mail/Send Mail
  envelope-o Search
  search View
  search Refresh/Reload
  refresh Execute/Run Now
  play-circle Easy Mode/Visual Editor
  magic  

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:
A button with notification12  
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)

Description
We make use of an icon font called FontAwesome. This enables us to display icons that are accessible, that don't require an additional HTTP request, that can be styled with CSS (and inherit styling automatically), and which scale without loss of quality.
 
Usage
An icon can be included within the markup by using the following code:
<i class='fa fa-iconname'></i> The list of possible icons and their classnames is available at http://fontawesome.io/icons/. Note that these classnames are not prefixed with ips as with other framework classes; they are left with their default names as they appear on the FontAwesome website.
Icons can be used anywhere that HTML can be used. For example, within text, on buttons, in menus and more.
    Icon on a button    A caret icon indicates a dropdown     Yes, I think so   No, I disagree   This is another caret  
Icon consistency
It is important that icon use remains relatively consistent throughout the suite. This applies to core developers as well as addon developers. If different icons are used for the same purpose (or worse, an icon is used for a purpose different to it's usual purpose), users will become confused by the software.
To help alleviate this, we have a list of icons that we generally refer to when choosing an icon to represent an action. Check this list to see if your action already has an associated icon, and lean towards using that instead of choosing another.
The list below organizes actions, with the title being a general concept. The icon names are FontAwesome icons, without the preceding fa-
 
Adding
  plus-circle   plus Deleting
  times-circle   trash-o Editing
  pencil Reverting
  undo Go Somewhere
  arrow-right Open External Link
  external-link Confirming Yes/No
  check   times Permissions
  lock   unlock Log In/Sign In
  key Copy
  copy Settings
  cog Flagging On/Off
  flag   flag-o Star On/Off
  star   star-o Developer/Application
  cogs Help
  question-circle Merge
  level-up Code/PHP/HTML
  code Mail/Send Mail
  envelope-o Search
  search View
  search Refresh/Reload
  refresh Execute/Run Now
  play-circle Easy Mode/Visual Editor
  magic  

Description
We make use of an icon font called FontAwesome. This enables us to display icons that are accessible, that don't require an additional HTTP request, that can be styled with CSS (and inherit styling automatically), and which scale without loss of quality.
 
Usage
An icon can be included within the markup by using the following code:
<i class='fa fa-iconname'></i> The list of possible icons and their classnames is available at http://fontawesome.io/icons/. Note that these classnames are not prefixed with ips as with other framework classes; they are left with their default names as they appear on the FontAwesome website.
Icons can be used anywhere that HTML can be used. For example, within text, on buttons, in menus and more.
    Icon on a button    A caret icon indicates a dropdown     Yes, I think so   No, I disagree   This is another caret  
Icon consistency
It is important that icon use remains relatively consistent throughout the suite. This applies to core developers as well as addon developers. If different icons are used for the same purpose (or worse, an icon is used for a purpose different to it's usual purpose), users will become confused by the software.
To help alleviate this, we have a list of icons that we generally refer to when choosing an icon to represent an action. Check this list to see if your action already has an associated icon, and lean towards using that instead of choosing another.
The list below organizes actions, with the title being a general concept. The icon names are FontAwesome icons, without the preceding fa-
 
Adding
  plus-circle   plus Deleting
  times-circle   trash-o Editing
  pencil Reverting
  undo Go Somewhere
  arrow-right Open External Link
  external-link Confirming Yes/No
  check   times Permissions
  lock   unlock Log In/Sign In
  key Copy
  copy Settings
  cog Flagging On/Off
  flag   flag-o Star On/Off
  star   star-o Developer/Application
  cogs Help
  question-circle Merge
  level-up Code/PHP/HTML
  code Mail/Send Mail
  envelope-o Search
  search View
  search Refresh/Reload
  refresh Execute/Run Now
  play-circle Easy Mode/Visual Editor
  magic  

Description
The column module, unlike the grids module, provides classes that enable layouts comprising both fixed and fluid columns to be easily created. This is a layout often used for fixed sidebars with fluid content areas, for example. Additional classes are available to collapse the layout on smaller devices.
 
Usage
A column layout consists of a wrapper element, with the column elements as direct descendants of the wrapper. No other layout classes should be applied directly to the column elements.
An example of a column layout:
<div class='ipsColumns'> <div class='ipsColumn ipsColumn_medium'>Fixed column</div> <div class='ipsColumn ipsColumn_fluid'>Fluid column</div> </div> This would render as follows (background colors and padding added for clarity):
Fixed column Fluid column The wrapper receives the classname ipsColumns (note: plural), while individual columns receive the classname ipsColumn (note: singular).
 
Column Sizing
A number of different classnames are available to change the column sizing. One of these classes should be applied to each column in addition to the base ipsColumn classname.
ipsColumn_veryNarrow - 50 pixels wide ipsColumn_narrow - 120 pixels wide ipsColumn_medium - 200 pixels wide ipsColumn_wide - 280 pixels wide ipsColumn_veryWide - 360 pixels wide ipsColumn_fluid - Takes up remaining space; should be used on all fluid columns  
Border Spacing
By default, no spacing is provided between columns (see example above). Spacing can be included around columns by using one of the three following classnames on the root ipsColumns element:
ipsColumns_verticalSpacing - 15 pixels vertical spacing ipsColumns_horizontalSpacing - 15 pixels horizontal spacing ipsColumns_bothSpacing - 15 pixels spacing on all sides The spacing can be halved by also including the ipsColumns_halfSpacing classname.
<div class='ipsColumns ipsColumns_bothSpacing ipsColumns_halfSpacing'> <div class='ipsColumn ipsColumn_medium'>Fixed column</div> <div class='ipsColumn ipsColumn_fluid'>Fluid column</div> </div> Fixed column Fluid column  
Responsiveness
To cause the layout to collapse on smaller devices, add the classnames ipsColumns_collapseTablet or ipsColumns_collapsePhone to the wrapper element. Columns will collapse into source-order, one after the other.

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:
A button with notification12  
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)

In IPS4, most javascript is split into self-contained, named modules. Modules and javascript files have a one-to-one relationship - each javascript file should contain one module only. Modules prevent variables leaking into the global scope (which must be avoided), and helps ensure code stays focused. All modules appear under the ips namespace.
Types of Module
A number of primary types of module exist within the software:
Utility Modules
Exist on the ips.utils namespace, and provide assorted functionality that other modules can make use of, including cookie handling and methods for handling responsive design. UI widget modules
Exist on the ips.ui namespace, and define interface widgets to add interactivity to pages, and which can be reused using special data attributes. Controllers
Controllers are modules that handle specific functionality for one particular page or part of a page. They respond to events from UI widgets and other controllers and update their scope accordingly. Mixins
Mixins are used to extend controllers with additional functionality. Other types
There are a number of other types of non-modularized file used too:
Libraries/interfaces
Libraries are 3rd party scripts that provide additional functionality. jQuery and Underscore are two examples. Templates
Template files define special Mustache templates, that modules can use when rendering HTML to the browser. Languages
Language files define strings which can be translated into other languages.