-
Introduction
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
-
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 eleme
-
Description
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.
Usage
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:
-
Description
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.
Usage
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:
<ol clas
-
Description
The form module provides classes for styling forms throughout the suite, with a range of options available to change the appearance and flow.
Usage
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
-
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-icon
-
Description
Dropdown menus allow users to select from a number of options. The markup is designed to work in tandem with the ips.ui.menu javascript module.
Usage
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 -->
&
-
Description
The messages module provides a way to style informational messages to bring something to the user's attention.
Usage
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.
&#
-
Basics
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).
Button styles
ipsButton_normal
-
Description
The typography module offers a wide range of classes for styling text across the suite
Headings
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.
ips
-
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 th
-
Description
Badges are a useful way of showing some additional information about an item - its status, for example.
Standard badges
Standard badges receive the base class ipsBadge, and then one or more of the options shown below.
Badge styles
ipsBadge_new Badge
ipsBadge_style2 Badge
-
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