Primeros pasos

dsUIKit es un CSS con los componentes de la familia Dreamsign, más un tema (theme.css) que cambia colores y tipografías. Funciona con HTML y con React; Vue y Angular vienen después.

Descargas

ds-uikit.min.css — CSS minificado (producción)
ds-uikit.css — CSS con comentarios (desarrollo)
ds-uikit.min.js — JS minificado (producción), global dsUIKit
ds-uikit.js — JS con comentarios (desarrollo)
ds-uikit.esm.js — JS como módulo ESM (React, Vite y otros empaquetadores)
theme-dreamsign.css — Tema Dreamsign (plantilla para crear el tuyo)

Versión actual: 0.1.0.

Instalación

Copia ds-uikit.min.css y el theme.css de tu sitio en la carpeta de estilos.

Carga primero el kit y después el tema. El CSS propio del sitio va al final:

<link rel="stylesheet" href="/css/ds-uikit.min.css">
<link rel="stylesheet" href="/css/theme.css">
<link rel="stylesheet" href="/css/sitio.css">

Usa las clases de los componentes, por ejemplo <button class="btn btn--primary">.
Si usas componentes interactivos (cerrar un mensaje, modal, dropdown…), carga también ds-uikit.min.js. Más en JavaScript.

Plantilla HTML

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mi sitio</title>
  <link rel="stylesheet" href="css/ds-uikit.min.css">
  <link rel="stylesheet" href="css/theme.css">
</head>
<body>
  <h1>Hola</h1>
  <button type="button" class="btn btn--primary">Comenzar</button>

  <script src="js/ds-uikit.min.js" defer></script>
</body>
</html>

React

Importa los CSS (y el JS, si lo usas) una sola vez, en el punto de entrada (main.jsx):

import './css/ds-uikit.min.css';
import './css/theme.css';
import './js/ds-uikit.esm.js';

Cada ejemplo de la documentación trae su versión React lista para copiar (con className, htmlFor, etc.).

Orden del CSS

El kit usa capas de cascada:

@layer ds.reset, ds.tokens, ds.base, ds.layout, ds.components, ds.utilities;

El CSS sin capa siempre gana a las capas, sin importar la especificidad. Por eso:

El theme.css va sin @layer y se impone a los valores por defecto.
Para ajustar un componente en tu sitio, escribe una regla normal: gana sin !important.
El reset es mínimo: no quita márgenes ni estilos de listas, enlaces o botones de forma global.

Clases

Las clases usan BEM, sin prefijo: bloque, bloque__elemento y bloque--modificador (por ejemplo, btn btn--primary btn--lg). Los estados usan is-* (is-active, is-disabled) o atributos ARIA (aria-pressed, aria-expanded).

Navegadores

Funciona en navegadores actuales: Chrome y Edge 111+, Firefox 113+ y Safari 16.2+, que soportan @layer y color-mix().