We've added new spacing classes for padding and margin, to allow for atomic classnames, device prefixes and modifiers.
ipsPad, ipsPad_double, ipsPad_half, and all of the ipsSpacer_* classes are now deprecated. You'll still see them in our templates and they'll still work in yours, but don't use them in any new work - you should use the updated classes below.
The padding classes are now named ipsPadding:
ipsPadding, ipsPadding:none, ipsPadding:half, ipsPadding:double - apply padding to all four sides
ipsPadding_vertical, ipsPadding_vertical:none, ipsPadding_vertical:half, ipsPadding_vertical:double - apply padding to top and bottom
ipsPadding_horizontal, ipsPadding_horizontal:none, ipsPadding_horizontal:half, ipsPadding_horizontal:double - apply padding to left and right
ipsPadding_left, ipsPadding_left:none, ipsPadding_left:half, ipsPadding_left:double - apply padding to the left side (RTL aware)
ipsPadding_right, ipsPadding_right:none, ipsPadding_right:half, ipsPadding_right:double - apply padding to the right side (RTL aware)
ipsPadding_top, ipsPadding_top:none, ipsPadding_top:half, ipsPadding_top:double - apply padding to the top side
ipsPadding_bottom, ipsPadding_bottom:none, ipsPadding_bottom:half, ipsPadding_bottom:double - apply padding to the bottom side
These classes have md and sm prefixed versions too, allowing you to apply different padding depending on the device size.
One side note here: with the old padding classes, padding was simply halved on phones with no opt-out. That's not the case with the new family - if you want half-padding on mobile on an element, you should apply sm:ipsPadding:half in addition to the normal ipsPadding class, for example. This gives you much more control than you previously had.
Margins follow basically an identical pattern to padding, with the same variation of classes, except the name is ipsMargin.
Padding/margin
We've added new spacing classes for padding and margin, to allow for atomic classnames, device prefixes and modifiers.
ipsPad, ipsPad_double, ipsPad_half, and all of the ipsSpacer_* classes are now deprecated. You'll still see them in our templates and they'll still work in yours, but don't use them in any new work - you should use the updated classes below.
The padding classes are now named ipsPadding:
These classes have md and sm prefixed versions too, allowing you to apply different padding depending on the device size.
One side note here: with the old padding classes, padding was simply halved on phones with no opt-out. That's not the case with the new family - if you want half-padding on mobile on an element, you should apply sm:ipsPadding:half in addition to the normal ipsPadding class, for example. This gives you much more control than you previously had.
Margins follow basically an identical pattern to padding, with the same variation of classes, except the name is ipsMargin.
View full record