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

Gaps


Jimi Wikman

Recommended Posts

  • Owner

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.


View full record

Link to comment
Share on other sites

  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now

×
×
  • Create New...