Custom Chip - Beer CSS Tips #2

#css #tutorial #html #javascript

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 custom chips. The logic of chips is very simple.

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

1) First, you need to create a chip element.

<a class="chip">Chip</a>

2) You can use a form helper like border or round.

<a class="chip border">Chip</a>
<a class="chip round">Chip</a>
<a class="chip border round">Chip</a>

3) You can add a media element like i, img, svg or video inside a chip.

<a class="chip">
  <i>search</i>
  <span>Chip</span>
</a>

4) With a position helper like front or back, you can determine if the media element is clickable or not. Optionally you can use the wave or no-wave helper too:

<a class="chip">
  <i class="front wave">search</i>
  <span>Chip</span>
</a>

5) You can use another elements inside a chip like badge, tooltip, menu, progress, etc...

<a class="chip">
  <i class="front wave">search</i>
  <span>Chip</span>
  <span class="tooltip">Tooltip</span>
</a>

<button class="chip">
  <i class="front wave">search</i>
  <span>Chip</span>
  <menu>
    <a>Item 1<a>
    <a>Item 2<a>
    <a>Item 3<a>
  </menu>
</button>

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 how far Beer CSS can go and I achieve +100 different use-cases of chips 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/BaGOLvJ

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