20 Oct 2020
This is a breaking change, so we have given this a ‘major bump’ in the npm package to
vf-u-margin__bottom--xs is now
Where we were using ’t-shirt’ sizes to define a naming convention it stifled our ability to create newer spacing tokens. How do decide what to call the value that’s between ‘medium’ and ‘large’? We didn’t think
vf-spacing—bigger-than-medium-but-smaller-than-large would work out so well.
Now we use an incremental number to determine the spacing tokens.
As we are moving closer to a more unified, consistent system of layout and spacing with multiples of
4px we start with
This way we can easily expand the spacing tokens as needed.
- have already been made in components that made use of the original spacing design tokens so if you update your components to the latest version - you will get these updates ‘for free’.
- also effects the naming of the utility classes that some are using in their sites and products. You will need to update those CSS classes accordingly to benefit from these changes.
Below is a table of what the tokens were, and what they are now so you can ‘find and replace’ as needed in your projects.
|old class||new class||value (in
This also highlights the (so far, unwritten) rule that utility classes should be a last resort, and not an often used technique (we are trying to move components forward so they can accept things that might need to be ‘customised’ for your requirement).