是否曾經想過使用 Material Design 3 建立清晰、現代的 UI，但又不想受到其他框架的臃腫影響？別再猶豫了，快來使用 Beer CSS！
是什麼讓 Beer CSS 成為您下一個專案的絕佳選擇？
讓我們強調一些要點：
🧙♂️Material Design Mastery： Beer CSS 專為 Material Design 3 打造，可讓您輕鬆實現 Google 的最新設計語言。考慮乾淨的佈局、微妙的陰影和對用戶體驗的關注。
🏅輕量級冠軍：與一些可能會壓垮您網站的框架不同，Beer CSS 是輕量級的。它佔用空間很小，可確保您的網站加載速度快 - 非常適合行動用戶並讓您的 SEO 滿意。
💪像老闆一樣編碼：忘記複雜的設定和配置。 Beer CSS 就是為了簡單。只需包含該庫並開始使用其預製實用程式類別設計您的 UI。按鈕、排版、間距——一切都在那裡。
🪄調整至完美：雖然 Beer CSS 支持 Material Design 3，但它不會束縛您。您仍然可以自訂內容以滿足專案的獨特需求。
入門輕而易舉
沒有時間進行冗長的文件研究？ Beer CSS 讓您快速編碼。將其視為 UI 套件，其中包含所有必需功能的即用類別。只需將庫加入到您的 HTML 中並開始將類別應用到您的元素即可。
需要一些現實世界的例子嗎？
如果我告訴你只用一半的程式碼就可以完成這項工作，你相信我嗎？ Beer CSS 具有令人難以置信的 DX。當你開始使用它時你就會得到它。以下是一些現實世界的例子：
下拉式選單
// 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>
帶按鈕的卡片
// 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>
重複使用相同的 html 內容
// 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>
使用可讀的全局幫助程序進行定制
<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>
準備好釀造一些很棒的東西了嗎？
前往 Beer CSS 網站 (https://www.beercss.com) 瀏覽文件並查看其實際效果。您也可以從 Github (https://github.com/beercss/beercss) 取得它，並立即開始建立那些時尚的 Material Design 3 UI。
Beer CSS 是您的正確選擇嗎？
如果你優先考慮速度、易用性和簡潔的 Material Design 3 美學，Beer CSS 是你最好的朋友。但是，如果您需要極端的設計客製化或不是 Material Design 3 的粉絲，您可能需要查看其他通用框架。
原文出處：https://dev.to/leonardorafael/beer-css-the-secret-weapon-for-material-design-3-uis-53i3
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式