# BeerCSS - Complete Documentation for AI/LLM Systems
This file is auto-generated from the BeerCSS documentation.
Generated on: 2026-08-29
BeerCSS is a CSS framework based on Material Design 3 that uses semantic HTML elements with optional helper classes.
- [BeerCSS website](https://www.beercss.com)
- [GitHub repository](https://github.com/beercss/beercss)
- [Material Design 3 guidelines](https://m3.material.io)
---
## Documentation Contents
The following documentation sections are included in order:
- The principles
- SETTINGS
- ELEMENTS
- HELPERS
- Badge
- Button
- Card
- Checkbox
- Chip
- Dialog
- Divider
- Expansion
- Grid
- Icon
- Input
- Layout
- List
- Main layout
- Media
- Menu
- Modules
- Navigation
- Overlay
- Page
- Progress
- Radio
- Select
- Shape
- Slider
- Snackbar
- Summary
- Switch
- Table
- Tabs
- Textarea
- Tooltip
- Typography
- Javascript
---
# 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** and **hops**. Only 3 ingredients. Exciting, right? So we thinking about It and our 3 ingredients are: [Settings](SETTINGS.md), [Elements](ELEMENTS.md) and [Helpers](HELPERS.md). 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
| |
| |
|---------------|
```
# Get started
### DEFAULT VERSION
```html
```
```js
npm i beercss
npm i material-dynamic-colors
```
```js
import "beercss";
import "material-dynamic-colors";
```
### SCOPED VERSION
Applied on child elements of `<* class="beer">...`.
```html
```
```js
npm i beercss
npm i material-dynamic-colors
```
```js
import "beercss/scoped";
import "material-dynamic-colors";
```
### CUSTOM ELEMENT VERSION
Applied on child elements of `...`.
```html
```
```js
npm i beercss
npm i material-dynamic-colors
```
```js
import "beercss/custom-element";
import "material-dynamic-colors";
```
### LOCAL CDN VERSION
Download all files from CDN https://cdn.jsdelivr.net/npm/beercss@5.0.3/dist/cdn/ and https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/. Now put the files inside a new folder in your project (like `/beercss` for example):
```html
```
### MODULE VERSION
The module version loads the [Settings](SETTINGS.md) , [Elements](ELEMENTS.md) and [Helpers](HELPERS.md) as modules. More about in [Modules](MODULES.md) section.
### HTML
You can use this html to setup your project. See on [Codepen](https://codepen.io/leo-bnu/pen/yLKLPxj). More about in [Main layout](docs/MAIN_LAYOUT.md).
```html
Hello world
Welcome
The beer is ready!
```
**The `beer.min.js` and `material-dynamic-colors.min.js` are optional, but could be required for some use cases.**
### ✅ DO:
```
// 1 setting to 1 document
...
// 1 element to N helpers
...
...
// 1 main element per document
<...>
// inline/block elements in block elements
// write css like this
.element.helper {...}
.element > .element {...}
.element > .helper {...}
```
### 🚫 DON'T:
```
// N elements to 1 tag
...
...
// element with dependencies
...
...
// N main elements per document
<...>
// block elements in inline elements
// write css like this
.element.element {...}
.element .element {...}
.element .helper {...}
```
## 🧙♂️ Tips to master beercss
1. Try use [Helpers](HELPERS.md) first, before any custom css.
2. To customize themes go to [Settings](SETTINGS.md).
3. To quick learn the project go to [Summary](SUMMARY.md).
4. To understand the [Javascript](JAVASCRIPT.md) file.
5. Read the DO and DON'T section to write a compliance HTML/CSS.
6. For [Vite](https://vite.dev/config/build-options#build-assetsinlinelimit) users, build your app with `assetsInlineLimit: 0` to keep the original size of CSS files.
---
# SETTINGS
## Default theme
It sets the default theme to dark or light.
#### Classes
light, dark
#### Variables
--primary, --on-primary, --primary-container, --on-primary-container, --secondary, --on-secondary, --secondary-container, --on-secondary-container, --tertiary, --on-tertiary, --tertiary-container, --on-tertiary-container, --error, --on-error, --error-container, --on-error-container, --background, --on-background, --surface, --on-surface, --surface-variant, --on-surface-variant, --outline, --outline-variant, --shadow, --scrim, --inverse-surface, --inverse-on-surface, --inverse-primary, --surface-dim, --surface-bright, --surface-container-lowest, --surface-container-low, --surface-container, --surface-container-high, --surface-container-highest --active, --overlay, --elevate1, --elevate2, --elevate3, --size, --font, --font-icon, --speed1, --speed2, --speed3, --speed4
#### Example
The default theme will be set according to device color scheme. Use light or dark to set the default theme.
```html
// It will be set according to device color scheme
...
// To light
...
// To dark
...
```
## Dynamic theme
It sets the theme and mode at runtime. You can get a real example of dynamic theme [in this codepen](https://codepen.io/leo-bnu/pen/LYWxjVG).
#### To change theme
Call `ui("theme", "color|path|url|file|blob|theme")`. It returns the new theme and applies on body element. Requires [material-dynamic-colors](https://www.npmjs.com/package/material-dynamic-colors) lib.
```js
// From color
let theme = await ui("theme", "#ffd700");
// From path
let theme = await ui("theme", "/image.png");
// From url (caution with cors error)
let theme = await ui("theme", "http://domain.com/image.png");
// From file
let file = document.query("input[type='file']").files[0];
let theme = await ui("theme", file);
// From blob
let blob = new Blob();
let theme = await ui("theme", blob);
// From theme
let theme = await ui("theme", theme);
// Get current theme
let theme = await ui("theme");
// The returned theme is
{
dark: "--primary:#cfbcff;--on-primary:#381e72;--primary-container:#4f378a;--on-primary-container:#e9ddff;--secondary:#cbc2db;--on-secondary:#332d41;--secondary-container:#4a4458;--on-secondary-container:#e8def8;--tertiary:#efb8c8;--on-tertiary:#4a2532;--tertiary-container:#633b48;--on-tertiary-container:#ffd9e3;--error:#ffb4ab;--on-error:#690005;--error-container:#93000a;--on-error-container:#ffb4ab;--background:#1c1b1e;--on-background:#e6e1e6;--surface:#141316;--on-surface:#e6e1e6;--surface-variant:#49454e;--on-surface-variant:#cac4cf;--outline:#948f99;--outline-variant:#49454e;--shadow:#000000;--scrim:#000000;--inverse-surface:#e6e1e6;--inverse-on-surface:#313033;--inverse-primary:#6750a4;--surface-dim:#141316;--surface-bright:#3a383c;--surface-container-lowest:#0f0e11;--surface-container-low:#1c1b1e;--surface-container:#201f22;--surface-container-high:#2b292d;--surface-container-highest:#363438;",
light: "--primary:#6750a4;--on-primary:#ffffff;--primary-container:#e9ddff;--on-primary-container:#22005d;--secondary:#625b71;--on-secondary:#ffffff;--secondary-container:#e8def8;--on-secondary-container:#1e192b;--tertiary:#7e5260;--on-tertiary:#ffffff;--tertiary-container:#ffd9e3;--on-tertiary-container:#31101d;--error:#ba1a1a;--on-error:#ffffff;--error-container:#ffdad6;--on-error-container:#410002;--background:#fffbff;--on-background:#1c1b1e;--surface:#fdf8fd;--on-surface:#1c1b1e;--surface-variant:#e7e0eb;--on-surface-variant:#49454e;--outline:#7a757f;--outline-variant:#cac4cf;--shadow:#000000;--scrim:#000000;--inverse-surface:#313033;--inverse-on-surface:#f4eff4;--inverse-primary:#cfbcff;--surface-dim:#ddd8dd;--surface-bright:#fdf8fd;--surface-container-lowest:#ffffff;--surface-container-low:#f7f2f7;--surface-container:#f2ecf1;--surface-container-high:#ece7eb;--surface-container-highest:#e6e1e6;"
}
```
#### To change mode
Call `ui("mode", "light|dark|auto")` to set current theme to light, dark or auto. Doesn't require [material-dynamic-colors](https://www.npmjs.com/package/material-dynamic-colors) lib.
```js
// To light
let mode = ui("mode", "light");
// To dark
let mode = ui("mode", "dark");
// To set from device color scheme
let mode = ui("mode", "auto");
// Get current mode
let mode = ui("mode");
// The returned mode is
"light" or "dark"
```
## Customize the default theme
To customize the default theme, you need to use the css structure below.
#### Example
```css
:root,
body.light {
--primary: #6750a4;
--on-primary: #ffffff;
--primary-container: #e9ddff;
--on-primary-container: #22005d;
--secondary: #625b71;
--on-secondary: #ffffff;
--secondary-container: #e8def8;
--on-secondary-container: #1e192b;
--tertiary: #7e5260;
--on-tertiary: #ffffff;
--tertiary-container: #ffd9e3;
--on-tertiary-container: #31101d;
--error: #ba1a1a;
--on-error: #ffffff;
--error-container: #ffdad6;
--on-error-container: #410002;
--background: #fffbff;
--on-background: #1c1b1e;
--surface: #fdf8fd;
--on-surface: #1c1b1e;
--surface-variant: #e7e0eb;
--on-surface-variant: #49454e;
--outline: #7a757f;
--outline-variant: #cac4cf;
--shadow: #000000;
--scrim: #000000;
--inverse-surface: #313033;
--inverse-on-surface: #f4eff4;
--inverse-primary: #cfbcff;
--surface-dim: #ddd8dd;
--surface-bright: #fdf8fd;
--surface-container-lowest: #ffffff;
--surface-container-low: #f7f2f7;
--surface-container: #f2ecf1;
--surface-container-high: #ece7eb;
--surface-container-highest: #e6e1e6;
}
body.dark {
--primary: #cfbcff;
--on-primary: #381e72;
--primary-container: #4f378a;
--on-primary-container: #e9ddff;
--secondary: #cbc2db;
--on-secondary: #332d41;
--secondary-container: #4a4458;
--on-secondary-container: #e8def8;
--tertiary: #efb8c8;
--on-tertiary: #4a2532;
--tertiary-container: #633b48;
--on-tertiary-container: #ffd9e3;
--error: #ffb4ab;
--on-error: #690005;
--error-container: #93000a;
--on-error-container: #ffb4ab;
--background: #1c1b1e;
--on-background: #e6e1e6;
--surface: #141316;
--on-surface: #e6e1e6;
--surface-variant: #49454e;
--on-surface-variant: #cac4cf;
--outline: #948f99;
--outline-variant: #49454e;
--shadow: #000000;
--scrim: #000000;
--inverse-surface: #e6e1e6;
--inverse-on-surface: #313033;
--inverse-primary: #6750a4;
--surface-dim: #141316;
--surface-bright: #3a383c;
--surface-container-lowest: #0f0e11;
--surface-container-low: #1c1b1e;
--surface-container: #201f22;
--surface-container-high: #2b292d;
--surface-container-highest: #363438;
}
```
## Others
It sets the hover background, the overlay background, the font family order and the relative size of all elements.
#### Variables
--active, --overlay, --size
## Fonts
It sets the font and icon font of project.
#### Variables
--font, --font-icon
#### Examples
```css
/* To use all outlined icons (default) */
:root {
--font-icon: "Material Symbols Outlined";
}
/* To use all rounded icons */
:root {
--font-icon: "Material Symbols Rounded";
}
/* To use all sharp icons */
:root {
--font-icon: "Material Symbols Sharp";
}
/* To use a minimal subset of icons required in checkbox, radio and switch */
:root {
--font-icon: "Material Symbols Subset";
}
/* To remove icons */
:root {
--font-icon: none;
}
/* To import your custom font */
@import "https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@400;500;700&display=swap";
:root {
--font: "Roboto Flex";
}
/* To import only the icons needed */
@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=check,check_box,check_box_outline_blank,indeterminate_check_box,radio_button_checked,radio_button_unchecked&display=swap";
:root {
--font-icon: "Material Symbols Outlined";
}
```
#### Other examples
Try the [material-dynamic-fonts](https://www.npmjs.com/package/material-dynamic-fonts) lib. This is a microlib to fetch only the icons used in page automatically. No code required. Just drop it in your HTML. The expected result is to reduce the font file to about ~1kb:
```css
:root {
--font-icon: none;
}
```
```html
```
## Elevates
It sets the box-shadow property of elements.
#### Variables
--elevate1, --elevate2, --elevate3
## Speed
It sets the animation speed of elements.
#### Variables
--speed1, --speed2, --speed3, --speed4
---
# ELEMENTS
## [Badge](BADGE.md)
Badges are generally used to emphasize some elements and they are placed in element corners.
## [Button](BUTTON.md)
Buttons allow users to take actions, and make choices, with a single tap.
## [Card](CARD.md)
Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
## [Checkbox](CHECKBOX.md)
Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.
## [Chip](CHIP.md)
Chips are compact elements that represent an input, attribute, or action.
## [Dialog](DIALOG.md)
Dialogs inform users about a task and can contain critical information, required decisions, involve multiple tasks, provide access to destinations in your app and contain a small forms to submit.
## [Divider](DIVIDER.md)
Dividers are thin lines that group content in lists or other containers
## [Expansion](EXPANSION.md)
Expansion contains creation flows and allows lightweight editing of an element.
## [Grid](GRID.md)
Grids are rows and cols system grid. They are most used to organize content.
## [Icon](ICON.md)
Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI. Ensuring readability and clarity at both large and small sizes, these icons have been optimized for beautiful display on all common platforms and display resolutions.
## [Input](INPUT.md)
Input fields let users enter and edit text.
## [Layout](LAYOUT.md)
Layouts are containers that you can place in any position. There are absolute and fixed elements.
## [List](LIST.md)
Lists are continuous, vertical indexes of text and images. Each item can have up to 3 lines.
## [Main layout](MAIN_LAYOUT.md)
The main layout is a common html structure to setup your pages. For RTL languages set the attribute `dir="rtl"` on `body` element (or any other element).
## [Media](MEDIA.md)
Media can be an image or video element.
## [Menu](MENU.md)
Menus display a list of choices on temporary surfaces.
## [Navigation](NAVIGATION.md)
Navigations are containers that display actions placed horizontally or vertically. Elements, like buttons, chips, images, checkboxes, radios and switches can be placed inside a nav. Some examples are navigation rail or navigation bar.
## [Overlay](OVERLAY.md)
Overlays block user screen and can express an unspecified wait time.
## [Page](PAGE.md)
Pages are containers that can be a main page, multiple pages or just to animate an element.
## [Progress](PROGRESS.md)
Progress displays the length of a process or an unspecified wait time.
## [Radio](RADIO.md)
Radio buttons allow users to select one option from a set.
## [Select](SELECT.md)
Selects display a list of choices on temporary surfaces.
## [Shape](SHAPE.md)
The M3 shape system includes original shapes, a corner radius scale, and built-in shape morphing.
## [Slider](SLIDER.md)
Sliders allow users to make selections from a range of values. There are two types of sliders: continuous and discrete. Default range is 0-100.
## [Snackbar](SNACKBAR.md)
Snackbars provide brief messages about app processes at bottom or top of the screen. It's not recommended to show two or more snackbars at same time.
## [Switch](SWITCH.md)
Switches toggle the state of a single item on or off.
## [Table](TABLE.md)
Tables display sets of data across rows and columns.
## [Tabs](TABS.md)
Tabs organize content across different screens, data sets, and other interactions.
## [Textarea](TEXTAREA.md)
Textarea fields let users enter and edit long text.
## [Tooltip](TOOLTIP.md)
Tooltips displays informative text when users hover over, focus on, or tap an element.
## [Typography](TYPOGRAPHY.md)
Use typography to present your design and content as clearly and efficiently as possible.
---
# HELPERS
## Alignments
left-align, right-align, center-align, top-align, bottom-align, middle-align
## Blurs
blur, small-blur, medium-blur, large-blur, light, dark
## Colors
amber1, amber2, amber3, amber4, amber5, amber6, amber7, amber8, amber9, amber10, amber, amber-border, amber-text
blue1, blue2, blue3, blue4, blue5, blue6, blue7, blue8, blue9, blue10, blue, blue-border, blue-text
blue-grey1, blue-grey2, blue-grey3, blue-grey4, blue-grey5, blue-grey6, blue-grey7, blue-grey8, blue-grey9, blue-grey10, blue-grey, blue-grey-border, blue-grey-text
brown1, brown2, brown3, brown4, brown5, brown6, brown7, brown8, brown9, brown10, brown, brown-border, brown-text
cyan1, cyan2, cyan3, cyan4, cyan5, cyan6, cyan7, cyan8, cyan9, cyan10, cyan, cyan-border, cyan-text
deep-orange1, deep-orange2, deep-orange3, deep-orange4, deep-orange5, deep-orange6, deep-orange7, deep-orange8, deep-orange9, deep-orange10, deep-orange, deep-orange-border, deep-orange-text
deep-purple1, deep-purple2, deep-purple3, deep-purple4, deep-purple5, deep-purple6, deep-purple7, deep-purple8, deep-purple9, deep-purple10, deep-purple, deep-purple-border, deep-purple-text
green1, green2, green3, green4, green5, green6n, green7, green8, green9, green10, green, green-border, green-text
grey1, grey2, grey3, grey4, grey5, grey6, grey7, grey8, grey9, grey10, grey, grey-border, grey-text
indigo1, indigo2, indigo3, indigo4, indigo5, indigo6, indigo7, indigo8, indigo9, indigo10, indigo, indigo-border, indigo-text
light-blue1, light-blue2, light-blue3, light-blue4, light-blue5, light-blue6, light-blue7, light-blue8, light-blue9, light-blue10, light-blue, light-blue-border, light-blue-text
light-green1, light-green2, light-green3, light-green4, light-green5, light-green6, light-green7, light-green8, light-green9, light-green10, light-green, light-green-border, light-green-text
lime1, lime2, lime3, lime4, lime5, lime6, lime7, lime8, lime9, lime10, lime, lime-border, lime-text
orange1, orange2, orange3, orange4, orange5, orange6, orange7, orange8, orange9, orange10, orange, orange-border, orange-text
pink1, pink2, pink3, pink4, pink5, pink6, pink7, pink8, pink9, pink10, pink, pink-border, pink-text
purple1, purple2, purple3, purple4, purple5, purple6, purple7, purple8, purple9, purple10, purple, purple-border, purple-text
red1, red2, red3, red4, red5, red6, red7, red8, red9, red10, red, red-border, red-text
teal1, teal2, teal3, teal4, teal5, teal6, teal7, teal8, teal9, teal10, teal, teal-border, teal-text
yellow1, yellow2, yellow3, yellow4, yellow5, yellow6, yellow7, yellow8, yellow9, yellow10, yellow, yellow-border, yellow-text
## Directions
horizontal, vertical
## Elevates
elevate, no-elevate, small-elevate, medium-elevate, large-elevate,
## Forms
border, no-border, circle, square, none, fill, extend, tabbed, round, no-round, small-round, medium-round, large-round, left-round, right-round, top-round, bottom-round
## Margins
margin, no-margin, auto-margin, tiny-margin, small-margin, medium-margin, large-margin, left-margin, right-margin, top-margin, bottom-margin, horizontal-margin, vertical-margin
## Opacities
opacity, no-opacity, small-opacity, medium-opacity, large-opacity
## Paddings
padding, no-padding, tiny-padding, small-padding, medium-padding, large-padding, left-padding, right-padding, top-padding, bottom-padding, horizontal-padding, vertical-padding
## Positions
left, right, center, top, bottom, middle, front, back
## Responsive
responsive, s, m, l
## Ripples
ripple, slow-ripple, fast-ripple
## Scrolls
scroll, no-scroll
## Shadows
shadow, left-shadow, right-shadow, top-shadow, bottom-shadow
## Sizes
tiny, small, medium, large, extra, wrap, no-wrap, max, auto-width, small-width, medium-width, large-width, auto-height, small-height, medium-height, large-height
## Spaces
space, no-space, small-space, medium-space, large-space
## Theme
light, dark
primary, primary-text, primary-border, primary-container
secondary, secondary-text, secondary-border, secondary-container
tertiary, tertiary-text, tertiary-border, tertiary-container
error, error-text, error-border, error-container
background, surface, surface-variant, inverse-surface
inverse-primary, inverse-primary-text, inverse-primary-border
black, black-text, black-border
white, white-text, white-border
transparent, transparent-text, transparent-border
## Triggers
active
## [Typography](TYPOGRAPHY.md)
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, italic, bold, underline, overline, upper, lower, capitalize, link, small-text, medium-text, large-text, <em>, <strong>, <b>
## Waves
wave, no-wave
## Zoom
zoom, tiny-zoom, small-zoom, medium-zoom, large-zoom, extra-zoom
---
# Badge
Badges are generally used to emphasize some elements and they are placed in element corners.
## Element
```
<...>
...
```
## Most used helpers
**Colors**
fill, primary, secondary, tertiary
**Forms**
none, border, circle, square, round, no-round, left-round, right-round, top-round, bottom-round
**Positions**
left, right, top, bottom
**Sizes**
min
## Example
```html
home
```
---
# Button
Buttons allow users to take actions, and make choices, with a single tap.
## Element
```
...
```
## Most used helpers
**Colors**
fill, primary, secondary, tertiary
**Directions**
horizontal, vertical
**Forms**
border, circle, square, round, no-round, left-round, right-round, top-round, bottom-round, responsive, extend
**Sizes**
small, medium, large, extra
## Example
```html
```
## Responsive button example
The responsive button is a button that automatically adjusts with the width of your container.
```html
```
## FAB example
A floating action button (FAB) represents the primary action of a screen.
```html
```
## Extended FAB example
The extended FAB is wider, and it includes a text label.
```html
```
## FABs menu
The floating action button (FAB) menu opens from a FAB to display multiple related actions
```html
<...>
```
## Icon button example
The transparent button is a button for navigation. The shape of button will be revealed on button actions. Combine with icons and images.
```html
```
## Button groups
Button groups organize buttons and add interactions between them.
```html
```
```html
```
## Split buttons
Split buttons open a menu to give people more options related to an action.
```html
```
---
# Card
Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
## Element
```html
...
```
## Most used helpers
**Colors**
fill, primary-container, secondary-container, tertiary-container
**Forms**
border, round, no-round, left-round, top-round, right-round, bottom-round
**Paddings**
padding, no-padding, tiny-padding, small-padding, medium-padding, large-padding
**Elevates**
elevate, no-elevate, small-elevate, medium-elevate, large-elevate
**Sizes**
small, medium, large
## Example
```html
Title
Description
```
---
# Checkbox
Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.
## Element
```html
```
## Most used helpers
**Sizes**
small, medium, large, extra
## Example
```html
```
## In field elements example
```html
```
## Indeterminate state example
This is set using the indeterminate property via JavaScript (it cannot be set using an HTML attribute) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes:
```js
document.getElementById(elementId).indeterminate = true;
```
---
# Chip
Chips are compact elements that represent an input, attribute, or action.
## Element
```html
...
```
## Most used helpers
**Colors**
fill, primary, secondary, tertiary
**Directions**
horizontal, vertical
**Forms**
border, circle, square, round, no-round, left-round, right-round, top-round, bottom-round
**Sizes**
small, medium, large
## Example
```html
```
---
# Dialog
Dialogs inform users about a task and can contain critical information, required decisions, involve multiple tasks, provide access to destinations in your app and contain a small forms to submit.
## Element
```html
```
## Most used helpers
**Colors**
fill, primary-container, secondary-container, tertiary-container
**Forms**
modal, border, round, no-round, left-round, right-round, top-round, bottom-round
**Paddings**
padding, no-padding, tiny-padding, small-padding, medium-padding, large-padding
**Positions**
left, right, top, bottom
**Elevates**
elevate, no-elevate, small-elevate, medium-elevate, large-elevate
**Sizes**
small, medium, large, max
**Triggers**
active
## Example
```html
```
## Triggers
#### To open/close a dialog
#### Method 1
Add/remove `active` class on dialog.
```html
```
#### Method 2
Using [HTML dialog element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog).
```html
```
```js
document.querySelector('#dialog').show(); // open
document.querySelector('#dialog').showModal(); // open as modal
document.querySelector('#dialog').close(); // close
```
#### Method 3
Add `data-ui="dialog-selector"` attribute on elements.
```html
```
#### Method 4
Call `ui("dialog-selector")`
```html
```
```js
ui('#dialog');
```
#### Method 5
Using [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API).
```html
```
```js
document.querySelector('#dialog').hidePopover(); // hide
document.querySelector('#dialog').showPopover(); //show
document.querySelector('#dialog').togglePopover(); // toggle
```
---
# Divider
Dividers are thin lines that group content in lists or other containers
## Element
```html
```
## Most used helpers
**Directions**
horizontal, vertical
**Sizes**
small, medium, large
## Example
```html
```
---
# Expansion
Expansion contains creation flows and allows lightweight editing of an element.
## Element
```html
...
<...>...
```
## Example multiple levels
```html
.........
<...>...
```
## Example custom summary
```html
<...>...
<...>...
```
---
# Grid
Grids are rows and cols system grid. They are most used to organize content.
## Element
```html
...
```
## Most used helpers
**Sizes**
s1...s12, m1...m12, l1...l12
**Spaces**
no-space, space, small-space, medium-space, large-space
## Example
This will render one or more lines, depends the user screen. All elements immediately inside grid are "cells" and can't be mixed with other elements.
```html
First
Second
Third
```
### ✅ DO:
```html
...
...
```
### 🚫 DON'T:
```html
...
...
```
---
# Icon
Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI. Ensuring readability and clarity at both large and small sizes, these icons have been optimized for beautiful display on all common platforms and display resolutions. Get all icons here https://fonts.google.com/icons.
## Element
```html
...
```
## Most used helpers
**Forms**
fill
**Sizes**
tiny, small, medium, large, extra
## Example
```html
home
```
## SVG example
```html
```
## Multiple icons in a single SVG example
```html
```
## Image example
```html
```
## Other libs example
To work as expected, you need to load the libs manually.
### [Font Awesome](https://fontawesome.com/search?m=free&o=r)
```html
```
### [Pictogrammers](https://pictogrammers.com/library/mdi/)
```html
```
---
# Input
Input fields let users enter and edit text.
## Element
```html
```
## Most used helpers
**Forms**
label, border, round, fill, prefix, suffix
**Sizes**
small, medium, large, extra
**Triggers**
active
## Example
```html
```
## Triggers
### To up/down a label
#### Method 1
Add/remove `active` class on label/input (the JS file of beer do this automatically).
```html
```
#### Method 2
Add `placeholder=" "` on input (a pure CSS solution).
```html
```
---
# Layout
Layouts are containers that you can place in any position. There are absolute and fixed elements.
## Element
```html
<...>
...
...
```
## Most used helpers
**Alignments**
left-align, right-align, center-align, top-align, bottom-align, middle-align
**Positions**
left, right, top, bottom, front, back
**Sizes**
small, medium, large, responsive
## Absolute example
Absolute elements are relative to container.
```html
Bottom of container
```
## Fixed example
Fixed elements are relative to document.
```html
Bottom of document
```
## Alignment example
```html
Aligned
```
## Position example
```html
Positioned
```
## Header and footer examples
Headers and footers are `position: sticky` when `fixed`.
```html
Fixed header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
```
## Top app bar example
```html
```
## Bottom app bar example
```html
```
## Empty state example
```html
mail
You have no new messages
Click the button to start a conversation
```
---
# List
Lists are continuous, vertical indexes of text and images. Each item can have up to 3 lines.
## Element
```html
...
...
```
## Most used helpers
**Forms**
none, border
**Spaces**
no-space, space, small-space, medium-space, large-space
## Default list
```html
```
## Headline and supporting text example
```html
Headline
Supporting text
```
## Icons
```html
home
Headline
Supporting text
```
## Leading media or avatar
```html
Headline
Supporting text
```
---
# Main layout
The main layout is a common html structure to setup your pages. For RTL languages set the attribute `dir="rtl"` on `body` element (or any other element). [Check the main layout example on Codepen](https://codepen.io/leo-bnu/pen/yLKLPxj).
## Example
```html
......
```
This is how the code above will be rendered (you don't need to use all elements):
```
nav.left | nav.top | nav.right
nav.left | header | nav.right
nav.left | main | nav.right
nav.left | footer | nav.right
nav.left | nav.bottom | nav.right
```
## Most used helpers
The `responsive` helper is used to define a max-width for the element. If the max-width is reached the element will be on center of screen. The `fixed` helper is used to keep the `` (on top) or `
```
## Other libs example
To work as expected, you need to load the libs manually.
### [Font Awesome](https://fontawesome.com/search?m=free&o=r)
```html
```
### [Pictogrammers](https://pictogrammers.com/library/mdi/)
```html
```
---
# Input
Input fields let users enter and edit text.
## Element
```html
