Adding padding/margin that is 3 sided

[anastasialanz]

If we wanted to add padding values for 3 sides, what is the best way that we would approach this using Sparkle?

sparkle/globals/sides/_map.scss

Lines 1 to 9 in ee905da

	$sides: (
	'bottom': 'btm',
	'top': 'top',
	'left': 'lft',
	'right': 'rgt',
	'all': 'all',
	'y-axis': 'vrt',
	'x-axis': 'hrz'
	) !default;

Sparkle gives us default values for a single side, all, vrt, and hrz.

Should I add a new value to the map to handle padding for top/bottom + hrz or left/right + vrt?

One way this could be solved is by combining two of the existing side options, but if I try to use util-pad-all-md and util-pad-btm-none, util-pad-all-md overrides the second class.

[zastrow]

Interesting. I’ve not come across needing this. It feels a little edge-case to me to create a set of classes. I lean more toward fixing the problem you were tying by applying all sides and then changing one. I think this is a cascade issue, and I feel like it does make sense to change this order to be all then x-axis, etc.

The thing is this can be done without making a change to Sparkle. The map can be setup in the individual project settings to become:

$sides: ( 
   'all': 'all', 
   'y-axis': 'vrt', 
   'x-axis': 'hrz' ,
   'top': 'top', 
   'right': 'rgt',
   'bottom': 'btm', 
   'left': 'lft'
 );

This would result in the desired cascade.

[zastrow]

We can change the default to reflect that, but the order placed in the project settings is what is ultimately used.