Beer CSS: Build Material Design Interfaces with Ease

Introduction

Beer CSS is an innovative CSS framework dedicated to crafting Material Design 3 interfaces with remarkable speed and simplicity. It stands out by translating Material Design principles into semantic HTML, offering a developer-friendly experience without the usual stress associated with complex UI frameworks. With its focus on lightweight design and adherence to web standards, Beer CSS enables the creation of modern, responsive web applications effortlessly.

Installation

Getting started with Beer CSS is straightforward, offering multiple integration options to suit your project needs.

Default Version (CDN)

For quick setup, include the following in your HTML:

<link href="https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/beer.min.css" rel="stylesheet" />
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/beer.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>

Default Version (NPM)

Install via npm:

npm i beercss
npm i material-dynamic-colors

Then import in your JavaScript:

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

Scoped Version

Apply Beer CSS only to child elements of <* class="beer">...</*>:

<link href="https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/beer.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>

NPM import:

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

Custom Element Version

Apply Beer CSS to child elements of <beer-css>...</beer-css>:

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

NPM import:

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

Local CDN Version

Download the CDN files and host them locally:

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

Examples

To see Beer CSS in action, explore the official Codepen collection which provides various interactive examples. Additionally, a basic HTML structure demonstrating how to integrate Beer CSS is provided below, showcasing a simple layout with navigation components.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-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/beercss@4.0.19/dist/cdn/beer.min.css" rel="stylesheet">
    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/beer.min.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
  </head>
  <body class="dark">
    <nav class="left max l">
      <header>
        <nav>
          <img alt="logo" src="https://www.beercss.com/favicon.png" class="circle extra">
          <h6>Cheers</h6>
        </nav>
      </header>
      <a>
        <i>home</i>
        <span>Home</span>
      </a>
      <a>
        <i>search</i>
        <span>Search</span>
      </a>
      <a>
        <i>share</i>
        <span>Share</span>
      </a>
      <a>
        <i>more_vert</i>
        <span>More</span>
      </a>
      <div class="divider"></div>
      <a>
        <i>widgets</i>
        <span>Widgets</span>
      </a>
      <a>
        <i>chat</i>
        <span>Chat</span>
      </a>
      <a>
        <i>help</i>
        <span>Help</span>
      </a>  
    </nav>

    <nav class="left m">
      <header>
        <img alt="logo" src="https://www.beercss.com/favicon.png" class="circle extra">
      </header>
      <a>
        <i>home</i>
        <span>Home</span>
      </a>
      <a>
        <i>search</i>
        <span>Search</span>
      </a>
      <a>
        <i>share</i>
        <span>Share</span>
      </a>
      <a>
        <i>more_vert</i>
        <span>More</span>
      </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 alt="beer and woman" src="https://www.beercss.com/beer-and-woman.svg" class="responsive round medium-height">
      <h3>Welcome</h3>
      <h4>The beer is ready!</h4>
    </main>
  </body>
</html>

Why use Beer CSS?

Beer CSS offers several compelling advantages for developers looking to implement Material Design 3:

First Material Design 3 Framework: It was the first CSS framework based on Material Design 3.
M3 Expressive: Includes the latest "M3 Expressive" features.
Lightweight: It is 10x smaller than other CSS frameworks based on Material Design, living up to its "lightweight beer" philosophy.
Semantic HTML: Translates Material Design to HTML semantic standards.
Framework Agnostic: Ready to use with any JavaScript framework.
Developer Experience (DX): Highly focused on providing an excellent developer experience.
Zero Dependencies: Requires no build steps, configurations, or external dependencies.
Modern Interfaces: Enables building modern interfaces without needing any custom CSS.
Web Standards Compliant: Ensures compliance with web standards.
Google Lighthouse Friendly: Optimized for performance and accessibility.