# Theme Sizing Properties Example **URL:** \ **Category:** Elements API\ **Created:** [August 27, 2025, 8:33pm UTC](https://forums.realmacsoftware.com/t/theme-sizing-properties-example/50288 "2025-08-27T20:33:25Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [August 27, 2025, 8:33pm UTC](https://forums.realmacsoftware.com/t/theme-sizing-properties-example/50288/1 "2025-08-27T20:33:25Z")
@dan or @ben I know you guys are very busy, but is there any chance I can see an example of how to set up the THEME SIZING as used with the standard components? There is no example that I can find in the UI controls, and I want to be able to support the standard option typically offered in these properties (Auto, Full, etc.). Much appreciated. Additionally, I would also like to see how the FONT WEIGHT property control is set up. ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [August 28, 2025, 10:28am UTC](https://forums.realmacsoftware.com/t/theme-sizing-properties-example/50288/2 "2025-08-28T10:28:42Z")
We do plan on making most of our components open-source and available on GitHub, however we have some work to do before we can do that. So for now, I nipped into the source and have copied out the properties for both of your requests… Not sure how helpful these will be, but if you have any more questions let us know, and I’m sure @ben will be able to guide you further on the implementation 😅 **Sizing:** ```auto { "title": "Sizing", "icon": "arrow.down.backward.and.arrow.up.forward.square", "properties": [ { "title": "Size", "heading": {} }, { "title": "Width", "id": "globalWidthType", "responsive": false, "select": { "default": "full", "items": [ { "title": "Auto", "value": "auto" }, { "title": "Full", "value": "full" }, { "title": "Screen", "value": "screen" }, { "title": "Breakpoint", "value": "container" }, { "title": "Theme Spacing", "value": "theme" } ] } }, { "title": "", "id": "globalWidth", "format": "w-{{value}}", "themeSpacing": { "mode": "single", "default": { "base": { "custom": false, "value": "auto" } } }, "visible": "globalWidthType == 'theme'" }, { "title": "Height", "id": "globalHeightType", "responsive": false, "select": { "default": "auto", "items": [ { "title": "Auto", "value": "auto" }, { "title": "Full", "value": "full" }, { "title": "Screen", "value": "screen" }, { "title": "Theme", "value": "theme" } ] } }, { "title": "", "id": "globalHeight", "format": "h-{{value}}", "themeSpacing": { "mode": "single", "default": { "base": { "custom": false, "value": "auto" } } }, "visible": "globalHeightType == 'theme'" }, { "divider": {} }, { "title": "Min & Max Settings", "heading": {} }, { "information": {}, "title": "Enable this to set both min and max height and width settings." }, { "title": "Enable", "id": "globalSizingMinMaxEnabled", "switch": { "default": false } }, { "visible": "globalSizingMinMaxEnabled == true", "title": "Width", "heading": {} }, { "title": "Min", "id": "globalMinWidth", "format": "min-w-{{value}}", "themeSpacing": { "mode": "single", "default": { "base": { "custom": false, "value": "0" } } }, "visible": "globalSizingMinMaxEnabled == true" }, { "title": "Max", "id": "globalMaxWidth", "format": "max-w-{{value}}", "themeSpacing": { "mode": "single", "default": { "base": { "custom": false, "value": "auto" } } }, "visible": "globalSizingMinMaxEnabled == true" }, { "visible": "globalSizingMinMaxEnabled == true", "title": "Height", "heading": {} }, { "title": "Min", "id": "globalMinHeight", "format": "min-h-{{value}}", "themeSpacing": { "mode": "single", "default": { "base": { "custom": false, "value": "0" } } }, "visible": "globalSizingMinMaxEnabled == true" }, { "title": "Max", "id": "globalMaxHeight", "format": "max-h-{{value}}", "themeSpacing": { "mode": "single", "default": { "base": { "custom": false, "value": "auto" } } }, "visible": "globalSizingMinMaxEnabled == true" } ] }, ``` **Weight:** ```auto { "title": "Weight", "id": "globalTextFontWeight", "format": "font-[{{value}}]", "slider": { "default": "400", "items": [ { "value": "100", "title": "Thin" }, { "value": "200", "title": "Extra Light" }, { "value": "300", "title": "Light" }, { "value": "400", "title": "Normal" }, { "value": "500", "title": "Medium" }, { "value": "600", "title": "Semi Bold" }, { "value": "700", "title": "Bold" }, { "value": "800", "title": "Extra Bold" }, { "value": "900", "title": "Black" } ] } }, ``` ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [August 28, 2025, 3:16pm UTC](https://forums.realmacsoftware.com/t/theme-sizing-properties-example/50288/3 "2025-08-28T15:16:44Z")
Aloha @dan these will be incredibly useful. I should be able to figure them out, but I will ask if I run into any problems. ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [August 28, 2025, 3:25pm UTC](https://forums.realmacsoftware.com/t/theme-sizing-properties-example/50288/4 "2025-08-28T15:25:00Z")
Awesome 🙂 ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [August 28, 2025, 7:18pm UTC](https://forums.realmacsoftware.com/t/theme-sizing-properties-example/50288/5 "2025-08-28T19:18:57Z")
@dan@ben I can get the font weight to work with no problems. But I’m having trouble with the sizing. It works fine if I use the Theme setting, as the value I enter gets applied. But when I then choose any of the other options, the output is always the last value I entered for the THEME setting. Is there some logic somewhere that looks at the result of the TYPE choice and then sets the value? For example, if I choose FULL for the width, I get the result that was last selected when it was displaying THEME. It looks to me like there needs to be something that sets the value to `w-full`when FULL is chosen or `w-auto`when AUTO is chosen. I’m assuming the same is true for BREAKPOINT. Where is the logic being handled, in the hooks.js file, or somewhere else? ---
**Author:** ![MichaelDroste](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michaeldroste/32/37212_2.png) [@MichaelDroste](https://forums.realmacsoftware.com/u/MichaelDroste)\ **Post date:** [August 28, 2025, 9:13pm UTC](https://forums.realmacsoftware.com/t/theme-sizing-properties-example/50288/6 "2025-08-28T21:13:11Z")
Beyond me, but I’m interested… Can you possibly explain a little - if you want - what your doing - and what your using this for? Didn’t mean to bother you - disregard if annoyed 🙂 ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [August 28, 2025, 9:23pm UTC](https://forums.realmacsoftware.com/t/theme-sizing-properties-example/50288/7 "2025-08-28T21:23:08Z")
No problem. This is all part of the 3D Flip Card that I have been working on. A lot of the properties for the card were initially hardcoded into the code. I wanted to make it as flexible as possible to setup so I started adding property controls that allow one to easily set up the key properties for the card. I needed to mimic the way Elements handles some of these properties so they would be familiar to someone using the card. There were no good examples of how to handle these properties, so I thought it best to ask for some guidance. This is now mostly working except for the issues mentioned above. Once I get this all fleshed out I will make it available for free in the marketplace. ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [August 29, 2025, 11:46am UTC](https://forums.realmacsoftware.com/t/theme-sizing-properties-example/50288/8 "2025-08-29T11:46:50Z")
> [@handshaper](#): > > there some logic somewhere that looks at the result of the TYPE choice and then sets the value yes, exactly this. The hooks file checks the `globalWidthType` and applies the `globalWidth` appropriately, something like: ```javascript const { globalWidthType, globalWidth } = rw.props; const finalWidth = globalWidthType != 'theme' ? globalWidthType : globalWidth; // you could then build up a class string for you template const classes = [finalWidth, "some", "other", "classes"].join(" "); // pass through the props you need in your template file rw.setProps({ finalWidth, //
... classes // or:
... }) ``` You can them use either `finalWidth` or `classes` in your template, just depends how you want to handle setting the classes 🙂