Download Latest Version
v3.11.20 source code.tar.gz (9.4 MB)
Get an email when there's a new version of Beer CSS
| Name | Modified | Size | Downloads / Week |
|---|---|---|---|
| Parent folder | |||
| README.md | 2025-06-18 | 3.2 kB | |
| v3.11.20 source code.tar.gz | 2025-06-18 | 9.4 MB | |
| v3.11.20 source code.zip | 2025-06-18 | 9.5 MB | |
| Totals: 3 Items | 19.0 MB | 4 | |
CHANGELOG 3.11.20
🚀 Added
- Added navigation rail/bar from "M3 expressive" (https://github.com/beercss/beercss/issues/460, https://github.com/beercss/beercss/issues/461)
- Added
shapeelement from "M3 expressive" (all 35 shapes) - Updated shape size, to be compatible with nav
🩹 Fixed
- Fixed extend button when using
<img class="responsive">inside it. - Fixed horizontal scroll on textarea (https://github.com/beercss/beercss/issues/467)
- Fixed some scoped version issues (https://github.com/beercss/beercss/issues/466, https://github.com/beercss/beercss/issues/463)
- Fixed link butons inside nav (https://github.com/beercss/beercss/issues/471)
- Fixed menu open on iOS (https://github.com/beercss/beercss/issues/474)
⚠️ Breaking changes
- Navigation drawer was deprecated on "M3 Expressive" use
listinstead - Refactored main layout to use flexbox grid
Navigation drawer was deprecated on "M3 expressive" use list instead
Before:
:::html
<nav class="drawer">
<a>
<i>search</i>
<div>Search</div>
</a>
</nav>
<nav class="drawer">
<a href="/path">
<i>search</i>
<div>Search</div>
</a>
</nav>
After:
:::html
<ul class="list">
<li class="wave round">
<i>search</i>
<div>Search</div>
</li>
</ul>
<ul class="list">
<li class="wave round">
<a href="/path">
<i>search</i>
<div>Search</div>
</a>
</li>
</ul>
Added navigation rail/bar from "M3 expressive"
Navigation rail (normal/expanded)
:::html
<nav class="left">...</nav>
<nav class="left max">...</nav>
Flexible navigation bar (normal/expanded)
:::html
<nav class="bottom">...</nav>
<nav class="bottom max">...</nav>
Refactored main layout to use flexbox grid
Now we use the code below. This is how the majority M3 projects looks like. Only the <main> element is required. Old projects that uses a nav.top/nav.bottom and nav.left/nav.right at same time, could be impacted.
:::html
<body>
<nav class="left">LEFT</nav>
<nav class="right">RIGHT</nav>
<nav class="top">TOP</nav>
<nav class="bottom">BOTTOM</nav>
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>
</body>
Added shape element from "M3 expressive" (all 35 shapes)
:::html
<div class="shape loading-indicator"></div>
<div class="shape loading-indicator">
<img class="responsive" src="/favicon.png">
</div>
<div class="small-witdh small-height">
<div class="shape loading-indicator max"></div>
</div>