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 ->
  • Gaps

    Jimi Wikman


    Another new family of classes is ipsGap. These classes are used when you want spacing between elements. In the past, you'd have to use :last-child or :first-child to exclude an element, or loop over the elements in the template to leave off a class. If elements wrapped to a new line, putting spacing between the lines was tricky too.

    ipsGap solves this by applying even spacing between elements, then applying a negative margin on the whole container to bring it back to the starting position.

    The classname is followed by a modifier, which is a number from our spacing scale, e.g. 1 is 4px spacing2 is 8px spacing and so on.

    • ipsGap:1 (1-5 available) - applies both horizontal and vertical spacing around each element in the container
    • ipsGap_row:1 (1-5 available, as well as 0 to remove) - applies vertical spacing on each element in the container

    Notice ipsGap_row also supports the :0 modifier. This allows you to have horizontal-only spacing - simply apply ipsGap:1 ipsGap_row:0.

    Be aware that using both ipsMargin (or custom styles that apply a margin) and ipsGap on the same element can cause issues. You may want add a wrapper element to handle your margin in this situation.


    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...