Primeros pasos

HinataCSS puede integrarse como una hoja de estilos dentro de una aplicación existente. La ruta exacta dependerá de dónde publiques el archivo compilado del framework.

Integración básica

Incluye primero HinataCSS y después la hoja de estilos específica de tu producto. Ese orden permite personalizar tokens y componentes sin modificar los archivos del framework.

<link rel="stylesheet" href="/assets/css/hinata.css">
<link rel="stylesheet" href="/assets/css/app.css">

Estructura recomendada

assets/
├── css/
│   ├── hinata.css
│   └── app.css
└── js/
    └── app.js

Mantén las reglas propias del producto en app.css. De esta forma podrás actualizar el archivo de HinataCSS sin mezclar cambios locales con el núcleo del framework.

Primera pantalla

Empieza utilizando los tokens de color, espacio y tipografía disponibles en tu compilación. Después incorpora componentes de forma progresiva y verifica cada estado: normal, hover, focus, disabled y error.

Antes de publicar

• Comprueba la navegación mediante teclado.
• Verifica contraste y tamaños de texto.
• Prueba los puntos de quiebre utilizados por la aplicación.
• Evita depender de una clase que no esté incluida en la versión compilada.

La distribución pública y los nombres definitivos de las clases se documentarán cuando la API del framework alcance una versión estable.