Construye interfaces de Material Design en tiempo récord...
...sin estrés para los desarrolladores 🍺💛
Note
si puedes imaginarlo puedes programarlo
- Alejandro Taboada
Beer CSS es un proyecto de código abierto con licencia MIT cuyo desarrollo continuo es posible gracias al apoyo de estos increíbles patrocinadores y colaboradores. Si desea unirse a ellos, considere patrocinar el desarrollo de Beer CSS.
- El primer framework CSS basado en Material Design 3.
- 10x más pequeño que otros frameworks CSS basados en Material Design.
- Traduce Material Design a los estándares semánticos de HTML.
- Listo para usar con cualquier framework JS.
- Altamente enfocado en la experiencia de desarrollo (DX).
Este proyecto fue guiado por la “Ley de Pureza de la Cerveza Alemana” o “Reinheitsgebot” creada en 1516. Esta ley establece que la cerveza solo debe elaborarse con los siguientes ingredientes: agua, malta de cebada y lúpulo. Solo 3 ingredientes. ¡Emocionante, ¿no?! Así que pensamos en ello y nuestros 3 ingredientes son: configuraciones, elementos y ayudantes. Esto suena extraño al principio, porque no es BEM, OOCSS, SMACSS, ITCSS, "Utility first" ni ningún otro enfoque. Nuestro enfoque no evita algunas malas prácticas, pero es ligero, sabroso y puro como una cerveza. ¡Solo pruébalo y siéntelo! 😁
| CONFIGURACIONES | // Las configuraciones afectan a todo el documento
|------------------|----|
| | |
| ELEMENTOS | | // Los elementos son los componentes, widgets o etiquetas
| | |
|------------------| |
| | |
| | |
| AYUDANTES |----| // Los ayudantes comunes hacen los elementos más escalables y personalizables
| |
| |
|------------------|
// 1 configuración para 1 documento
<body class="dark|light">...</body>
// 1 elemento para N ayudantes
<elemento class="ayudante ayudante">...</elemento>
<div class="elemento ayudante ayudante">...</div>
// elementos nav antes que todos los demás
<body>
<nav class="left|right|top|bottom">...</nav>
...
</body>
<div id="app">
<nav class="left|right|top|bottom">...</nav>
...
</div>
// escribir css así
.elemento.ayudante {...}
.elemento > .elemento {...}
.elemento > .ayudante {...}
// N elementos para 1 etiqueta
<div class="elemento elemento ayudante">...</div>
// elemento con dependencias
<div class="elemento">
<div class="elemento-header">...</div>
<div class="elemento-content">...</div>
<div class="elemento-footer">...</div>
</div>
// elementos nav después de todos los demás
<body>
...
<nav class="left|right|top|bottom">...</nav>
</body>
<div id="app">
...
<nav class="left|right|top|bottom">...</nav>
</div>
// escribir css así
.elemento.elemento {...}
.elemento .elemento {...}
.elemento .ayudante {...}
Desde jsdelivr.net.
// con html
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.css" rel="stylesheet" />
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/material-dynamic-colors.min.js"></script>// con css
@import "https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.css";// con javascript
import "https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.js";
import "https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/material-dynamic-colors.min.js"; Puede obtener la última versión usando NPM. Esta versión contiene archivos fuente así como los archivos CSS y JavaScript compilados.
// instalando
npm i beercss
npm i material-dynamic-colors// importando como window.beercss y window.materialDynamicColors
import "beercss";
import "material-dynamic-colors"; // importando como beercss y materialDynamicColors
import beercss from "beercss";
import materialDynamicColors from "material-dynamic-colors";// importando manualmente desde dist
import "beercss/dist/cdn/beer.min.css";
import beercss from "beercss/dist/cdn/beer.min.js";
import materialDynamicColors from "material-dynamic-colors/dist/cdn/material-dynamic-colors.min.js";// importando manualmente desde src
import "beercss/src/cdn/beer.css";
import beercss from "beercss/src/cdn/beer.ts";
import materialDynamicColors from "material-dynamic-colors/src/cdn/material-dynamic-colors.js";Puede usar este html para configurar su proyecto. Ver en Codepen. Más información en Diseño principal.
<html>
<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>Hola Mundo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/material-dynamic-colors.min.js"></script>
</head>
<body class="dark">
<nav class="left drawer l">
<header>
<nav>
<img src="https://www.beercss.com/favicon.png" class="circle">
<h6>Salud</h6>
</nav>
</header>
<a>
<i>home</i>
<div>Inicio</div>
</a>
<a>
<i>search</i>
<div>Buscar</div>
</a>
<a>
<i>share</i>
<div>Compartir</div>
</a>
<a>
<i>more_vert</i>
<div>Más</div>
</a>
<div class="divider"></div>
<label>Etiqueta</label>
<a>
<i>widgets</i>
<div>Widgets</div>
</a>
<a>
<i>chat</i>
<div>Chat</div>
</a>
<a>
<i>help</i>
<div>Ayuda</div>
</a>
</nav>
<nav class="left m">
<header>
<img src="https://www.beercss.com/favicon.png" class="circle">
</header>
<a>
<i>home</i>
<div>Inicio</div>
</a>
<a>
<i>search</i>
<div>Buscar</div>
</a>
<a>
<i>share</i>
<div>Compartir</div>
</a>
<a>
<i>more_vert</i>
<div>Más</div>
</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 src="https://www.beercss.com/beer-and-woman.jpg" class="responsive round">
<h3>Bienvenido</h3>
<h5>¡La cerveza está lista!</h5>
</main>
</body>
</html>Recomendamos usar material-dynamic-colors solo cuando su aplicación necesite cambiar el tema en tiempo de ejecución.
Documentación y ejemplos completos disponibles en:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent