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


    Jimi Wikman
     Share

    Gaps

    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.

     Share


    User Feedback

    Recommended Comments

    There are no comments to display.



    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

×
×
  • Create New...