The spacing module removes the default top and bottom margins for all HTML elements. The adjacent sibling margin rules are applied if the value of the $tymargins-on setting is true. If you wish to apply the adjacent sibling margins only in specific contexts, you can set the value to false and use the mixins or utility classes to selectively activate the margins. When $tymargins-on is false, this module acts as a CSS reset for vertical margins.
Variables
- $tymargins-on
true !default;- If true, adjacent sibling selectors will be applied to all elements; if false, the default top and bottom margin of all elements is zero.
- $tyspacing
(sm:1, md:2, lg:3, indent:3) !default;- SASS map of values indicating the number of grid units for each spacing variable value; these values are used to set the adjacent sibling margins.
Classes
The following classes are defined by the spacing module. They can be used to enable or disable the adjacent sibling margins in specific contexts. Please note: these classes may not behave as expected if nested. So, it is not recommended to use the .tymargins-on class on a descendant of an element that is using the .tymargins-off, or vice versa. This is because of how CSS interprets the wildcard selector.
- .tymargins-on
- Apply the default adjacent sibling margin rules to descendants of the element with this class
- .tymargins-once
- Apply the default adjacent sibling margin rules for the immediate descendants of the element with this class
- .tymargins-skip
- Remove the default adjacent sibling margin rules from the immediate descendants of the element with this class
- .tymargins-off
- Remove the default adjacent sibling margin rules from descendants of the element with this class