Inheritance Indicators (CSS Properties & HTML Tags)

[Joshua_Turvey]

I think it would speed up the workflow if we could easily identify whether a selected element’s properties were being inherited from a parent class.

Using Webflow as a reference (please see image), orange highlights indicate properties that are inherited from a parent class, whilst blue highlights indicate settings belonging to the currently selected class. Hovering over an orange highlight reveals a popup (not shown in the image) that stipulates which class the style is inherited from.

Having some form of visual cue would be fantastic. This doesn’t have to be implemented in exactly the same way as Webflow, but I think it would be great if some form of colour coding could help us identify:

1. If a style is inherited from a parent class/setting
2. Where that style is inherited from

[zachary]

Doesn’t SJ already do this? Sorry if I’m misunderstanding!

[Joshua_Turvey]

That’s really interesting… I’m using Safari and even after updating style settings, Sitejet never colour-codes them like the example in your screenshot. I reached out to the support team and they advised to add it as a feature request. As such, I just assumed it hadn’t been implemented. Can I ask what browser you’re using?

[zachary]

I develop in Chrome - that’s weird that they advised it as a feature request when it’s clearly a bug between browsers - maybe they misunderstood!

[Lucian_Dinu]

Hi @Joshua_Turvey ! While I’m all in, when it comes to visual cues, I don’t think (from what I’ve seen) that these inheritance indicators can work in SiteJet.

In Webflow this idea works because you are actually “writing” (using the UI) the necessary CSS that is for that specific tag (lets say we are talking about a Heading tag H2) or class (selector).
So, in Webflow when you add a Heading H2 Element you have this markup

<h2>Heading</h2>

If you start to customize this element and you don’t specify a class name, Webflow will attach one by default and what you see in the properties panel are all CSS properties for this class.

<h2 class="heading">Heading</h2>

SiteJet is a bit different, you don’t add on the page, plain HTML elements (like: P, DIV, H1…6)… these elements are composed from multiple HTML parts. To a bare minimum they have at least a DIV wrapper.

Here is an example(the HTML markup for Heading H2 Element) in SiteJet

<div class="ed-element ed-headline custom-theme" id="ed-61511996">
  <h2>Headline</h2>
</div>

As you can see this is a bit different, the wrapper has already a few classes (and some things are brought from the global theme). Now, if you select this element in SiteJet in the properties panel, you can visually change properties like: visiblility, margin, padding … but these are properties of the wrapper.

Additionally here you can attach additional classes on the wrapper (Element) or H2 (tag) from ID&Class section.

Other properties like: font, font size, text color … are inherited from the theme and attached to the H2 tag (not the wrapper), you can override these with a custom class or with the inline editor (or inline html editor).

I hope my explanation helps.

BTW … what SiteJet is displaying using color coding on the properties panel (what @zachary have shared) are visual cues for overrides on responsive breakpoints (and these colors match the color of the breakpoint type) .

[Joshua_Turvey]

Thank you for such an in-depth response and explanation, Lucian! I really appreciate you taking the time to write this out. I’ve been having quite a hard time understanding the differences between Sitejet and Webflow but your explanation has definitely shed a lot of light on the fundamental differences between them.

I know this might be beyond the scope of this thread, but based on your description, do you believe inheritance indicators to be superfluous in Sitejet because each new element gets its own wrapper that can be styled completely independently? Please forgive the newbie question here, but is there any danger of bloated and unnecessary code being written with this system?

[Lucian_Dinu]

Hi Joshua! Glad to see that I could help. I’m new to SiteJet (but, not new to web builders or html and css) and I had the same hard time in understanding how it works compared to other builders (P.S I still have a hard time , but I figure out some thing … at least I think so…).

Webflow is the closest to html+css, basically you are writting classes and html with a visual interface (similar in concept with https://pinegrow.com/ , but the UI in Weblfow is easier) … I guess this is the main reason why in Webflow you are “forced” to think in terms of inheritance.

In SiteJet you are somewhere in between Webflow and Elementor, you don’t have to think in terms of inheritance, all these atomic elements have an encapsulated functionality (but not as extended/abstract as in Elementor).
In terms of bloat, I think SiteJet does an excellent job outputting minimal markup.

There are advantages/disadvantages to these approaches, for instance even if I now how to code, I still prefer a builder because is faster for me to work (and what I like in SiteJet is that I can have both of these words code+visual).

I hope it helps.

[Joshua_Turvey]

Very helpful! Thank you, Lucian. I appreciate you taking the time to reply to my queries and your insights. I have a lot to learn and consider! Take care and thanks again.