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)
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 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!
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>tag