I started to use the design panel for HTML today and I wanted to give some feedback, a “bug”, and some general thoughts and impressions.
Creating and Updating theme.css
The theme.css file is created upon initializing the panel, and it’s placed before any of the rules so the main css-file can read them. This led to some abnormal behaviour since I reset some things in my CSS, so putting it last worked better for me.
I updated the theme.css file but that didn’t influence the design panel. It has it’s own rendering and doesn’t register change. This to me feels off since I can’t trust the css-file anymore and have to change things in the editor with the limitations of a visual editor to reflect in my code.
The second thing I noticed is that you can make variations of your designs, but the css doesn’t change with it. It’s like the css is not at all connected to the instancing I do in the design panel, and I believe in the background it’s Sass running and producing the theme.css file.
Editing and Syncing Design Panel
I already have some css-variables that I just would love to load into the design panel, and use them on the mark-up of the page. That would save a ton of work and the feature is already availabel: (!) uses it so why wouldn’t the design panel use it?
The benefit of the design panel is that you can actually create your design system foundation with it, and serve as the boiler-plate version of the styles panel. A JIT tool for visual editing frameworks, regardless.
The other thing I find missing is an export function. Yes, the theme.css can be exported to be used, but not in another instance of PG itself… You would have to remake it so you can work in a design panel with the design you made in the design panel. Meaning, the design panel doesn’t export very well to itself imo.
My take; give the design panel !-superpowers and some read/write/sync functionality, and it’s a winner. If every “new design” you create from the design panel would get it’s theme-1.css, theme-2.css name, it would be very clear which version is which and where to change things.
Buggy Deletion and Replication
I deleted the theme.css file to see if anything changed, but to my surprise everything still kept running. This is caused by the fact it’s still referenced at the top of your html, so if you remove that, deactivate the design panel and then reactivate it, it creates a new theme.css in the html but not in the folder
So in short; there’s a css-file in PG that keeps floating around and influencing the design, but I can’t delete it because it’s not there (I updated the whole project in PG, double checked in Finder and VScode). The weird thing is if I outcomment the href in html, the styles do disable so it does read something.
But like I said, it’s probably some Sass-file still running live because it doesn’t rely on the generated css-file to be applied to your page. This is bad because then what you see in PG is not what you will see IRL, it’s literally a layered illusion of a css-file that will never be shipped with your product.
So like IKEA, for now only put it together once because it works nicely. But delete it or deactivate it and stuff can get funky.