Beer CSS: The Secret Weapon for Material Design 3 UIs – ██FR█████ █INTELL███████████

This content originally appeared on DEV Community and was authored by Leonardo Rafael Wehrmeister

Ever wanted to build sharp, modern UIs with Material Design 3 but without the bloat of other frameworks? Look no further than, go ahead with Beer CSS!

What makes Beer CSS a great choice for your next project?

Let’s highlight some points:

Material Design Mastery: Built specifically for Material Design 3, Beer CSS lets you implement Google’s latest design language with ease. Think clean layouts, subtle shadows, and a focus on user experience.

Lightweight Champion: Unlike some frameworks that can weigh down your site, Beer CSS is a featherweight. It boasts a tiny footprint, ensuring your website loads fast – perfect for mobile users and keeping your SEO happy.

Code Like a Boss: Forget complex setups and configurations. Beer CSS is all about simplicity. Just include the library and start styling your UI with its pre-made utility classes. Buttons, typography, spacing – it’s all there.

Tweak to Perfection: While Beer CSS champions Material Design 3, it doesn’t hold you hostage. You can still customize things to match your project’s unique needs.

Getting Started is a Breeze

No time for lengthy documentation dives? Beer CSS gets you coding fast. Think of it as a UI kit with ready-to-use classes for all the essentials. Just add the library to your HTML and start applying classes to your elements.

Ready to Brew Up Something Awesome?

Head over to the Beer CSS website (https://www.beercss.com) to explore the docs and see it in action. You can also grab it from Github (https://github.com/beercss/beercss) and get started building those sleek Material Design 3 UIs in no time.

Here are some real world examples

If I told you that you can do the work with a half of code, do you believe me? Beer CSS has an unbelievable DX. You will get it when you start to work with it. Here are some real world examples:

A menu dropdown

// Beer CSS
<button>
  <span>Button</span>
  <menu>
    <a>Item 1</a>
    <a>Item 2</a>
    <a>Item 3</a>
  </menu>
</button>

// Vuetify
<v-menu>
  <template>
    <v-btn color="primary">Button</v-btn>
  </template>
  <v-list>
    <v-list-item>
      <v-list-item-title>Item 1</v-list-item-title>
      <v-list-item-title>Item 2</v-list-item-title>
      <v-list-item-title>Item 3</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>

// Quasar
<q-btn color="primary" label="Button">
  <q-menu>
    <q-list>
      <q-item>
        <q-item-section>Item 1</q-item-section>
      </q-item>
      <q-item>
        <q-item-section>Item 2</q-item-section>
      </q-item>
      <q-item>
        <q-item-section>Item 3</q-item-section>
      </q-item>
    </q-list>
  </q-menu>
</q-btn>

// Beer CSS
// Multi level menu dropdown (do you believe? 🤯)
<button>
  <span>Button</span>
  <menu>
    <a>Item 1</a>
    <a>Item 2</a>
    <a>Item 3</a>
    <menu>
      <a>Item 1</a>
      <a>Item 2</a>
      <a>Item 3</a>
    </menu>
  </menu>
</button>

A card with buttons

// Beer CSS
<article>
  <h6>Title</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <nav>
    <button>Button 1</button>
    <button>Button 2</button>
  </nav>
</article>

// Vuetify
<v-card>
  <v-card-item>
    <h6>Title</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </v-card-item>

  <v-card-actions>
    <v-btn>Button 1</v-btn>
    <v-btn>Button 2</v-btn>
  </v-card-actions>
</v-card>

// Quasar
<q-card>
  <q-card-section>
    <h6>Title</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </q-card-section>

  <q-card-actions>
    <q-btn>Button 1</q-btn>
    <q-btn>Button 2</q-btn>
  </q-card-actions>
</q-card>

Reusing the same html content

// A card with title + button
<article>
  <h6>Title</h6>
  <nav>
    <button>Button 1</button>
  </nav>
</article>

// A dialog with title + button
<dialog>
  <h6>Title</h6>
  <nav>
    <button>Button 1</button>
  </nav>
</dialog>

// A menu dropdown with title + button
<menu>
  <h6>Title</h6>
  <nav>
    <button>Button 1</button>
  </nav>
</menu>

Customizing with readable global helpers

<article class="small|medium|large|round|no-round|border...">
  <h6 class="small|medium|large...">Title</h6>
  <nav class="right-align|center-align|left-align...">
    <button class="small|medium|large|round|no-round|border...">Button 1</button>
  </nav>
</article>

Is Beer CSS the Right Choice for You?

If you prioritize speed, ease of use, and a clean Material Design 3 aesthetic, Beer CSS is your best friend. However, if you need extreme design customization or aren’t a fan of Material Design 3, you might want to check out other general purpose framework.

This content originally appeared on DEV Community and was authored by Leonardo Rafael Wehrmeister