Beercss
Build material design interfaces in record time...
...without stress for devs
Cheers, www.beercss.com
Why?
- It's based on latest material design patterns.
- It's themeable.
- It has zero dependencies.
- It does a lot of combinations.
- It's easy to work with Vue, React, Angular, Svelte and others.
- It has about 10kb.
- It has the most simple html output around.
- It does not need tons of documentation to explain it.
- It's fast to learn, read and write code.
- It's like pure malt beer, only native and standard code.
- No tricks, no build steps and no abstraction layers to try reduce your final code.
- It's well designed and we hope that you can do a lot with it.
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
<body class="light">...</body>
<body class="dark">...</body>
// 1 element to N helpers
<element class="helper helper">...</element>
<div class="element helper helper">...</div>
// nav elements before a main element
<body>
<nav class="left m l">...</nav>
<nav class="bottom s">...</nav>
<main class="responsive">...</main>
</body>
<div id="app">
<nav class="left m l">...</nav>
<nav class="bottom s">...</nav>
<main class="responsive">...</main>
</div>
// write css like this
.element.helper {...}
.element > .element {...}
.element > .helper {...}
DON'T:
// N elements to 1 tag
<div class="element element helper">...</div>
// element with dependencies
<div class="element">
<div class="element-header">...</div>
<div class="element-content">...</div>
<div class="element-footer">...</div>
</div>
// nav elements after or inside a main element
<body>
<main class="responsive">...</main>
<nav class="left m l">...</nav>
<nav class="bottom s">...</nav>
</body>
<div id="app">
<main class="responsive">...</main>
<nav class="left m l">...</nav>
<nav class="bottom s">...</nav>
</div>
<main class="responsive">
<nav class="left m l">...</nav>
<nav class="bottom s">...</nav>
...
</main>
// write css like this
.element.element {...}
.element .element {...}
.element .helper {...}
Get started
CDN
From jsdelivr.net.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/materi[email protected]/dist/cdn/material-dynamic-colors.min.js" type="text/javascript"></script>
NPM
You can get the latest release using NPM. This release contains source files as well as the compiled CSS and JavaScript files.
// installing
npm i beercss
npm i material-dynamic-colors
// importing
import "beercss";
import "material-dynamic-colors";
HTML
You can use this html to setup your project. See on Codepen.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="google" content="notranslate">
<title>Hello world</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/materi[email protected]/dist/cdn/material-dynamic-colors.min.js" type="text/javascript"></script>
</head>
<body class="light">
<nav class="left m l">
<img src="https://www.beercss.com/favicon.png" class="circle large margin">
<a>
<i>home</i>
</a>
<a>
<i>search</i>
</a>
<a>
<i>share</i>
</a>
<a>
<i>more_vert</i>
</a>
</nav>
<nav class="bottom s">
<a>
<i>home</i>
</a>
<a>
<i>search</i>
</a>
<a>
<i>share</i>
</a>
<a>
<i>more_vert</i>
</a>
</nav>
<main class="responsive">
<img src="https://www.beercss.com/beer-and-woman.jpg" class="responsive">
<h3>Welcome</h3>
<h5>The beer is ready!</h5>
</main>
</body>
</html>
We recommend use 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 Beercss! Before submitting your contribution, please make sure to take a moment and read through the following guidelines:
https://github.com/beercss/beercss/blob/main/CONTRIBUTING.md
License
π»
Cheers to all people here
Supporting us
Beercss is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider:
breaking
convert from --size: 1px to --size: 16px - divide all existing rem values by 16
This commit will not break anything inside of this library, but any user who used any rem values in their own project, will need to change the value to
current rem value / 16
.GDPR Compliance and Google Fonts
Thank you all for the good work you have done on this project.
In January 2022, German courts made it so that unless web sites ask permission from their users for using Google Fonts before using it, they may be in violation of GDPR. Here is a blog post that talks about it: https://cookie-script.com/blog/google-fonts-and-gdpr.
beercss seems to rely on Google hosted Roboto font and Material Symbols as found here: https://github.com/beercss/beercss/blob/main/src/cdn/settings/urls.css
I would like to propose that instead of depending on Google hosted Roboto font and material symbols, we self host them within the project. By self hosting the font files, any project that uses beercss will not have to worry about building UIs for asking for user permission.
Introduce tiny chips and buttons
Hello everyone and BeerCSS devs, I like this CSS framework! It's really useful, modern-looking, and simple π
Can you guys add the
tiny
class to both chips and buttons? So it would look something like the picture below (I'm talking about the text that says "Gentoo Linux")This could be especially useful to create label-looking elements. When writing paragraphs and we need to add labels, I feel chips and buttons, even with the
small
class, are just too big and mess up the text top & bottom alignment.Thanks in advance! Matteo
BeerCSS broken on older browsers
Greetings, I would like to notify you all that BeerCSS does not render properly and is, in fact, broken, on older browsers, such as Firefox <= 72 (IIRC). When visiting https://beercss.com, some buttons are inaccurately displayed, the icons in buttons either don't load at all or look huge (when they should appear next to the text inside the buttons).
Going to post some screenshots later describing this issue further.
Firefox - Inputfields in details with value won't initialize right
If you put an input field into an detail with a value before ui() is called, the borderline will be calculated wrong.
Codepen Example: https://codepen.io/AlTrAugsburg/pen/PoQqLry
Steps to replicate:
My fix: Open all details, call ui() and then close them again. But it's not the most pretty fix.
Maybe this fix or a better one could be included into the ui() function.
Thanks in advance.
[Ask]How can i use progress bar as html without trigger ui()
https://github.com/beercss/beercss/issues/67
we don't need to call ui() anymore, but i'm wondering how to make items like progress bar move without trigger any script, maybe we can use something like
Question: How to init the javascript?
Hi, thanks for the library, but I am a little lost right now.
I want to add it to my svelte app and adding it via "npm install" and "import beercss" works insofar as the css is applied.
But the tabs for example dont work. How to switch the dark/light theme also eludes me.
In the tab codepen (https://codepen.io/kickerbnu/pen/bGBYMZR) I saw a call to ui(). Is that necessary to do so that the javascript is triggered?
Thanks in advance for any help.
#86 Self host Google Fonts and Material Symbols
With this PR, Roboto font files and Material Symbols woff2 files will be loaded using relative urls to the location of beer.min.css file instead of relying on the Google hosted version as default behavior. (I have created a new PR because the previous PR, now closed, got mangled up.)
Dropdowns using `details` and `summary` tags?
Hi, currently dropdowns can be opened based on their focus status. I'm not sure if that's good for accessibility and it also means all of them are open when using the tab key to move inside the page. Recently expansions were added using
details
andsummary
html tags (great idea). What are your thoughts on using these tags as well for dropdowns instead of the focus trick? Is it better for accessibility? At least it fixes the automatic opening when focusedβ¦Cheers :beers: Laurent
Would Beer CSS want to merge with Materialize CSS to create one big community and framework?
Beer CSS and Materialize CSS are both amazing frameworks that have similar design philosophy and their users and developers love. However, both have a small community and smaller communities generally cannot keep up with the updates of the world.
It would be a shame if either of these frameworks would diminish forever because they dont have a big enough community to support them. I am thinking since both have similar design philosophy we can combine two small community frameworks to one bigger framework that has a way more developers combined working on it, is more feature rich, and more developers using it and creating issues to improve it. The framework may even be competing with bootstrap, foundation, and bulma in the future. I am wondering if Beer CSS would be willing to combine two small communities and frameworks to one big community for betterment of everyone involved?
JS: input is null when clicking on "radio" input
Good morning everyone,
in the file src/cdn/beer.js, this snippet here is problematic, for some unknown reason:
When clicking a radio button, Firefox emits the following error in the console:
Here's a preview:
Here's the code I wrote that handles the click event, and theme changing:
HTML (just the inputs):
Maybe (and I hope) it's just this code that's problematic. The "ui('theme')" and "material-dynamic-colors" functionality isn't well documented, in fact I had to look at several pages to understand how to apply a theme from a color, and Promise handling wasn't written in either one of them.
BeerCSS with NextJs
How I get way with this?
What I get in response? Yet another error!
So I rollback and try this:
And someone it loads:
Standard navigation drawer
Is it possible to use Navigation Drawer without being a modal?
Needs more examples
As it's noted in the docs
Unfortunately, I wasted a lot of time and could not make a simple dashboard layout like a this or this or at least this one
I'm not front-end guy and I've found that using this framework is too hard for me. All existing templates like a Gmail, Netflix, Uber or Youtube look great but are useless. :-(
Nevertheless, it looks pretty good. Maybe next time I'll use it in another project.
Cheers! :)
Primary / secondary tabs
I loved how v2.3.0 updated tabs from material design 3 guidelines. However, I had to add a few custom CSS rules to get closer to the MD3 specs and get primary and secondary tabs. My custom CSS is here: https://codepen.io/laurentpayot/pen/RwJGmmv
Do you think
primary-tabs
andsecondary-tabs
classes (or something like that) could be added to beercss to stick to the MD3 guidelines?