Feature request: Allow padding on groups, not require extra layer with padding

[dlewand691]

trafficstars

I'm working through some issues with our design system and thought I'd share an idea/request...

Currently, to use padding, it requires an extra layer inside of a group that has the padding applied to it. Fine, works great for buttons and such.

But...if you have something more complicated like a card design with an image, a headline, some body copy, etc. it would be great to be able to add padding directly to the group of layers instead of requiring the extra "padding layer".

The benefits would be less layer complexity and easier to maintain. Thoughts? Hope I'm explaining this clearly, was confusing myself earlier with which layers needed padding/stacking/etc.

[DWilliames]

Hey @dlewand691 – you actually can apply Padding on groups now. I don't fully understand what you are after. Is it so the content can be 'inset' from the card? If it is, you could add Padding to the group with negative values – e.g. 'top/bottom: -20, left/right: -40'.

Does that help your case? If not, are you able to provide a stripped down version of exactly what you're trying to achieve, and a demo Sketch file 👍

[richardsison]

Hey @dlewand691! Yeah, I think it can do everything that you're after.

From what I can see, you're already using Paddy's alignment "[c m]" and spacing features [20h].

But Paddy can actually set padding without using a layer too.

Here's a quick example of how you could set up an auto-resizing card:

(Also here)

I've also shown the layer list so you can see where everything applies.

To explain the colours:

• Orange: Represents spacing.
• Purple: Represents alignment. Only applied to the button (in addition to the spacing)
• Green: Represents padding. Applied to the entire card as well as the button.

Hope that helps!

[tschmeisser]

If it helps, I’ve also done this by setting the spacing of inside elements to zero and placed shapes with no fill between them that are the padding needed since it’s inconsistent between each. It’s additional layers but then you don’t need a million groups either. On Sun, Jul 29, 2018 at 7:48 PM Richard Sison [email protected] wrote:

Hey @dlewand691 https://github.com/dlewand691! Yeah, I think it can do everything that you're after.

From what I can see, you're already using Paddy's alignment "[c m]" and spacing features [20h].

But Paddy can actually set padding without using a layer too.

Here's a quick example of how you could set up an auto-resizing card:

[image: 2018-07-30 at 9 46 am] https://user-images.githubusercontent.com/587608/43371883-99a4a426-93dd-11e8-9184-73e57f52bde1.jpg (Also here https://d.pr/i/VRnreQ)

I've also shown the layer list so you can see where everything applies.

To explain the colours:

• Orange: Represents spacing.
• Purple: Represents alignment. Only applied to the button (in addition to the spacing)
• Green: Represents padding. Applied to the entire card as well as the button.

Hope that helps!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/DWilliames/paddy2-beta/issues/60#issuecomment-408714754, or mute the thread https://github.com/notifications/unsubscribe-auth/AArzZJqUWBfZc3Ep-u-45s6VcECNL7GWks5uLknkgaJpZM4Vh_iQ .

[richardsison]

Hey thanks @travischmeisser!

I've considered doing that but with pre-defined "spacer symbols" and then just blanking out the source when I'm done…

Suppose you could even do it with a layer style since inserting symbols all the time would be annoying (even with Sketch runner…).

I do like being able to rename the layers though hey! That's my method of choice for using paddy anyway.

[highvoltaged]

There is a plug-in that let's you toggle custom named layers. So I chose the character "=", and any later that contains that symbol, I can toggle it's visibility with F6 key.

But this is exactly why I made that feature request, to be able to enter multiple stacking values. So you could write 30,20,35 and paddy would space the elements acordingly.

[tschmeisser]

Gotcha @highvoltaged , I must not have read it correctly before. I do see that being handy to avoid the extra blocks of possible. Would be pretty powerful.

@richardsison Yeah I use symbols for it too. If you make them more advanced you can even toggle the state (visible vs invisible) by swapping symbols once you have them all placed. Multiple stacking spacing values would get around this and be handy for sure.

[richardsison]

@highvoltaged I didn't see the multiple stacking values either. I think that's a great idea!

[richardsison]

@travischmeisser Yeah, I've experimented with both a few times (before I found Paddy). I found just going into the symbol(s) and changing the styles in one go was better than changing the instance of the symbol. Mainly because selecting all of the spacing symbols was annoying (and I'd often miss a one or two)…

[dlewand691]

Hi all- Thanks for the great tips! I prefer not to use spacing blocks since I'd likely miss one and also to avoid the potentially overly complex amount of layers.

@richardsison I'll try out your layer setup...thanks! I do still see 2 "BG" layers though and was hoping to be able to avoid the need for those...apply the padding directly to the group (similar to how you'd do it with CSS on a div).

@DWilliames Sorry for the confusion, but yes, I'm trying to create the group similar to how you'd code it with CSS where the div (layer group) has padding and everything is inset. Then I can resize the group to match my grid. Right now, the way I'm creating it, I have to resize the content rather than the containing group. It's basically a backwards setup compared to Anima/CSS.

I'll share a bare Sketch file with my experiments when I can.

[dlewand691]

All- After a little bit of testing, I found a few things and am attaching a test Sketch file for reference:

• I'm also using the plugin "Text box fit content" by Julius Sohn.
  • This plugin automatically adjusts fixed text boxes to the content which makes dynamically adjusting symbols a possibility.
• Using negative padding values on the group worked and was able to remove the extra "padding layer" from the bottom of the group. While this works great, it's a bit confusing.
  • If there's a way to use positive values, that would be ideal.
• The top level group had to use the "ignore padding" option
  • When resizing the whole group, the label wouldn't adjust and needed to be nudged to make it re-pad.
  • The whole group snapped back to its original size
• I also have to select the text area then deselect to trigger the adjustment.

Overall it's working fine but with a few caveats and necessary clicks and drags to make the plugins work. When/if the symbol nesting is figured out, several layers can be converted back to symbols for sharing in a library.

Inside padding test.sketch.zip

[richardsison]

@dlewand691 Just saw this now mate! I have two recommendations:

In both cases you need an invisible frame to prevent touching the bottom of the group. Currently Paddy can't have padding and "align to bottom" at the same time. I thought it could. I've also grouped all of the "container" elements into a symbol — not necessary, but felt it was cleaner.

Anyway… In the file you'll see an object called "Frame [20 0]". That provides the same functionality as padding a div in CSS with the benefit of using positive numbers (fully appreciate your desire to pad groups directly though…).

The difference between two options is the approach to the text box for the title. I assume what you're trying to do is have the "content" fixed to the bottom, while respecting the desired padding (so it's not touching the edges).

A bit of Sketch Text box behaviour…

A default behaviour with Sketch textboxes is if you resize the WIDTH ONLY, the height will automatically resize itself based off the content — that's what you want. BUT if you resize the height, it tells Sketch that you don't want it to resize the height automatically anymore. (which is fine sometimes too).

The weird thing is you if you change the height (so the height is fixed), you cannot convert the textbox into a "flexible height textbox" anymore via Sketch. You need a plugin (I use Automate Sketch > Resize to Fix Text Height).

Alright. Here are the options:

1. As long as you just resize the text box width, this will technically work fine. Paddy distributes the objects properly, and the text box will resize based off its content automatically. Just don't change the height.

The problem with this one is that because everything is pushed from the top-left, Paddy will the resize everything based off that anchor (pushing the entire component down (except the objects that are ignored). I'd actually recommend the following option.

2. The simple workaround is to define a textbox height that is safely going to cater for the maximum character count. And then set the textbox alignment to bottom (https://d.pr/i/9p3Ja7)

Download file: https://d.pr/f/oFkoRQ

… Hope that made sense and helped!

[dlewand691]

@richardsison Thanks for the help! I'll take a look and follow up with any questions.