Build material design in record time without stress for devs.
Beer CSS is a CSS framework that aims to help developers build material design interfaces quickly and easily. It is based on Material Design 3 and is intended to be a lightweight and straightforward solution for creating modern interfaces without needing custom CSS.
Here are its main features and principles:
Material Design 3: It is the first CSS framework based on Material Design 3.
Lightweight: The framework is designed to be small, being 10 times smaller than other CSS frameworks based on Material Design.
Semantic HTML: Beer CSS translates Material Design into standard semantic HTML.
Framework Agnostic: It is ready to use with any JavaScript framework.
Developer Experience (DX) Focused: The project is highly focused on providing a good developer experience.
No Build Steps: It requires no build steps, configurations, or dependencies.
No Custom CSS: It allows the building of modern interfaces without any custom CSS.
"Beer Way": The project follows the "Germany Beer Purity Law," or "Reinheitsgebot," which states that beer should only be brewed with water, barley malt, and hops. This translates to a CSS approach with only three ingredients: settings, elements, and helpers.
Settings: Affect the entire document. An example is setting the theme of the document using
<body class="dark|light">...</body>.Elements: These are the components, widgets, or tags.
Helpers: Common helpers make the elements more scalable and customizable. One element can use multiple helpers.
CSS Rules: Beer CSS defines rules for how elements and helpers should be used together. For example:
One setting to one document.
One element to many helpers.
Navigation elements before all others.
CSS should be written like
.element.helper {...}.Avoid using multiple elements in one tag, and avoid elements with dependencies.
Installation:
Can be installed via CDN by including links in HTML or importing in CSS and Javascript.
Can be installed via NPM, providing source files as well as compiled CSS and Javascript.
HTML can be used to setup the project.
Dynamic Themes: The framework recommends using
material-dynamic-colorsonly when the app needs to change theme at runtime.Documentation: Complete documentation and examples are available on their website, Codepen, and homepage.
Open Source: Beer CSS is an MIT-licensed open-source project with ongoing development supported by sponsors.
Community: It is supported by a community of contributors, and has a Discord server.
Languages: The project is primarily built with Vue (64%), CSS (20.5%), and TypeScript (13.5%).
You may also be interested in ...
Neat
Pico CSS
PaperCSS
