Feature request: Allow padding on groups, not require extra layer with padding #60
Comments
|
Hey @dlewand691 – you actually can apply Padding on groups now. 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 👍 |
|
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 " 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:
I've also shown the layer list so you can see where everything applies. To explain the colours:
Hope that helps! |
|
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 ***@***.***> 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
<#60 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AArzZJqUWBfZc3Ep-u-45s6VcECNL7GWks5uLknkgaJpZM4Vh_iQ>
.
|
|
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. |
|
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. |
|
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. |
|
@highvoltaged I didn't see the multiple stacking values either. I think that's a great idea! |
|
@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)… |
|
Hi all- @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. |
|
All-
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. |
|
@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:
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.
Download file: https://d.pr/f/oFkoRQ … Hope that made sense and helped! |
|
@richardsison Thanks for the help! I'll take a look and follow up with any questions. |
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.
The text was updated successfully, but these errors were encountered: