Design Panel - Visualizing the CSS inheritance

We all love the new Design Panel. It makes it so easy to create class selectors and style various elements.

CSS Inheritance

This is all great, but still CSS and it’s inheritance can be hard to understand and not always clear where all those styles come from. This is specially true when you are combining various CSS Frameworks with own styling.

The problem

For example when using Bootstrap 4 and giving elements colors with their predefined classes, those colors have the so called !important flag on - so can’t be overridden!
So this can be very confusing when you are setting different color with the Design Panel and you wonder why it is not working.

Design Panel Color Coding

To tackle all this and make it much more visual, as you are used to in Wappler, we have come up with color codes :slight_smile:

when you also hover, you will see exactly where the inheritance or override is coming from:

image

image

So what do you think @wappler_ambassadors and great users? Is this a good way to visualize things?

6 Likes

My only issue may be the colour of the ‘red’ elements. Kinda hard to read, for me anyway. Other than that I think it looks good and makes sense.

1 Like

I like colour coding so long as it is not too complicated and does not muddy the water.

In the last screenshot above, does it mean that the user cannot override the .text-success colour?

@George, @Teodor and team. This is a superb addition. While it appears subtle, it is a very useful enhancement that I feel will noticeably improve the user experience by eliminating confusion. Nice one!

1 Like

Yes exactly. That is why we choose red and the field will be read only as there is no point in entering any value.

We are still looking for ways to make it more clear to the user why he can’t change the value.

Currently in the top text you will see the class and it’s definition and where it comes from, but it might be better to show on which node the class is set that causes the trouble and not where it comes from.

Indeed there is a need for some precision about the css stuff as it can get easily confusing especially for those who are knew to Wappler or are not very comfortable yet with css and the suitabilities (custom, override, inherit, bootstrap).

I like the color codes :slight_smile:

Well maybe @fatherofinvention has some ideas of naming convention and better visual explanation on the UI so that even people less familiar with the CSS terminology understand clearly what is going on.

Very nice and informative to the user. Two questions:

  1. Would it be hard to make the red text use line-through? I think that would make it absolutely clear.
  2. How hard would it be to have the property link to the setting in the app property panel? So in this case, it will go over to where the color is being set on the text as the success class. I think almost anything that would be overwritten would be settable in the app panel? This would allow the user to change it from success to default which will get rid of that, won’t it?

Bonus Question: I almost wonder if it would just be better to hide the red elements? As they say, out of sight - out of mind.

Love the direction. I put a Wappler poster above my bed so I can stare at it when I go to sleep. : )

you have literally snatched words from my mouth, @George. i was going to request for this.

few points to note:

  1. just changing the text colour of the label (‘colour’, ‘size’) to orange/red is NOT enough. please consider adding a BG with a lighter shade of same colour so that it gets highlighted clearly. visually more appealing i guess. something like this:
    image
    BG height is +4px and width is +8px from the font area in px.

  2. also have a new colour (suggested: blue or green) on the label for components which have been edited in the respective breakpoint. so that in live view, user can see what all things were changed. the icon colours of selected properties already turn blue like this:
    image
    if the label colour also changes to blue with light blue bg - that’ll be better IMO.

  3. how will the inheritance work?
    a. value is inherited from parent element.
    b. value is inherited from a previous breakpoint of same element.
    c. value is inherited from first class in case the selected element has a combo class.
    d. value is inherited from another state (hover, active, etc.)
    i hope all these cases are included when ‘orange’ the property.

  4. further points to improve UX for inheritance popup content:
    a. if the inhertance is coming from a parent element, please show type name (div, form, etc.) or/and class name of the parent element.
    b. if the inheritance is coming from previous breakpoint, show the breakpoint icon (mobile, tablet, etc.).
    c. if the inheritance is coming form first class of the combo class, show the breakpoint icon with the class name.
    d. if the inheritance is coming from another state (hover, active, etc.), show the breakpoint icon with the class name and “::”.

  1. hover might not be a good option IMO. because that would mean whenever you take the mouse over to the design panel to set/select any property, something will surely popup as you will inadvertantly hover your mouse over one or the other properties.
    this is just my feeling seeing Wappler UI and the screenshots above, not 100% sure if click would be better than hover.

will add further to this, if we can think of more inputs later today.

i suggest not to hide. many times will need to know what is overwriting so that corrective actions can be taken manually. also, hiding elements will change the UI making the UX very inconsistent.

most likely this would happen becuase a property is already set via bootstrap classes from the ‘app structure’ panel. so to override that, bootstrap class will have to be removed.
in other cases as well, knowing what is overriding is good.
plus all this info is hidden, only visible on hover, so not cluttering prima facie.

This points seems a bit of a deviation from original post - but there should be an !important checkbox for all styles so that the overridden (red/purple) marked styles can be overridden.
Just a check box, no lable. Wouldn’t take up much space. (!important tooltip can be shown)
This also required from the view that styles right now are divided between bootstrap classes (properties panel) and design panel. And there is no way to apply similar styles from design panel due to overriding issues.
For eg: color that is marked red in design panel can still be overridden from properties panel by using bootstrap class such as text-warning - because these classes use !important.

1 Like

After reading the comments here we came up with a new color scheme.

image

The inheritance is the value that is set in an other css rule, this can be on the same element or from a parent element. The overridden value is from a rule that has an higher priority, from a css declaration with important or from the style attribute. To see all the rules that apply to the selected element you have to check the Styles panel, the information is only to let the user know where the styling value is coming from and why it can’t be set.

About adding an important checkbox. I don’t think that is a good idea, you should avoid using important in css. If you want to use it then edit it directly in the css add it using the styles panel.

5 Likes

Colour schemes look much better now.
Can you please update your post to include which color is for what?

The reason why having an option to make styles important is required because Bootstrap uses it and hence custom CSS doesn’t work.
For eg: A card element has margin by default, and it can’t be removed/changed using the margin options in design panel.

Going into styles/CSS to add !important seems like something that can be avoided. Even the text inputs in design panel do not allow writing !important directly.

1 Like

Well you can always add margin 0 in the App Structure panel, where all the Bootstrap 4 options are…
That’s why Bootstrap 4 offers special padding and margin classes, which we use in app structure:

1 Like

The blue color is the value set in the design panel for the current rule. The other colors were explained by George, orange is an inherited value and red is an overridden value.

The styles for bootstrap that need to be overridden can be done using the utility classes bootstrap has. These can be applied from the App Structures Properties Panel. Just as Teodor explains.

precisely my point. what i request further is to pin point the source: it can be a parent, it can be another breakpoint, another state, etc. (i gave 4 point i could think of).

image
in this screenshot shared by George, i see the file name is given from which it has been inherited, which is good.
it also gives the element name (which will be very helpful when it is coming from a parent element or another class when there are combo class applied).
then there is the value. this i do not understand the use of - because the value is already there in the panel to see.
in addition to this i suggest to have indicator for breakpoint and state (hover/active/etc.) - this may seem difficult or too much - but am sure there can be a way to incorporate these. or maybe i am not right about this!
ref:
image
in above image, (1) is the selected breakpoint of an element and (2) is showing the breakpoint with class name where it is being inherited from.

agreed and understood

further:

a list of all combinations of [breakpoints+states+single class+combo class] where any value was set manually can be dispalyed as a dropdown.

so, after seeing the exact ‘breakpoint+state’ from where the value is coming, user can goto that point quite easily from a dropdown where the class input is on design panel.

Am just sharing out loud ideas and feedback - to try and make Wappler better for ALL.

1 Like

At this moment the tooltip shows the source file and line number where the rule is located. The selector that was matched, like a.my-link:hover and the declaration where the value was set (it is also smart enough to detect shorthand notations).

image

What it currently doesn’t show is the html element the style is coming from (you could perhaps see that from the selector). Also the media query is missing. But we plan to improve that and it not yet final.

The dropdown with all matched rules is planned, but that is something for later. Also a lot of controls are going to be added and some existing get updated.

2 Likes

super. looking forward.
i guess when we start using it - we’ll get a better handle of it!

also, i just noticed the rounded rectangles on the BG. love it. :smile:

1 Like