# 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@4.0.21/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
```
### 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.
## Go to
[Begin](INDEX.md), [Elements](ELEMENTS.md), [Helpers](HELPERS.md), [Settings](SETTINGS.md), [Summary](SUMMARY.md), [Javascript](JAVASCRIPT.md), [beercss.com](https://www.beercss.com)
[Badge](BADGE.md), [Button](BUTTON.md), [Card](CARD.md), [Checkbox](CHECKBOX.md), [Chip](CHIP.md), [Container](CONTAINER.md), [Dialog](DIALOG.md), [Divider](DIVIDER.md), [Expansion](EXPANSION.md), [Grid](GRID.md), [Icon](ICON.md), [Input](INPUT.md), [Layout](LAYOUT.md), [List](LIST.md), [Main layout](MAIN_LAYOUT.md), [Media](MEDIA.md), [Menu](MENU.md), [Navigation](NAVIGATION.md), [Overlay](OVERLAY.md), [Page](PAGE.md), [Progress](PROGRESS.md), [Radio](RADIO.md), [Select](SELECT.md), [Shape](SHAPE.md), [Slider](SLIDER.md), [Snackbar](SNACKBAR.md), [Switch](SWITCH.md), [Table](TABLE.md), [Tabs](TABS.md), [Textarea](TEXTAREA.md), [Tooltip](TOOLTIP.md), [Typography](TYPOGRAPHY.md)
