UI-kit design system uses a 7px layout - so by default margin-1x will set a margin of 7px - margin-2x will set 14px and margin-3x will use 21px
The benefits of using 1x,2x,3x is that you can change the actual value depending of your design system and don't have to override all the sections where the helper class is used. To override the helper class, look at the file py-common-helper-classes.css and override the selectors that you need to change in your own CSS override file attached to your skin
Just to be clear, If our design system is based on a 8px grid, I would need to go into py-common-helper-classes.css and change each and every margin class from 7, 14 or 21px to 8, 16 or 24px. There is no single global "standard margin" variable that I can adjust. Is that correct?
Posted: 1 year ago
Posted: 1 Aug 2019 11:08 EDT
Richard Marsot (RichardMarsot)
Director, Front-end Development
Yes this is correct - I do not recommend to override the whole file but instead create a new helper class CSS file attached to your skin that overrides the margin-1x, margin-2x classes
On top the helper classes, you also need to override the different dynamic layout formats if you use UI-kit. For example, the inline grid double layout in pyEndUser in UI-Kit uses 7px and 14px - you would need to change them to use 8px and 16px.