In order to properly differentiate between CSS classes and HTML elements that form part of the IPS4 framework and those that do not, and in order to create a logical structure that can be understood at a glance, naming conventions are applied as follows.
Framework classes & elements
The IPS4 CSS framework is split into loosely-defined 'modules'. A module groups together related styles in a single f
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.
A column layout consists of a wrapper element, with the column eleme
The grid module provides classes for building layouts based on a flexible 12-column grid, with automatic margins, and with additional classes to enable the layout to collapse properly on smaller devices.
A grid should be made up of a wrapper element with the class ipsGrid, and direct descendants with appropriate size classes applied (see below). For example:
The data list CSS module allows us to display complex lists, while rearranging the display in situations that demand it, such as on small devices.
A data list consists of a wrapper and individual list items, which can contain various types of data. In most cases, a data list would use one of the HTML list elements (such as ul or ol) for semantic purposes, though this isn't necessarily required.
The basic markup structure is as follows:
The form module provides classes for styling forms throughout the suite, with a range of options available to change the appearance and flow.
A form should have the base class ipsForm. In many cases this will be directly on the <form> element, but it can actually appear on any element that contains form elements. The recommended basic DOM structure for a form is as
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.
An icon can be included within the markup by using the following code:
<i class='fa fa-icon
A menu consists of a trigger element, and the menu element itself:
<!-- The trigger -->
<a href='#elMyMenu_menu' id='elMyMenu'>Open Menu</a>
<!-- The menu -->
The messages module provides a way to style informational messages to bring something to the user's attention.
To create a message, simply add the ipsMessage class to a container element (e.g. div), along with one of the message styles below. The message style class will automatically add the appropriate icon to your message box.
The button classes described here can be applied to any element, although typically would be applied to an element like a, input[type="submit"] or button so that the user can interact with it.
As a minimum, a button should receive the basic ipsButton class, plus a size class and a style class (explained below).
The typography module offers a wide range of classes for styling text across the suite
A number of heading styles are provided, which can be used for structuring information on the page. They are element-agnostic; you can use them on any of the <h*> tags (or even other tags) - choose the most semantic element for your particular use.
15px padding on desktop
7px padding on desktop
30px padding on desktop
The padding classes are scaled appropriately on mobile devices.
15px top margin
15px bottom margin
15px top and bottom margin
When combined with one of the above, halves the spacing
When combined with one of the above, doubles th
Badges are a useful way of showing some additional information about an item - its status, for example.
Standard badges receive the base class ipsBadge, and then one or more of the options shown below.
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 foote