Style panel too messy.

[epzidev]

The existing style panel is way too complicated and hard to find the appropriate attribute to adjust. Would like to see a more simplified one with some of the non-common panels collapsed! Love the concept.

[DavidBabinec]

For sure, I agree. Instatic is very RAW at its current form, but it's matter of polishing and attention to detail :) If you have any specific ideas on the layouts of specific sections, feel free to submit a PR or discuss the idea here.

[epzidev]

For me, the level of details in the Framer style panel (the non-expanded version) is just right.

[DavidBabinec]

would you mind posting some screenshots here? :) We can discuss what's good, and what could we use in similar way

[epzidev]

Yeah sure! Love to share my two cents. I think Framer does a good job here in simplifying the amount of details that presented at default in the style panel.

This image shows the amount of styling options that is available when I selected a Stack (for Instatic's case, it should be equivalent to Container I think).

1. For Size section, the default is just Width and Height. Min Height appears here because I added it for my project but it doesn't have Min, Max for Height and Width shown out all at once.
2. For Layout, it shows only the relevant attributes depending on whether or not Stack or Grid is selected. For this case I selected Stack, and the Direction is just simplified to Horizontal / Vertical without the reverse options.
3. The Margin / Padding option presented here is also a lot more simplified and easier to navigate. The Instatic version is representative of the view you get when you inspect a page, but for me its overkill.
4. The Styles panel in Framer encapsulates the Typography, Background and Border section in Instatic. The simplified version on Framer is already sufficient for me to encapsulate all of my use cases.

This image below shows the amount of styling options when I selected a Text object. Comments are pretty similar as above, but one thing I appreciate which I think Framer does quite well here is that they change up the relevant attributes depending on the node that you have selected.

1. They have an additional Text section here to define the typography, which is something not available when you select other non-text nodes
2. They also don't feature the Layout option as that is a Stack / Container-relevant node.

[epzidev]

Oh yeah, one thing I'd really love to see in Instatic is something like Framer's sizing model. In Framer, each element's width and height can independently be set to Fixed / Relative / Fill / Fit Content (with Viewport as an extra option on stacks).

What makes it such a time-saver is how intuitive it makes parent/child sizing. You always know whether a node is hugging its contents, filling available space, or locked to a fixed size, without fighting the layout. If there's already an equivalent in Instatic I haven't found it; if not, it'd be a big quality-of-life win.

[LauGau]

I just wish for a raw CSS panel where we can scope the current element like:
%root% .class{ display: flex;}

[DavidBabinec]

You can scope CSS in our UI too. Also you can write custom stylesheets.

We will also add a full option to write CSS in code instead of UI in the right panel.

[AidanAJoyce]

GREAT. And the panel's UI will take on the states of what is changed by the CSS ?

[AkivaMajowka]

please give us access to html and JS per element to when you implement pure CSS alternative to styling ui