Question
Standard values in CSS helper classes
Is there somewhere which defines what a "standard" value is for padding or margin used in the CSS helper classes?
For example, the help file says:
- The margin-r-2xhelperclass applies twice the standard margin to the right side of an item.
What is the "standard" margin? Is this configurable? Or just set in the CSS file?
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
OK thanks.
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?
Accepted Solution
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.
Hi,
Yes, It is configurable, We can increase or decrease it as per the below link.
https://community.pega.com/sites/default/files/help_v82/procomhelpmain.htm#pxadminstudio/ui/ui-CSS-helper-classes/ui-helper-classes-con.htm