Shoelace.css es una biblioteca CSS ligera y versátil construida con la sintaxis CSS del futuro. Es fácil de usar y altamente personalizable. Los usuarios de Bootstrap lo encontrarán familiar, pero refrescante.
Se trata de un altamente personalizable, kit CSS puro que pesa sólo en 31KB minified (7.9KB gzip). Puede cargarlo localmente o mediante CDN, pero aún así se puede personalizar todo con el uso de variables.
Shoelace utiliza una característica soportada de CSS llamada Custom Properties. A muchas personas les gusta llamarlas "variables CSS". De cualquier manera, son increíblemente útiles.
Se pueden definir propiedades personalizadas en el CSS de la siguiente manera:
:root {
--body-color: #000;
--body-bg-color: #fff;
--link-color: blue;
}Y luego usarla de la siguiente manera:
body {
color: var(--body-color);
background-color: var(--body-bg-color);
}
a {
color: var(--link-color);
}Esto es lo que viene por defecto en Shoelace
- CSS Reset
- Default Content Styles
- Alerts
- Badges
- Buttons
- Forms
- Loaders
- Tabs
- Tables
- Text Utilities
- Float Utilities
- Sizing Utilities
- Spacing Utilities
En este enlace puedes ver un demo.
Instalación
Existen varios tipos de "instalación"
Usando el CDN:
<link rel="stylesheet" href="https://cdn.shoelace.style/1.0.0-beta22/shoelace.css">
<script src="https://cdn.shoelace.style/1.0.0-beta22/shoelace.js"></script>Usando npm:
npm install shoelace-css
En la documentación hay mucha más información de como ponerlo en marcha.
