Style Settings #47
Replies: 6 comments 5 replies
-
i think the css variable approach is not only very smart, but extremely flexible, i can't wait to use all of this! |
Beta Was this translation helpful? Give feedback.
-
Nit, spatial UX, padding/margin/border etc side controls should be arranged spatially in a cross, condensing them to a box for condensing's sakes or dev familiarity(css clockwise usage) isn't great for merchants. |
Beta Was this translation helpful? Give feedback.
-
"css_variable": "--my-gap-variable", // create and set a css variable Wouldn't css vars be more for section level decisions then , or how is shopify going to namespace the css-vars for each block |
Beta Was this translation helpful? Give feedback.
-
We have to also keep in mind nestable blocks means we could put all/some style based settings in a standalone block dedicated only to styles that then applies to the containing section, or block-siblings or block-children etc. When I have the time I'm working on a prototype of this concept to move advanced-customizations such as animations, grid layouts, responsive behavior, or overrides to an advanced-block; that advanced-block also would serve as an opt-in indicator when a merchant/theme has gone past basic support. |
Beta Was this translation helpful? Give feedback.
-
Hey, thanks for the clear examples and great progress. How can we use CSS variables with design tokens if they're only in |
Beta Was this translation helpful? Give feedback.
-
@adrocknaphobia — I am late to the party here but I have been thinking about css variables and grid systems this whole time. I want blocks to set themselves up according to the surrounding theme settings. I also want to give merchants the ability to overwrite any style at a granular level. I think css variables are the right interface for this, but what I really want is something like this: {
"type": "style.range",
"label": "Gap",
"id": "gap",
"max": 100,
"default": "--gap", // read-write interface
"units": ["px", "em"]
} The value of Letting |
Beta Was this translation helpful? Give feedback.
-
Hey everyone. Thanks again for all the feedback on our latest developer preview. We’re circling back here to share some of the ideas that have been refined through discussion here as well as through live conversations with several of you. We’re breaking up the various topics into individual threads so that we can post updates more quickly and create a more focused discussion. Please remember, these are just ideas of how we might implement a solution. We’re looking for your feedback to help mold the final product. In this thread, we want to dive into style settings.
In today's themes, it’s common to duplicate settings in order to set different customizations for mobile and desktop breakpoints. This leads to a lot of visual clutter for merchants in the sidebar. It can also create confusion when a merchant changes a mobile setting while previewing the desktop and vice versa.
With style settings, we’re introducing the ability to only show a single setting for customizations, and allow merchants to toggle between different breakpoints in the theme editor to edit the value of these settings for different breakpoints.
As part of the developer preview, we’ve shown how you can use the
| class_list
filter to catch style panel settings in Liquid, but we are also going to allow you to read the values of style settings in Liquid as you do other input settings. Style settings can hold multiple values, so you need to retrieve the values for each breakpoint.While this approach will work, it can be quite verbose to manually catch these settings in liquid, as you can see below. Even if they all share the same values, these inline styles get repeated across each instance of the block, so this can negatively impact the storefront performance of your theme.
To make it easier to apply settings, we’re exploring how we might make it possible for you to specify the CSS variable that you would like to use and Shopify will ensure it is populated with the right value based on the breakpoint. This will allow you to use the full expressiveness of CSS to achieve advanced use-cases, such as using calc, clamp, minmax, and more, without having to write a ton of boilerplate code.
In the example above, setting the
css_variable
property to--my-gap-variable
will instruct Shopify to generate a CSS var in the linked stylesheet with the value of the gap setting. You may then rely on that variable throughout your theme.We hope this level of control and the minimal size of the generated CSS will be helpful to theme developers.
New Specialized Input Settings
Finally, we plan on introducing new specialized input settings for common controls – think margin, padding and more. So it’s not just panels, but individual settings that you can incorporate a la carte. They will be available with breakpoint aware
style.padding
and as plain settings with no breakpoint interactionpadding
.As always, thanks for feedback and please let us know what you think. Keep in mind these are directional. The code isn't final but we want to share early and hear feedback.
Beta Was this translation helpful? Give feedback.
All reactions