Forum Discussion

peterlu's avatar
peterlu
Champion
11 years ago

Lithium html markup change

Hi Lithium Dev,   We have noticed that recently your team has been updating a lot of HTML at the layout level. And it breaks 90% of my customers community. Please be careful of doing so, coz these...
  • DougS's avatar
    DougS
    11 years ago

    Hi Peter,

     

    I spoke with the development team that made this change and they are going to change the markup so the new div tag they added gets moved inside of the top div.lia-quilt for the page so the selector you pointed out will continue to work.  We also think that as a general rule, we shouldn't be adding html around that top-most div.lia-quilt.  

     

    However, we do need the ability to add new markup to the page in order to add new features and functionality to the community.  We won't (intentionally) remove elements, change class names, or change the order that class names should come in css selectors, but we sometimes need to wrap pre-existing tags in other tags, so selectors that use the child combinator selector (div.lia-content > div.lia-quilt) are dangerous to use because they may stop working when we place additional markup around already-existing markup on a page.

     

    -Doug

peterlu's avatar
peterlu
Champion

On the edit message page, originally Lithium have 

div.lia-content > div.lia-quilt

 

In the new version, Lithium added in 

div.lia-content > div[data-message-id="3215"] > div.lia-quilt

 

If our customers css are like 

#lia-body .lia-content > .lia-quilt > blablabla

then it is gonna break.

 

My question is why don't add the data-message-id into div.lia-quilt? This way no html layout is changed.

DougS's avatar
DougS
Khoros Oracle
11 years ago

Hi Peter,

 

I spoke with the development team that made this change and they are going to change the markup so the new div tag they added gets moved inside of the top div.lia-quilt for the page so the selector you pointed out will continue to work.  We also think that as a general rule, we shouldn't be adding html around that top-most div.lia-quilt.  

 

However, we do need the ability to add new markup to the page in order to add new features and functionality to the community.  We won't (intentionally) remove elements, change class names, or change the order that class names should come in css selectors, but we sometimes need to wrap pre-existing tags in other tags, so selectors that use the child combinator selector (div.lia-content > div.lia-quilt) are dangerous to use because they may stop working when we place additional markup around already-existing markup on a page.

 

-Doug

  • peterlu's avatar
    peterlu
    Champion
    11 years ago

    Hi Doug,

     

    There is a big reason we use > in .lia-content > .lia-quilt.

    We have found that this .lia-quilt class is not unique and it exists in component level. That is the main reason to use >

     

    I agree that Lithium can update their HTML. But for top level HTML, Lithium needs to be very careful, because those HTML are always used for layout CSS purpose. And in the component level HTML, there wouldn't be too much a problem.

     

    If you need something for JAVAscript hooks, you should only add attributes to the current HTML instead of adding HTML wrapper to the current HTML, simply because HTML is very connected to the quilt structure and your tutorial and TKB articles explain that quilt strucuture in HTML terms. So if you are going to update the layout HTML, you are going to update all your tutorials and articles :)

     

    I am just throwing my 2 cents and hope it can reduce the emails to your support team :)

     

    And big thanks to push the change for me.

     

    BTW, ANOTHER BIG SUGGESTION for future projects:

    At the top level quilt, is it possible for get Lithium DEV to add a special class for the top level quilt? eg. .lia-quilt-master or something else.

    Because we are using that top quilt class a lot, and lithium quilt is like quilt nested in a quilt nested in another quilt. So that we can just use that .lia-quilt-master instead of using > in css

     

    Peter

    • DougS's avatar
      DougS
      Khoros Oracle
      10 years ago

      Hi Peter,

       

      That makes total sense.  We really do need to fix that top quilt element for pages so it has a unique CSS class you can use.  I have filed a ticket to have this added and checked in a change to add a css class named "lia-top-quilt" to the outer-most quilt on the page.  This will be available in 14.11.

       

      Thanks,

       

      -Doug