beercss

library4.0.21jsnpmunverified

Beer CSS is a lightweight, class-light CSS framework that implements Google's Material Design 3 (including M3 Expressive) using semantic HTML. Current stable version is 4.0.21, released regularly. It is significantly smaller (14.4 KB brotli) than other Material Design frameworks like Materialize or MUI, and is dependency-free with no build steps required. Designed to work with any JavaScript framework and works out of the box with semantic HTML tags, reducing the need for custom CSS classes. Ships TypeScript types and is fully compatible with the latest web standards.

ui-components

npm install beercss

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BEERCSS

beercss

ui-componentsjavascriptv4.0.21

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default (CSS)

✓ import 'beercss'

✗ import beercss from 'beercss'

beercss is a CSS-only package; importing the module applies styles globally. No default export exists.

TypeScript types

✓ import type { Config } from 'beercss'

✗ import { Config } from 'beercss'

Type exports are only available in TypeScript; do not use them as runtime values.

Material Icons

✓ import 'beercss/dist/material-icons.css'

✗ import 'beercss/material-icons.css'

Material Icons stylesheet must be imported from the dist subpath; the root only contains the core styles.

Basic HTML page using CDN imports for Beer CSS core and Material Icons.

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/beercss@4.0.21/dist/cdn/beer.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/beercss@4.0.21/dist/cdn/material-icons.min.css"> </head> <body> <header>My App</header> <main> <form> <input type="text" placeholder="Enter text"> <button>Submit</button> </form> </main> </body> </html>

Debug

Known issues

breakingVersion 4.0 removed the 'beer-' prefix from all CSS custom properties.

fix

Update any references from --beer-primary to --primary, etc.

affects: >=4.0

breakingIn v4, the default button styling changed from outlined to elevated.

fix

Add the 'outline' attribute to <button> elements to revert to the old style.

affects: >=4.0

gotchaImporting from the root does not include Material Icons; you must import them separately.

fix

Import 'beercss/dist/material-icons.css' or use CDN version with icon CSS.

affects: *

gotchaSemantic HTML elements are styled globally; placing <header> or <main> inside a <div> may break layout.

fix

Use semantic elements directly as children of <body> or within allowed containers.

affects: *

breakingThe 'flat' attribute for buttons was renamed to 'text' in v4.

fix

Replace flat="true" with text="true" on button elements.

affects: >=4.0

Errors

Common errors & fixes

Cannot find module 'beercss' or its corresponding type declarations.

TypeScript cannot resolve types because the package's types file is not correctly referenced.

fix

Install '@types/beercss' or update tsconfig.json to include 'node_modules/beercss/dist/types/index.d.ts'.

Uncaught ReferenceError: beercss is not defined

Attempting to import a default export that does not exist; beercss is a CSS-only package.

fix

Replace 'import beercss from "beercss"' with 'import "beercss"'.

Module not found: Error: Can't resolve 'beercss/dist/material-icons.css'

Webpack or bundler cannot locate the file because the path is incorrect.

fix

Use the correct path: 'beercss/dist/material-icons.css' (note: 'dist' not optional).

Upgrade

Version history

4.0.21latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

47 hits · last 30 days

node

Resources

githubhttps://github.com/beercss/beercss ↗

packagebeercss ↗

homepagehttps://www.beercss.com/ ↗