beercss / beercss

Build material design interfaces in record time... without stress for devs... πŸΊπŸ’›
https://www.beercss.com
MIT License
940 stars 47 forks source link

"ol" and "ul" Regression #262

Closed crypnull closed 2 months ago

crypnull commented 3 months ago

I had some "ol" and "ul" lists throughout my page content, in the body, normal text, it looks as the update to add support for "ol" and "ul" broke them in normal page content.

Here is a CodePen, if you change the version back a few versions you can see what I mean. https://codepen.io/1971562171/pen/abMYNQr

leonardorafael commented 3 months ago

Hi @crypnull , this is the default behavior after 3.4.13, to follow the HTML semantic recommendations we unified ul, ol, nav and row. And now they have the same behavior.

HTML semantic recommendations:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu https://www.w3schools.com/tags/tag_menu.asp https://www.w3schools.com/tags/tag_nav.asp

More about:

Release 3.14.3: https://github.com/beercss/beercss/releases/tag/v3.4.13. Related issue: https://github.com/beercss/beercss/issues/240#issuecomment-1885679855 Codepen: https://codepen.io/leo-bnu/pen/XWGERyO

crypnull commented 3 months ago

I see you wrote "add support to ol, ul, li inside nav and menu" but I'm using it outside the nav and menu, just in the page content. A lot of my pages used these lists which now have broken.

Is it no longer possible to use this basic HTML feature in this framework without hacking it back in myself?

https://www.w3schools.com/html/html_lists.asp

leonardorafael commented 3 months ago

If you just want to get the default styles from ul, ol and li do:

ul, ol, li {
  all: revert;
}

Otherwise you can add the vertical helper on ol, or ul elements to render a li below other.

// to render as vertical
<ul class="vertical">
  <li>1</li>
  <li>2</li>
</ul>

// to render as horizontal
<ul>
  <li>1</li>
  <li>2</li>
</ul>

I don't understand what are you trying to do, but I'm trying to help you. Do you look at the codepen https://codepen.io/leo-bnu/pen/XWGERyO? Our docs https://github.com/beercss/beercss/blob/main/docs/NAVIGATION.md?

crypnull commented 3 months ago

The CSS you provided fixed my issue, all I am doing is using ul for a normal list, with bullet points. In the page content, not in any menu.

guidouil commented 3 months ago

I have the same issue because list are used in markdown a lot, it should render vertically as default if not inside a nav IMHO. Now I need to have to change the converter to ad vertical class to converted list... and I also agree the horizontal view is what I need inside a nav.

Edit : I finally added this to my main css file to move on, since I realy only need the list inside articles to show as lists.

article ul,
article ol,
article li {
  all: revert !important;
}
leonardorafael commented 3 months ago

In the next release, I will rollback the styles on <ul>, <ol>, <li> (except inside <menu> or <nav>). I agree the styles on it could be intrusive.

Thanks for feedback!