Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/beercss/beercss
Build material design interfaces in record time... without stress for devs... 🍺💛
https://github.com/beercss/beercss
class-light css design-system material material-3 material-design-3 material-you semantic-html
Last synced: 2 months ago
JSON representation
Build material design interfaces in record time... without stress for devs... 🍺💛
- Host: GitHub
- URL: https://github.com/beercss/beercss
- Owner: beercss
- License: mit
- Created: 2020-12-09T10:32:09.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-12T19:57:25.000Z (9 months ago)
- Last Synced: 2024-04-13T03:04:19.521Z (9 months ago)
- Topics: class-light, css, design-system, material, material-3, material-design-3, material-you, semantic-html
- Language: Vue
- Homepage: https://www.beercss.com
- Size: 16.5 MB
- Stars: 892
- Watchers: 15
- Forks: 45
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- Awesome-CSS-Resources - Beercss:
- fucking-awesome-css-frameworks - Repo
- awesome-css-frameworks - Repo
README
# Beer CSS
Build material design interfaces in record time...
...without stress for devs 🍺💛
Cheers, www.beercss.com
# Sponsors
Beer CSS is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome sponsors and backers. If you'd like to join them, please consider sponsoring Beer CSS's development.
### Open Collective sponsors
### Github sponsors
# Why?
- 🥇 The first CSS framework based on Material Design 3.
- ⬇️ 10x smaller than others CSS frameworks based on Material Design.
- 🧙♂️ Translates Material Design to HTML semantic standard.
- 🤓 Ready to use with any JS framework.
- 🪄 Highly focused on DX.
- 🚫 No build steps, configurations or dependencies.
- ✨ Build modern interfaces without any custom CSS.
# Applying "the beer way" in css?
This project was guided by the **"Germany Beer Purity Law"** or **"Reinheitsgebot"** created in 1516. This law states that beer should only be brewed with the following ingredients: **water**, **barley malt** and **hops**. Only 3 ingredients. Exciting, right? So we thinking about It and our 3 ingredients are: **settings**, **elements** and **helpers**. This sounds weird at first time, because It's not BEM, OOCSS, SMACSS, ITCSS, "Utility first" or any other approach. Our approach doesn't avoid some bad practices, but is lightweight, tasty and pure like a beer. Just try it and feel it! 😁
```
| SETTINGS | // The settings affects all document
|---------------|----|
| | |
| ELEMENTS | | // The elements are the components, widgets or tags
| | |
|---------------| |
| | |
| | |
| HELPERS |----| // The common helpers makes the elements more scalable and customizable
| |
| |
|---------------|
```
### ✅ DO:
```
// 1 setting to 1 document
...
// 1 element to N helpers
...
...
// nav elements before all others
...
...
...
...
// write css like this
.element.helper {...}
.element > .element {...}
.element > .helper {...}
```
### 🚫 DON'T:
```
// N elements to 1 tag
...
// element with dependencies
...
...
// nav elements after all others
...
...
...
...
// write css like this
.element.element {...}
.element .element {...}
.element .helper {...}
```
# Get started
### CDN
From jsdelivr.net.
```html
// with html
```
```css
// with css
@import "https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.css";
```
```js
// with javascript
import "https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.js";
import "https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/material-dynamic-colors.min.js";
```
### NPM
You can get the latest release using NPM. This release contains source files as well as the compiled CSS and JavaScript files.
```js
// installing
npm i beercss
npm i material-dynamic-colors
```
```js
// importing as window.beercss and window.materialDynamicColors
import "beercss";
import "material-dynamic-colors";
```
```js
// importing as beercss and materialDynamicColors
import beercss from "beercss";
import materialDynamicColors from "material-dynamic-colors";
```
```js
// importing manually from dist
import "beercss/dist/cdn/beer.min.css";
import beercss from "beercss/dist/cdn/beer.min.js";
import materialDynamicColors from "material-dynamic-colors/dist/cdn/material-dynamic-colors.min.js";
```
```js
// importing manually from src
import "beercss/src/cdn/beer.css";
import beercss from "beercss/src/cdn/beer.ts";
import materialDynamicColors from "material-dynamic-colors/src/cdn/material-dynamic-colors.js";
```
### HTML
You can use this html to setup your project. See on [Codepen](https://codepen.io/leo-bnu/pen/yLKLPxj). More about in [Main layout](docs/MAIN_LAYOUT.md).
```html
Hello world
Cheers
home
Home
search
Search
share
Share
more_vert
More
Label
widgets
Widgets
chat
Chat
help
Help
home
Home
search
Search
share
Share
more_vert
More
Welcome
The beer is ready!
```
**We recommend use the material-dynamic-colors only when your app needs to change theme at runtime.**
# Documentation
Complete documentation and examples available at:
- **[Documentation](docs/INDEX.md)**
- **[Codepen](https://codepen.io/collection/XydYMB)**
- **[Homepage](https://www.beercss.com)**
# Contributing guide
Hi! We are really excited that you are interested in contributing to Beer CSS! Before submitting your contribution, please make sure to take a moment and read through the following guidelines:
[Beer CSS Contributing Guidelines](CONTRIBUTING.md)
# License
[MIT](https://opensource.org/licenses/MIT)
# Cheers to all stargazers 🍻
[](https://github.com/beercss/beercss/stargazers)
### Stargazers over time
[](https://starchart.cc/beercss/beercss)