CSS

A lot of work is still to be completed and we urge you to contribute if you can: GitHub Repo

Grid System

IPS consists of a 12-column grid system, which is relatively easy to grasp. The spans can be swapped around in any order and where the spams sum to more than 12, the overflow will move to a new line.

Please note: For the grid to take effect you must apply dir='rtl' or dir='ltr' to the html tag.

An example of the grid system in action:

span1

span2

span3

span4

span6

span12

span8

span4

span3

span5

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Alignment

.ipsType_left

.ipsType_center

.ipsType_right

Predefined Sizes

.ipsType_small

.ipsType_medium

.ipsType_normal

.ipsType_large

.ipsType_veryLarge

.ipsType_huge

Predefined Colors

.ipsType_light / .ipsType_negative / .ipsType_issue / .ipsType_positive / .ipsType_neutral

Helper Classes

The following classes are considered to only exist to help you when developing a layout.

.ipsSpacer_top
15px Top Margin

.ipsSpacer_both
15px Top/Bottom Margin

.ipsSpacer_bottom
15px Bottom Margin

.ipsSpacer_half
7px Relative Margin

.ipsSpacer_double
30px Relative Margin

.ipsType_bold
Sets formatting to bold

.ipsType_unbold
Sets formatting to normal

.ipsType_monospace
Sets font to "Monospace"

.ipsSpacer_break
Enable word-break with hyphens

.ipsSpacer_noBreak
Disables word-break

.ipsSpacer_richText
Sets "rich-text" formatting

.ipsSpacer_reset
Disables all margins

.ipsTruncate
Truncates overflowing text

.ipsTruncate.ipsTruncate_line
Truncates overflowing text with ellipsis

CSS