DEV Community

Cover image for Beer CSS: The Secret Weapon for Material Design 3 UIs
Leonardo Rafael Wehrmeister
Leonardo Rafael Wehrmeister

Posted on

Beer CSS: The Secret Weapon for Material Design 3 UIs

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>
    <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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
latobibor profile image
András Tóth

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

Collapse
 
leonardorafael profile image
Leonardo Rafael Wehrmeister • 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.

Collapse
 
latobibor profile image
András Tóth

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.

Collapse
 
steeve profile image
Steeve

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

Collapse
 
jeffstahlin profile image
Jeff

This looks great, looking forward to give it a try

Collapse
 
aneesh060 profile image
Aneesh Kumar

This looks great! Does it have components for 1) a calendar/day choice, and 2) a modal?

Collapse
 
leonardorafael profile image
Leonardo Rafael Wehrmeister • Edited

1) It uses the default calendar from desktop or mobile browser.
2) Yes, modals are the <dialog> tag

Collapse
 
deejuh719 profile image
K Surratt

This is an awesome set of tools! I think I'm gonna go make happy just to play with it all.

Collapse
 
felipenkniess profile image
Felipe Niehues Kniess

I have used BeerCss in some personal projects and it is very simple and practical to use!!
I think it's very good and I recommend it to everyone!