beercss/beercssPublic

NotificationsYou must be signed in to change notification settings
Fork70
Star1.9k

Build material design interfaces in record time... without stress for devs... 🍺💛

License

MIT license

1.9k stars 70 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 1,635 Commits
.github		.github
build		build
custom-element		custom-element
dist		dist
docs		docs
scoped		scoped
src		src
test		test
.babelrc		.babelrc
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc.cjs		.eslintrc.cjs
.firebaserc		.firebaserc
.gitignore		.gitignore
.stylelintrc.json		.stylelintrc.json
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
firebase.json		firebase.json
index.d.ts		index.d.ts
index.html		index.html
index.js		index.js
llms.md		llms.md
package.json		package.json
tsconfig.eslint.json		tsconfig.eslint.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json

Repository files navigation

Beer CSS

Build material design interfaces in record time...

...without stress for devs 🍺💛

Cheers,www.beercss.com

Why?

🥇 The first CSS framework based on Material Design 3
👉 Latest "M3 Expressive" already.
⬇️ 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.

A lightweight beer

Let's be honest, in the ever-evolving world of web development, we're all looking for that sweet spot: powerful functionality without the bloat. We want speed, efficiency, and something that doesn't feel like lugging around a digital elephant. And if you're looking at the chart below, you're probably thinking, "Wow, XYZ is huge!". You're not wrong. But look all the way to the top. See that? That's Beer CSS.

The principles

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 andhops. Only 3 ingredients. Exciting, right? So we thinking about It and our 3 ingredients are:settings,elements andhelpers. 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<body>...</body>// 1 element to N helpers<element>...</element><div>...</div>// nav elements before all others<body>  <nav>...</nav>  ...</body><div>  <nav>...</nav>  ...</div>// write css like this.element.helper {...}.element > .element {...}.element > .helper {...}

🚫 DON'T:

// N elements to 1 tag<div>...</div><element>...</element>// element with dependencies<div>  <div>...</div>  <div>...</div>  <div>...</div></div>// nav elements after all others<body>  ...  <nav>...</nav></body><div>  ...  <nav>...</nav></div>// write css like this.element.element {...}.element .element {...}.element .helper {...}

Get started

DEFAULT VERSION

<linkhref="https://cdn.jsdelivr.net/npm/beercss@3.11.32/dist/cdn/beer.min.css"rel="stylesheet"/><scripttype="module"src="https://cdn.jsdelivr.net/npm/beercss@3.11.32/dist/cdn/beer.min.js"></script><scripttype="module"src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>

npmibeercssnpmimaterial-dynamic-colors

import"beercss";import"material-dynamic-colors";

SCOPED VERSION

Applied on child elements of<*>...</*>.

<linkhref="https://cdn.jsdelivr.net/npm/beercss@3.11.32/dist/cdn/beer.scoped.min.css"rel="stylesheet"/><scripttype="module"src="https://cdn.jsdelivr.net/npm/beercss@3.11.32/dist/cdn/beer.min.js"></script><scripttype="module"src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>

npmibeercssnpmimaterial-dynamic-colors

import"beercss/scoped";import"material-dynamic-colors";

CUSTOM ELEMENT VERSION

Applied on child elements of<beer-css>...</beer-css>.

<scripttype="module"src="https://cdn.jsdelivr.net/npm/beercss@3.11.32/dist/cdn/beer.custom-element.min.js"></script><scripttype="module"src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>

npmibeercssnpmimaterial-dynamic-colors

import"beercss/custom-element";import"material-dynamic-colors";

LOCAL CDN VERSION

Download all files from CDNhttps://cdn.jsdelivr.net/npm/beercss@3.11.32/dist/cdn/ andhttps://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/. Now put the files inside a new folder in your project (like/beercss for example):

<linkhref="/beercss/beer.min.css"rel="stylesheet"/><scripttype="module"src="/beercss/beer.min.js"></script><scripttype="module"src="/beercss/material-dynamic-colors.min.js"></script>

HTML

You can use this html to setup your project. See onCodepen. More about inMain layout.

<html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><metaname="google"content="notranslate"><title>Hello world</title><linkhref="https://cdn.jsdelivr.net/npm/beercss@3.11.32/dist/cdn/beer.min.css"rel="stylesheet"><scripttype="module"src="https://cdn.jsdelivr.net/npm/beercss@3.11.32/dist/cdn/beer.min.js"></script><scripttype="module"src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script></head><bodyclass="dark"><navclass="left max l"><header><nav><imgsrc="https://www.beercss.com/favicon.png"class="circle extra"><h6>Cheers</h6></nav></header><a><i>home</i><div>Home</div></a><a><i>search</i><div>Search</div></a><a><i>share</i><div>Share</div></a><a><i>more_vert</i><div>More</div></a><divclass="divider"></div><a><i>widgets</i><div>Widgets</div></a><a><i>chat</i><div>Chat</div></a><a><i>help</i><div>Help</div></a></nav><navclass="left m"><header><imgsrc="https://www.beercss.com/favicon.png"class="circle extra"></header><a><i>home</i><div>Home</div></a><a><i>search</i><div>Search</div></a><a><i>share</i><div>Share</div></a><a><i>more_vert</i><div>More</div></a></nav><navclass="bottom s"><a><i>home</i></a><a><i>search</i></a><a><i>share</i></a><a><i>more_vert</i></a></nav><mainclass="responsive"><imgsrc="https://www.beercss.com/beer-and-woman.svg"class="responsive round medium-height"><h3>Welcome</h3><h5>The beer is ready!</h5></main></body></html>

We recommend using the material-dynamic-colors only when your app needs to change theme at runtime.

Documentation

Complete documentation and examples available at:

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