Beer CSS: The Secret Weapon for Material Design 3 UIs

#ui #dx #css #frontend

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.

Need 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>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </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>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>
      More Items
      <menu>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </menu>
    </li>
  </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>

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.

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.

Top comments (9)

Steeve • Jul 1 '24

What I like the most of BeerCSS:

Small footprint and Fast to load
Native to web browsers, you don't need compilations
Create component easily with any front-end frameworks (Vue, React, Angular, RiotJS, or Native Web Component)

I created a series for creating a RiotJS application coupled with BeerCSS:
dev.to/steeve/series/26942

Congrats and awesome work @leonardorafael

András Tóth • Jul 3 '24

Ah so this is matcha.css but with Material Design 3 aesthetic? So no JS, just great CSS?

Leonardo Rafael Wehrmeister • Jul 3 '24 • Edited

Yes, It has a JS file but is optional. Is like a helper to write less code (without it, you need to change the classes by your own). Or when you want to use dynamic theming.

Beer CSS is 2 years older than matcha.css. I think Beer CSS is more like a hidden gem, or something like that.

András Tóth • Jul 3 '24

Ah, thanks for the reply! I was curious about how "invasive" is beer.css. I am really looking forward to see more pure CSS frameworks or almost pure CSS frameworks.