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>
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)
Ah so this is matcha.css but with Material Design 3 aesthetic? So no JS, just great CSS?
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.
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.
What I like the most of BeerCSS:
I created a series for creating a RiotJS application coupled with BeerCSS:
dev.to/steeve/series/26942
Congrats and awesome work @leonardorafael
This looks great, looking forward to give it a try
This looks great! Does it have components for 1) a calendar/day choice, and 2) a modal?
1) It uses the default calendar from desktop or mobile browser.
2) Yes, modals are the
<dialog>
tagThis is an awesome set of tools! I think I'm gonna go make happy just to play with it all.
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!