v9.1.0
Added
- Utilities mixin module containing a new
spacing-map
variable andspacing-classes
mixin which can be used to generate utility classes for each spacing variable. - Optional spacing trump module which generates margin & padding utility classes.
u-noBorder
,u-noBackground
, andu-hover--cursor
utility classes.
A bit more detail on the spacing utility classes — these can be included in a project via an optional mixin, similar to the classes in the utilities module. The difference is that these new classes feed off of our spacing variables and include a class for each spacing e.g.
.u-pad-a {}
.u-pad-b {}
...
.u-pad-a--top {}
.u-pad-b--top {}
...
.u-pad-a--bottom {}
.u-pad-b--bottom {}
...
.u-pad-a--left {}
.u-pad-b--left {}
...
.u-pad-a--right {}
.u-pad-b--right {}
...
.u-pad-a--horizontal {}
.u-pad-b--horizontal {}
...
.u-pad-a--vertical {}
.u-pad-b--vertical {}
These classes can be helpful in situations where you need to apply some spacing and do not wish to create a new class name for an element (naming is hard!).
Following the same style as the other utility classes, these also include the !important
property so that they can override existing styles with higher specificity.
These changes have been tested in another project to prove that the classes are generated as expected. Here is a Gist that was created on sassmeister.com containing the core code and the resulting output.