Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • IPS Customization.

    While building this website I have learned a lot about how to customiza different aspects of the IPS products. I see a lot of people struggling to get started with IPS and this section is my attempt to gather what I have learned so others can benefit as well.

    To me nothing is more important than to share knowledge and help others. This section contain my findings and the things I have learned, but I still have much more to learn as well. Together we can learn and evolve the ways we customize the IPS products and while doing that there are no stupid questions. In the forum you can ask any question and we will try our best to answer them.

    Go to the IPS Forum ->
  • Padding/margin

    Jimi Wikman


    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.


    User Feedback

    Recommended Comments

    There are no comments to display.

    Please sign in to comment

    You will be able to leave a comment after signing in

    Sign In Now

  • Create New...