So you want something similar like webflow display?
I will check what others do and revert with ideas 🙂
Downside is it would make UI look more busy, also hard to display more items and all need icons.
It's only easy when there are a few simple once.
We thought about it a lot.
I agree with you @Alex , this would be better as a toggle group like Webflow. There is enough space for all values including grid.
Advantages:
- user sees all options without opening a menu
- icons provide visual hint about how each value functions
- reduced # of clicks to change display value compared to options menu
Disadvantages:
- we must design these icons
@Mark Would you be interested in designing an icon set for these 6 display values - parallel to Webflow?
we're talking about this section right?
Can we add a basic grid while we're here? Product already supports grid (gets added when using AI). We don't need a complex thing like webflow. Something like framer or ycode is enough.
Apologies in advance if I'm blowing up something.
Examples of framer & ycode below as well as what I do for workaround at the moment (which also works fine, just not as pretty 🙂 )
Alex's cheeky workaround to still get cssgrid 🙂 - Give token of grid (set display to flex because flex/grid share layout options so builder UI works).
- Give class of grid (from properties) - this will overrride the token display (so you get display grid and can still use layout options from flex UI)
- Minimized CSS grid stylesheet in header.
Image shows example of usage:
Do these take icons long to design? Could we use some of the existing ones in Radix initially?
Icons do not take long to design, but I'll let Mark set his own deadline. We already have a grid icon and a display: none icon (eyecon: closed) so there's only 4 to design. Thank you very much for your help @Mark !
But it may be some time to add the grid feature to the builder @Alex . I'll keep in mind to prioritize that soon, but last I heard there are some tech challenges with the implementation. Not related to the UI. So since it will take some dev time it will probably not come before the CMS release.
Yup makes sense thanks.
I have a hunch the grid tech challenge is tied to the fancy UI as the functionality is already there (I can ask AI to set display to grid, set columns etc), we even have a UI it's just missing grid parent (columns, rows, flow).
this is currently in prod:
@Oleg Isonen might you provide insight into what is blocking grid? If it's just Ui then I'll go ahead and design that.
I'll have the icons done today
A thought - maybe we should use a small "x" for display: none rather than the closed eye. Reason is the closed eye is used for "hidden" in the Navigator and other places. "Hidden" and "display: none" are functionally different so they should have different icons or else users might think they are interchangeable.
Doesn't affect the icon work either way
Also the small x is used in many toggle groups to represent "none"
There is "hidden" attribute on html elements which has display: none styling.
"Show: false" excludes content from html completely
@TrySound in your opinion, should it be an X or an eye?
No eye to not conflict with "show"
sorry, by eye I meant closed eye. But I think I'm leaning to "x" as well
we need some kind of icon
Here's the layout section with a Toggle group.
Few things:
- I didn't do a UI for the Grid, but the Grid Icon is there in the Toggle group
- Currently we have inline-flex as an option in our dropdown. Webflow doesn't include it. I made an icon for it and included it in hours. Happy to remove it. (if we remove one of the icons, we could move the "Display" label to the left instead of above the toggle group)
There are more display options than what wf has
These icons for display don't mean much unless you memorize them
Yea anyone past their first couple of websites will be very familiar with all the display options bc they are so frequently used. From personal experience I estimate users will change this display property ~30-100x per project, so it's a situation where speed is a priority and the options are familiar, thus a toggle group with icons makes the most sense.
The full names of all the options will be in the tooltips which will reveal in about as much time as it takes to open the select menu anyway. The only reason a select menu would be preferable is if we add more options than we can fit in a toggle group.
Looks great to me @Mark
Please paste this in the Layout docs page. I will write tooltips for each option and also update the layout of the section generally and push that as a bulk update for whenever the devs can get to it.
Pasted it in the Layout docs page
