Better CSS design panel

Feature Request
,
#1

Now that I am working daily with Wappler, I run into some things I will share over the coming weeks.
The first thing is CSS design. I do not use Bootstrap framework (since I am a Zurb Foundation user… and still looking forward to ZF implementation into Wappler !) and so lots of DOM elements show not up in the App tree but of course they are visible in the nice DOM tree tab.
Styling the elements to my preferences I used to do in dreamweaver with their CSS design panels. Talking about visual design: that is more visual designing CSS than the ‘advanced’ CSS tab in Wappler.

Yes you can change, add and remove css styles there and it suggest with auto complete and color pickers. It is exactly the same as the webbrowser inspector. But not ALL CSS rules are in my head.
It would be really nice to have a nicely UI with all the CSS options at hand, even better, to immediately see the effects of the changes while dragging a slider etc.
In this light, do get inspired by other visual design programs (like Pinegrow) but translate it with your Wappler style of UI/UX vision.

#2

Thanks for the feedback Hans!

We are already planning to have a simplified version of the CSS designer that will show most common properties like fonts, spacing and colors directly as UI entries. That will be the “simple/basic” view and the current css editor will become “advanced” view in the CSS designer.

1 Like
#3

I fully agree with this request: the style panel works fine if you already have a good knowledge of css rules.

A note aside: there is an Add Button to insert new rules but once added you have to delete the rule in the css code itself. Why not add a Delete Button ?

#4

@vdweyer a new visual design panel is already available in Wappler since the last few versions. It is still under the “Experimental features” option so you need to enable it first. I suggest you to check the discussion here and test it: RFC: new Design panel - now as Experimental feature

#5

I will also like this. I come from Dreamweaver and css is a little more flexible with css media queries. Also can Edit things with multiple classes here is a little difficult