JohnPixle
commented
10 months ago @HardeepAsrani Hey, if you are around today would be great to take a look on that so I can perhaps experiment during weekend. Let me know if I can help in any way with this one. Thanks!
pirate-bot
Currently, our templates and patterns have inline pixel-based padding. It will be highly more efficient and practical if we can make use of the Spacing variables, following the recent best practices in the industry and TT4.
Creating a spacing scale will allow us to manage spacing consistently and dynamically across the entire theme. Additionally, we can have a responsive / fluid behaviour for spacing vs the current solution that we have.
So far we have been using standard values in our spacing: 16, 24, 32, 64 etc We can then create a spacing scale composed of the same sizes as variables:
❇️ Show suggested spacing variables
``` "spacing": { "spacingSizes": [ { "name": "2XS", "size": "clamp(.4rem, 2vw, 0.5rem)", /* 8px */ "slug": "2xs" }, { "name": "XS", "size": "clamp(.6rem, 2.5vw, 1rem)", /* 16px */ "slug": "xs" }, { "name": "S", "size": "clamp(1rem, 3vw, 1.5rem)", /* 24px */ "slug": "s" }, { "name": "M", "size": "clamp(1.5rem, 4vw, 2rem)", /* 32px */ "slug": "m" }, { "name": "L", "size": "clamp(2rem, 5vw, 3rem)", /* 48px */ "slug": "l" }, { "name": "XL", "size": "clamp(3rem, 6vw, 4rem)", /* 64px */ "slug": "xl" }, { "name": "2XL", "size": "clamp(3rem, 7vw, 5rem)", /* 80px */ "slug": "2xl" }, { "name": "3XL", "size": "clamp(5rem, 10vw, 9rem)", /* 144px */ "slug": "3xl" } ] ```I tried to experiment myself with this by adding the above code to theme.json in my instance but I cant get the variables show up in the stepper control, I guess some further tweaking in needed.
Shall we address this now? I highly suggest to tackle this now, yes. Since we are going to add more patterns and templates in this release, I suggest that we build them on a solid base, with the new spacing variables in place.
What about existing layouts and paddings? We can do a wide search and replace. Across our patterns we have been using standard values. For example wherever we use padding: 64px we can replace it with the XL variable. Alternatively I could spent a couple of hours updating the existing material, it's not a problem.
Other considerations? Yes, currently in Raft there is some code that manages spacing. We must confirm that there are no conflicts.
❇️ Spacing code in Raft,[ line 206](https://github.com/Codeinwp/raft/blob/master/theme.json)
``` "custom": { "spacing": { "baseline": "16px", "small": "min(24px, 6.4vw)", "gap": { "horizontal": "clamp( calc( 1.5 * var( --wp--custom--spacing--baseline ) ), 2.222vw, calc( 2 * var( --wp--custom--spacing--baseline ) ) )", "vertical": "clamp( calc( 1.5 * var( --wp--custom--spacing--baseline ) ), 3.333vw, calc( 3 * var( --wp--custom--spacing--baseline ) ) )" }, "gutter": "clamp( calc( 1.5 * var( --wp--custom--spacing--baseline ) ), 3.333vw, calc( 3 * var( --wp--custom--spacing--baseline ) ) )", "outer": "var( --wp--custom--spacing--gutter )" }, ```@HardeepAsrani What's your thought on this? Let me know for any clarifications or questions or concerns. If you can wrap this up so I can have it when adding the templates, it would be great.