List expansions - Beer CSS Tips #5

#css #tutorial #ui #ux

Hello,

I want to share a serie of posts containing some tips of Beer CSS. Beer CSS is a new framework around, based on (not restricted to) Material Design 3. Material Design 3 is a design system created by Google. In this post, we will learn about the list expansions. The list expansions are lists with items and subitems.

If you don't known the concept of settings, elements and helpers used by Beer CSS, you can read this page.

1) First, we will create some items inside an article element.

<article>
  <a class="row wave">Item 1</a>
  <a class="row wave">Item 2</a>
  <a class="row wave">Item 3</a>
  <a class="row wave">Item 4</a>
  <a class="row wave">Item 5</a>
</article>

2) Now we will use the details and summary elements to have items and subitems. Use the none helper on summary element to empty the default styles from browser. In this example, after click on "Item 1" it will show the other items:

<article>
  <details>
    <summary class="none">
      <a class="row wave">Item 1</a>
    </summary>
    <a class="row wave">Item 2</a>
    <a class="row wave">Item 3</a>
    <a class="row wave">Item 4</a>
    <a class="row wave">Item 5</a>
  </details>
</article>

3) You can reuse the items and subitems code in any other element like nav, menu, tooltip, dialog, etc:

<nav class="drawer">
  <details>
    <summary class="none">
      <a class="row wave">Item 1</a>
    </summary>
    <a class="row wave">Item 2</a>
    <a class="row wave">Item 3</a>
    <a class="row wave">Item 4</a>
    <a class="row wave">Item 5</a>
  </details>
</nav>

4) How about a multi-level menu? We can do a multi-level menu using the same code inside a tooltip element. And the tooltip element inside a summary element:

<nav class="drawer">
  <details>
    <summary class="none">
      <a class="row wave">Item 1</a>
      <div class="tooltip max right">
        <details>
          <summary class="none">
            <a class="row wave">Item 1</a>
          </summary>
          <a class="row wave">Item 2</a>
          <a class="row wave">Item 3</a>
          <a class="row wave">Item 4</a>
          <a class="row wave">Item 5</a>
        </details>
      </div>
    </summary>
    <a class="row wave">Item 2</a>
    <a class="row wave">Item 3</a>
    <a class="row wave">Item 4</a>
    <a class="row wave">Item 5</a>
  </details>
</nav>

The helpers of Beer CSS can be used in any element. This makes the framework very customizable. It has the same logic and names in all ways. This makes the Beer CSS very easy to understand and reuse. I made a codepen to see some list expansions created with Beer CSS here.

Hope you enjoy this article. Thanks for read!

Beer CSS:
https://www.beercss.com

Material Design 3:
https://m3.material.io/

Codepen:
https://codepen.io/leo-bnu/pen/Baewrgg

About settings, elements and helpers used by Beer CSS:
https://github.com/beercss/beercss/blob/main/docs/INDEX.md