Am designing a new page and trying to do all the styling without typing any CSS, and it is going really well!
Big praise for Design View, which I hadn’t quite understood properly the first time around.
I love the different font colours - orange for what is already set, white for what you have set here. (Although I keep getting red which I don’t understand and then the red changes to orange when I click away from Design tab and then comes back!).
The attempting to type no CSS would be going even better if you could add:
:disabled and :invalid selectors too…
Shadows…
… and Transitions would be totally amazing!
I may add to the list if I find other things which seem missing.
Where styles are determined by Bootstrap, I would have thought it might cause confusion to add extra options in the Design Panel for these styles. Also, now we have the Theme Manager, it’s easier to manage styles centrally/globally - without adding extra classes.
For example the class which determines the colour for invalid inputs is set by the ‘Warning’ colour in Bootstrap - which makes sense. In most cases, it would probably be appropriate for these colours to correspond, so if you want to choose a different colour for ‘invalid’, it might be best to set this globally in Bootstrap, using the Theme Manager. If you don’t want the colours to correspond, you can of course add your own class manually.
Similarly, for shadows, there are Bootstrap classes for several types of shadow. I expect these will be added in the Wappler UI at some point, but I would have thought they would belong in the App Structure panel, not the Design Panel.
Generally, I think it’s best to if options available in App Structure - determined by Bootstrap and the chosen theme - are used first, and the Design Panel only used if the required styles are missing. If there are useful options currently missing in the Theme Manager, perhaps they could be added later. (It would be useful to be able to add sass variables manually too.)
But we have to remember that Bootstrap is our support, not our limitation, which is why we have the Styles and Design Tabs… so in my opinion they should support us to be as code free as possible!
I would certainly not advocate any limitations. However, if, using the example I gave in my last reply, there was a Design Panel option to choose a style for the colour for invalid inputs, people might assume that was the best or only way to apply that style - but in most cases it wouldn’t be either.
I mentioned in a related thread a year ago, that searching for ‘primary’ in bootstrap.css found almost 60 occurrences. The definition of each colour affects a whole series of related elements - not only text, but also backgrounds, buttons, hover effects, gradients etc. A logical extension of your suggestion might be to offer options for all of these in the Design Panel. You could argue this would help in supporting users to be ‘as code free as possible’. From one point of view, this is correct, but at the expense of an unnecessarily and increasingly complicated UI, and encouraging bad practices.
There are probably enough colours available in Bootstrap anyway; there are more generated than the dozen or so you choose in Theme Manager as percentages etc. are used when the css is created. However, if you need more, there are no limitations imposed by Wappler. I think the same applies to fonts. You could argue that the UI should offer font selections for each heading type for example. I think it would be a mistake to offer any options for fonts, beyond what’s available in Bootstrap (and which can be selected within Wappler).
