# QuicklyCSS V2 — documentación completa > Contexto consolidado para asistentes de IA. Versión 2.0.0-alpha.4, estado preliminar. Consulta el catálogo estructurado en https://quicklycss.cl/quicklycss-api.json. No inventes clases ni mezcles V1 y V2. --- # Activación (estado inmediato) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/activation.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Contenidos · Switch Representa una preferencia que cambia entre activa e inactiva y comunica su estado mediante un checkbox nativo con role switch. v2.0 ↔ ## Dos estados Comunica claramente activado o desactivado. ✓ ## Semántica nativa Conserva checked, disabled y foco de teclado. ● ## Color primario bc-primary aplica el mismo color utilizado por btn-primary. Código + resultado ## Preferencia activable El texto describe la preferencia; al pulsar, la perilla se desplaza suavemente y el fondo adopta el color primario. HTML ```html ``` Resultado aplicado Activación Componente real Recibir notificaciones Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-switch | Control binario animado. | Aplicar a input type checkbox. | | role="switch" | Expone el patrón a tecnologías de asistencia. | Añadir cuando representa activación inmediata. | | .rounded-100 | Redondea pista y perilla. | Utilidad opcional de bordes. | | .bc-primary | Color activo primario. | Coincide con el color visual de btn-primary. | | .bc-{color} | Color activo alternativo. | Permite usar otro color semántico cuando el contexto lo requiera. | Recomendaciones ## Buenas prácticas de Activación 01 ### Estado inmediato Usa switch para preferencias que se aplican al cambiar. 02 ### Texto afirmativo Describe qué queda activo, no la acción de pulsar. 03 ### Sin ambigüedad No lo uses para elegir entre más de dos alternativas. --- # Datos verificables. Procedimientos claros. > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/ai-agents.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Ready for AI · Agent Ready QuicklyCSS combina documentación legible por máquinas con instrucciones específicas por tarea para que un agente pueda construir, comprobar y corregir sin inventar clases. v2.0 { } ## API estructurada Clases, tokens, módulos, breakpoints y atributos disponibles en JSON. → ## Skills por tarea Procedimientos breves para instalar, construir, auditar y migrar. ✓ ## Salida verificable Cada flujo exige evidencia, accesibilidad y validación contra el catálogo. Arquitectura para agentes ## Dos capas que trabajan juntas La primera describe qué existe. La segunda indica cómo usarlo correctamente para una tarea concreta. 01 · DATOS ### Ready for AI Fuentes canónicas para recuperar contexto, consultar la documentación y validar cada decisión. - [llms.txt](../llms.txt) - [llms-full.txt](../llms-full.txt) - [AI_USAGE.md](../AI_USAGE.md) - [quicklycss-api.json](../quicklycss-api.json) 02 · PROCEDIMIENTOS ### Agent Ready Instrucciones operativas y criterios de aceptación adaptados a cada tipo de trabajo. - Elegir las fuentes necesarias - No inventar clases ni equivalencias - Comprobar responsive y accesibilidad - Entregar evidencia y límites Catálogo público ## Skills oficiales de QuicklyCSS Entrega al agente el archivo correspondiente a la tarea. Cada skill enlaza las fuentes de verdad y define su propia comprobación final. 01 ### Instalar QuicklyCSS Selecciona los bundles oficiales y evita dependencias duplicadas. [Abrir SKILL.md ↗](../skills/quicklycss-install/SKILL.md) 02 ### Construir una página Convierte requisitos en HTML semántico con clases verificadas. [Abrir SKILL.md ↗](../skills/quicklycss-build-page/SKILL.md) 03 ### Layout responsive Resuelve móvil, tableta y escritorio sin variantes inventadas. [Abrir SKILL.md ↗](../skills/quicklycss-responsive-layout/SKILL.md) 04 ### Implementar componentes Conserva anatomía, atributos, JavaScript y accesibilidad. [Abrir SKILL.md ↗](../skills/quicklycss-component/SKILL.md) 05 ### Aplicar color Usa colores semánticos, tonos oficiales y contraste accesible. [Abrir SKILL.md ↗](../skills/quicklycss-color-system/SKILL.md) 06 ### Auditar clases Clasifica clases válidas, propias y desconocidas con evidencia. [Abrir SKILL.md ↗](../skills/quicklycss-audit-classes/SKILL.md) 07 ### Migrar V1 a V2 Mapea reemplazos confirmados y registra lo que no tiene equivalencia. [Abrir SKILL.md ↗](../skills/quicklycss-v1-v2-migration/SKILL.md) Descubrimiento automático: [skills/index.json](../skills/index.json) Uso recomendado ## Del pedido a una entrega comprobada Este flujo evita que el agente trate la nomenclatura del framework como una suposición. 01 ### Seleccionar Elige la skill que coincide con la tarea solicitada. 02 ### Consultar Lee reglas, Markdown y API antes de generar código. 03 ### Construir Usa solo clases confirmadas y separa cualquier CSS propio. 04 ### Verificar Prueba responsive, interacción, accesibilidad y dependencias. i ## Sin dependencia obligatoria de npm Los archivos son Markdown y JSON públicos. Pueden consultarse directamente desde el hosting o descargarse para el entorno del agente. --- # Alignment (alineación) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/alignment.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Layout Controla texto, ejes de flex, contenido de grid y elementos individuales mediante familias explícitas y variantes responsivas. v2.0 ↔ ## Flex explícito `.flex-*` distribuye el eje principal y `.items-*` controla el transversal. ⊞ ## Grid en dos niveles `.grid-*` mueve el conjunto y `.grid-items-*` alinea sus elementos. 9 ## Nueve breakpoints Las familias principales admiten variantes desde 640px hasta 6016px. i ## Contexto antes que clase Las utilidades modifican propiedades de alineación, pero no activan el layout. El contenedor debe ser flex o grid mediante `.display-flex` o `.display-grid`. Código + resultado ## Compara modos de alineación Selecciona una composición para ver qué eje y qué conjunto de elementos modifica. HTML Resultado aplicado Flex · start Ejes del contenedor A B C .flex-start modifica justify-content y mantiene los elementos al inicio del eje principal. ```html
ABC
``` .flex-center centra el grupo sobre el eje principal; .items-center lo centra sobre el eje transversal. ```html
ABC
``` .flex-between coloca el primer y último elemento en los extremos y distribuye el espacio restante. ```html
ABC
``` .grid-center centra el conjunto de pistas; .grid-items-center alinea cada elemento dentro de su celda. ```html
ABC
``` .place-center aplica place-content y place-items; es el atajo más compacto para centrar un grid en ambos ejes. ```html
ABC
``` Mapa del sistema ## Siete familias de alineación Primero identifica el contexto y después decide si quieres mover el grupo completo, todos sus hijos o un único elemento. ¿Es texto? Usa `.text-*` ¿Es un contenedor flex? Usa `.flex-*` o `.items-*` ¿Es un contenedor grid? Usa `.grid-*`, `.grid-items-*` o `.place-*` ### Texto `.text-*` Horizontal #### Las líneas de texto Se aplica en Elemento que contiene el texto Propiedad `text-align` Ejemplo `.text-center` Opciones: left · center · right · justify ### Flex `.flex-*` Eje principal #### El grupo completo de hijos Se aplica en Contenedor flex Propiedad `justify-content` Ejemplo `.flex-between` Opciones: start · center · end · between · around · evenly `.items-*` Eje transversal #### Todos los hijos Se aplica en Contenedor flex Propiedad `align-items` Ejemplo `.items-center` Opciones: start · center · end · stretch `.self-*` Eje transversal #### Un único hijo Se aplica en Elemento hijo Propiedad `align-self` Ejemplo `.self-end` Opciones: start · center · end · stretch ### Grid `.grid-*` Ambos ejes #### El conjunto de pistas Se aplica en Contenedor grid Propiedad `justify-content + align-content` Ejemplo `.grid-center` Opciones: start · center · end · between · around · evenly `.grid-items-*` Eje de bloque #### Los elementos de todas las celdas Se aplica en Contenedor grid Propiedad `align-items` Ejemplo `.grid-items-center` Opciones: start · center · end · stretch `.place-*` Ambos ejes #### Contenido y elementos a la vez Se aplica en Contenedor grid Propiedad `place-content + place-items` Ejemplo `.place-center` Opciones: start · center · end Variantes responsivas ## Nueve puntos de activación El breakpoint se inserta entre la familia y el valor: `.flex-768-center` o `.grid-items-1280-end`. `640` min-width .flex-640-center `768` min-width .flex-768-center `1024` min-width .flex-1024-center `1280` min-width .flex-1280-center `1536` min-width .flex-1536-center `1920` min-width .flex-1920-center `2560` min-width .flex-2560-center `3840` min-width .flex-3840-center `6016` min-width .flex-6016-center Excepción Las clases `.place-start`, `.place-center` y `.place-end` sólo existen como variantes base en el CSS actual. Referencia ## Clases disponibles Las variantes responsivas repiten los mismos valores de cada familia en los nueve breakpoints. | Clases | Propiedad | Valores | Contexto | | --- | --- | --- | --- | | .text-{valor} | text-align | left, center, right, justify | Cualquier bloque de texto. | | .flex-{valor} | justify-content | start, center, end, between, around, evenly | Contenedor flex. | | .items-{valor} | align-items | start, center, end, stretch | Contenedor flex. | | .self-{valor} | align-self | start, center, end, stretch | Hijo de flex o grid. | | .grid-{valor} | justify-content + align-content | start, center, end, between, around, evenly | Contenedor grid. | | .grid-items-{valor} | align-items | start, center, end, stretch | Contenedor grid. | | .place-{valor} | place-content + place-items | start, center, end | Principalmente grid. | Recomendaciones ## Buenas prácticas de alineación 01 ### Activa el layout Una clase de alineación no cambia por sí sola el elemento a flex o grid. 02 ### Identifica el eje En flex, usa `.flex-*` para el eje principal y `.items-*` para el transversal. 03 ### Usa self con criterio Reserva `.self-*` para excepciones puntuales dentro de un conjunto alineado. 04 ### Responsive progresivo Define primero el comportamiento móvil y sobrescríbelo sólo en los breakpoints necesarios. --- # Animation (secuencias reutilizables) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/animation.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Movimiento Aplica entradas `in`, salidas `out`, indicadores de estado y movimientos continuos con controles independientes para duración, retraso, repetición y ejecución. v2.0 ▶ ## Once secuencias Cuatro entradas, cuatro salidas y tres estados continuos cubren los patrones de interfaz más frecuentes. ⏱ ## Control por capas Duración, retraso, iteración, relleno y estado se combinan sin duplicar keyframes. A ## Movimiento accesible Detecta la opción “Reducir movimiento” del dispositivo y minimiza automáticamente las animaciones. i ## Animación y transición no son lo mismo Usa Animation para una secuencia con keyframes. Si solo necesitas suavizar el cambio entre dos estados, utiliza `transition.css`. ↕ ## ¿El movimiento depende del viewport? Consulta Run / Run Back . Esa página reúne la activación por scroll, la API original y sus familias de efectos sin repetirlas aquí. [Ver Run / Run Back →](run.md) Nomenclatura ## In muestra; Out retira Cada familia tiene una entrada y una salida predecibles. `in` termina con el elemento visible en su posición natural; `out` comienza allí y termina ocultándolo. IN Estado inicial → estado visible El elemento aparece y termina listo para participar visualmente en la interfaz. ⇄ OUT Estado visible → estado final oculto El elemento desaparece y conserva el último fotograma mediante `fill-mode: both`. OPACIDAD ### Fade `.animate-fade-in``.animate-fade-out` Aparece o desaparece sin modificar la posición. DIRECCIÓN ↑ ### Slide up `.animate-slide-in-up``.animate-slide-out-up` Up indica el movimiento: entra desde abajo o sale hacia arriba. DIRECCIÓN ↓ ### Slide down `.animate-slide-in-down``.animate-slide-out-down` Down indica el movimiento: entra desde arriba o sale hacia abajo. ESCALA ### Scale `.animate-scale-in``.animate-scale-out` Aparece creciendo o desaparece reduciendo su tamaño. i ### Compatibilidad `.animate-slide-up` y `.animate-slide-down` continúan funcionando como alias, pero el código nuevo debe usar `.animate-slide-in-up` y `.animate-slide-in-down`. Código + resultado ## Compara entradas, salidas y estados Cambia de pestaña para ejecutar otra secuencia. El HTML mostrado es exactamente el que produce el resultado aplicado. HTML Resultado aplicado Entrada · una vez Secuencia activa Q Animation Resultado aplicado .animate-fade-in lleva la opacidad de 0 a 1 en 500ms. ```html
Q Animation Resultado aplicado
``` .animate-slide-in-up entra desde 24px abajo y se mueve hacia arriba hasta su posición natural. ```html
Q Animation Resultado aplicado
``` .animate-slide-in-down entra desde 24px arriba y se mueve hacia abajo hasta su posición natural. ```html
Q Animation Resultado aplicado
``` .animate-scale-in aparece desde scale(.88) y recupera el tamaño normal en 400ms. ```html
Q Animation Resultado aplicado
``` .animate-fade-out lleva la opacidad de 1 a 0 y conserva el estado final. ```html
Q Animation Resultado aplicado
``` .animate-slide-out-up oculta el elemento mientras lo desplaza 24px hacia arriba. ```html
Q Animation Resultado aplicado
``` .animate-slide-out-down oculta el elemento mientras lo desplaza 24px hacia abajo. ```html
Q Animation Resultado aplicado
``` .animate-scale-out reduce el elemento a scale(.88) mientras desaparece. ```html
Q Animation Resultado aplicado
``` .animate-pulse alterna escala y opacidad para comunicar espera o actividad. ```html
Q Animation Resultado aplicado
``` .animate-spin completa una rotación lineal cada 1000ms. ```html
Q Animation Resultado aplicado
``` .animate-bounce desplaza el elemento 18px hacia arriba y lo devuelve a su posición. ```html
Q Animation Resultado aplicado
``` Ajustes ## Controla la ejecución sin crear otra animación Los modificadores actualizan variables `--qy-animation-*` que consume la clase principal. Pasa el mouse sobre las tarjetas inferiores para comparar los estados. ### Duración `.anim-duration-200` 200ms `.anim-duration-500` 500ms `.anim-duration-1000` 1000ms `.anim-duration-2000` 2000ms ### Retraso 0ms `.anim-delay-0` 150ms `.anim-delay-150` 300ms `.anim-delay-300` 500ms `.anim-delay-500` ITERACIONES ### Una vez o continua Once Infinite `.anim-once``.anim-infinite` La primera termina una vez; la segunda continúa mientras mantienes el mouse sobre la tarjeta. RELLENO ### Estado final None Forwards `.anim-fill-none``.anim-fill-forwards` `none` recupera el estado inicial; `forwards` conserva el último fotograma. EJECUCIÓN ### Pausa y reanuda Paused Running `.anim-paused``.anim-running` Una muestra queda detenida y la otra se ejecuta al pasar el mouse. RESET ### Sin animación Active None `.animate-none` La segunda muestra permanece inmóvil porque elimina completamente la animación. Composición ## Una clase principal y los controles necesarios No necesitas repetir propiedades ni crear un keyframe nuevo para cambiar tiempo o repetición. 01 Elige el movimiento `.animate-slide-in-up` + 02 Ajusta la duración `.anim-duration-1000` + 03 Añade retraso `.anim-delay-150` HTML resultante ```html
Contenido que entra desde abajo
``` Resultado aplicado Entrada · 1000ms Retraso · 150ms Contenido que entra desde abajo Movimiento + duración + retraso La clase principal define los keyframes; los modificadores cambian únicamente las variables de ejecución. Referencia ## Clases disponibles La tabla coincide con las utilidades reales incluidas en `animation.css`. | Familia | Clases | Responsabilidad | Valor inicial | | --- | --- | --- | --- | | Entradas | .animate-fade-in , .animate-slide-in-up , .animate-slide-in-down , .animate-scale-in | Muestra el elemento mediante opacidad, desplazamiento o escala. | Una ejecución. | | Salidas | .animate-fade-out , .animate-slide-out-up , .animate-slide-out-down , .animate-scale-out | Retira el elemento y conserva el estado final. | Una ejecución. | | Estado continuo | .animate-pulse , .animate-spin , .animate-bounce | Comunica espera, proceso o actividad. | Infinita. | | Alias compatibles | .animate-slide-up , .animate-slide-down | Mantiene código anterior; para código nuevo utiliza las clases explícitas slide-in . | 500ms. | | Duración | .anim-duration-{200\|500\|1000\|2000} | Cambia --qy-animation-duration . | Definida por la animación. | | Retraso | .anim-delay-{0\|150\|300\|500} | Cambia --qy-animation-delay . | 0ms | | Iteraciones | .anim-once , .anim-infinite | Una ejecución o repetición continua. | Según la animación. | | Relleno | .anim-fill-none , .anim-fill-forwards | Conserva o descarta el último fotograma. | both o none. | | Estado | .anim-paused , .anim-running | Pausa o reanuda. | running | | Reset | .animate-none | Elimina la animación completa. | none | Recomendaciones ## Buenas prácticas de movimiento 01 ### Comunica una causa Anima para explicar entrada, espera o continuidad; evita movimiento puramente decorativo. 02 ### Una animación principal No combines dos clases `.animate-*`: ambas escribirían la propiedad animation. 03 ### Limita los infinitos Reserva pulse, spin y bounce para indicadores que realmente continúan activos. 04 ### Respeta la preferencia del sistema Si el usuario activa “Reducir movimiento” en su dispositivo, QuicklyCSS minimiza automáticamente las animaciones. --- # Borders (bordes y radios) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/borders.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Superficie Compón presencia, lado, grosor, estilo, color y radio sin recurrir a reglas específicas por componente. v2.0 10 ## Grosores 0–10 Control global o independiente para cada lado del elemento. ⌜ ## Radios completos Escala hasta 100px, formas circulares y control por lado o esquina. ● ## Color componible Usa alias semánticos o clases de paleta `.border-*`. i ## Fórmula recomendada Combina una base, un grosor, un estilo, un color y opcionalmente un radio: `.border .border-2 .border-solid .border-secondary .rounded-12`. Base predecible `.border`, `.border-x`, `.border-y` y las variantes por lado crean únicamente un trazo sólido de 1px. No declaran color ni usan `!important`; sin una utilidad de color conservan el `currentColor` nativo de CSS. Código + resultado ## Compara composiciones de borde Cada ejemplo utiliza únicamente clases disponibles en los módulos de borde y color. HTML Resultado aplicado 2px · solid Borde real Elemento de ejemplo Base + grosor + estilo + color + radio La clase .border crea el borde base; el resto de utilidades reemplaza grosor, estilo, color y radio. ```html
Elemento de ejemplo
``` .border-dashed sólo cambia el estilo; .border-3 mantiene el grosor explícito. ```html
Elemento de ejemplo
``` Las variantes de lado pueden combinar presencia, grosor y color sobre el mismo borde. ```html
Elemento de ejemplo
``` .rounded-p usa el radio completo del sistema y genera una píldora según la altura del elemento. ```html Estado activo ``` Trazo ## Grosores y estilos El grosor se expresa en píxeles y puede aplicarse a todos los lados o a uno específico. `.border-0` 0px `.border-1` 1px `.border-2` 2px `.border-3` 3px `.border-4` 4px `.border-5` 5px `.border-6` 6px `.border-7` 7px `.border-8` 8px `.border-9` 9px `.border-10` 10px `.border-solid` Trazo continuo `.border-dashed` Trazo segmentado `.border-dotted` Trazo punteado `.border-double` Trazo doble `.border-hidden` Oculto para resolución de tablas `.border-none` Sin estilo visible Convención `.border-*` es la única familia para estilos y grosores de borde. Para subrayados y tachados usa [.decoration-*](line-types.md). Por lado Inserta `t`, `r`, `b` o `l`: `.border-t-4`, `.border-r-2`, `.border-b-1`, `.border-l-6`. Forma ## Escala de radios La escala incluye 0px, 2px, 4px y luego incrementos de 4px hasta 100px. Para comparar correctamente la curva, cada muestra aplica el valor sólo a la esquina superior izquierda. `.rounded-0` Radio: 0px `.rounded-2` Radio: 2px `.rounded-4` Radio: 4px `.rounded-8` Radio: 8px `.rounded-12` Radio: 12px `.rounded-16` Radio: 16px `.rounded-20` Radio: 20px `.rounded-24` Radio: 24px `.rounded-28` Radio: 28px `.rounded-32` Radio: 32px `.rounded-36` Radio: 36px `.rounded-40` Radio: 40px `.rounded-44` Radio: 44px `.rounded-48` Radio: 48px `.rounded-52` Radio: 52px `.rounded-56` Radio: 56px `.rounded-60` Radio: 60px `.rounded-64` Radio: 64px `.rounded-68` Radio: 68px `.rounded-72` Radio: 72px `.rounded-76` Radio: 76px `.rounded-80` Radio: 80px `.rounded-84` Radio: 84px `.rounded-88` Radio: 88px `.rounded-92` Radio: 92px `.rounded-96` Radio: 96px `.rounded-100` Radio: 100px Forma rápida · 01 ## Círculo con `.rounded-c` La clase aplica el radio completo del sistema. Para obtener un círculo perfecto, el elemento debe conservar una proporción cuadrada. HTML ```html
``` `.ratio-1-1` garantiza una caja cuadrada y `.rounded-c` la convierte en círculo. Resultado aplicado Forma rápida · 02 ## Píldora con `.rounded-p` El radio completo se adapta a la altura del contenido. Es apropiado para etiquetas, estados y acciones compactas. HTML ```html Estado activo ``` El padding determina la proporción; `.rounded-p` mantiene los extremos completamente curvos. Resultado aplicado Estado activo Control preciso · 03 ## Radios por lado y esquina Usa `.rounded-{lado}-{valor}` para un par de esquinas o `.rounded-s-{esquina}-{valor}` para una esquina individual. HTML ```html
Esquinas superiores
Esquina superior izquierda
``` Los lados usan `t`, `r`, `b` y `l`; las esquinas usan `a`, `b`, `c` y `d`. Resultado aplicado Esquinas superiores Esquina superior izquierda Color ## Color independiente de la estructura El borde se crea primero y el color se aplica después con un alias semántico o una clase de la paleta. Recomendado Alias directo La clase dice exactamente qué lado y qué color aplica. Es la opción más fácil de leer. ```html
Borde superior primario
``` Resultado: borde superior primario Úsalo cuando el color pertenece a un borde concreto. Paleta Color explícito La estructura y el color siguen siendo independientes sin depender de un token interno. ```html
Borde superior slate 800
``` Resultado: borde superior slate 800 Úsalo cuando necesites elegir un tono concreto de la paleta. ### Colores semánticos Muted `.border-muted` Inverse `.border-inverse` Primary `.border-primary` Secondary `.border-secondary` Success `.border-success` Warning `.border-warning` Danger `.border-danger` Info `.border-info` ### Escala neutral Neutral 900 `.border-900` Neutral 800 `.border-800` Neutral 700 `.border-700` Neutral 600 `.border-600` Neutral 500 `.border-500` Neutral 400 `.border-400` Neutral 300 `.border-300` Neutral 200 `.border-200` Neutral 100 `.border-100` Neutral 50 `.border-50` ### Valores especiales Black `.border-black` White `.border-white` Current color `.border-current` Transparent `.border-transparent` Referencia ## Clases disponibles Cada ejemplo muestra una composición completa. Lee las clases de izquierda a derecha: creación del borde, grosor, estilo, color y radio. | Clases | Valores | Qué controla | Ejemplo completo | Cómo se interpreta | | --- | --- | --- | --- | --- | | .box-* | border , content , initial , inherit , unset , revert | Define cómo se calculan el ancho y el alto del elemento. | Contenido | .box-border incluye padding y borde dentro de las dimensiones declaradas. | | .border .border-{eje\|lado} | Todos los lados, ejes x / y o lados t , r , b , l | Crea un borde base de 1px y estilo sólido, sin fijar su color. | Contenido | .border-t crea el borde superior y .border-t-primary cambia su color. | | .border-{0…10} | 0px a 10px | Cambia el grosor de los cuatro lados; no crea por sí sola el estilo del borde. | Contenido | .border crea el borde y .border-4 reemplaza su grosor por 4px. | | .border-{lado}-{0…10} | t , r , b , l · 0px a 10px | Cambia el grosor de un lado concreto. | Contenido | Crea solamente el borde inferior, lo lleva a 4px y aplica el color de peligro. | | .border-{estilo} | solid , dashed , dotted , double , hidden , none | Modifica el patrón visual del trazo. | Contenido | El borde se crea, aumenta a 3px, cambia a segmentado y recibe el color informativo. | | .rounded-{valor} | 0px, 2px, 4px y luego 8px…100px | Redondea simultáneamente las cuatro esquinas. | Contenido | .rounded-16 aplica 16px de radio a todo el elemento. | | .rounded-{lado}-{valor} | Lados t , r , b , l · valores 4, 8, 12, 16, 20 | Redondea el par de esquinas perteneciente a un lado. | Contenido | t afecta las dos esquinas superiores; en este caso ambas reciben 12px. | | .rounded-s-{esquina}-{valor} | a superior izquierda, b superior derecha, c inferior derecha, d inferior izquierda | Redondea una única esquina. | Contenido | a selecciona la esquina superior izquierda y 8 define un radio de 8px. | | .border-{color} | Alias directo para todos los lados | Aplica el color de forma independiente a la estructura y al grosor. | Contenido | El borde completo recibe directamente el color semántico de éxito. | | .border-x-{color} | Eje horizontal: izquierda y derecha | Colorea ambos lados horizontales; no crea sus grosores ni estilos. | Contenido | .border-l y .border-r crean los lados; el alias de eje colorea ambos. | | .border-{lado}-{color} | t , r , b , l | Colorea solamente el lado indicado. | Contenido | Crea el borde izquierdo, establece 4px y aplica el color de peligro sólo a ese lado. | Responsive Las variantes responsivas están disponibles en ocho breakpoints: 640, 768, 1024, 1280, 1536, 2560, 3840, 6016. Recomendaciones ## Buenas prácticas con bordes 01 ### Compón responsabilidades Declara por separado presencia, grosor, estilo, color y radio. 02 ### Usa box-border Incluye padding y borde dentro de las dimensiones declaradas del componente. 03 ### Prefiere alias semánticos Las clases de color semánticas mantienen consistencia entre temas y estados. 04 ### Evita exceso visual Usa grosores altos y bordes dobles sólo cuando exista una jerarquía clara. --- # Buttons (botones y acciones) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/buttons.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Contenidos · Botones Construye acciones consistentes con una base proporcional, variantes semánticas, botones de icono y una escala tipográfica que modifica todo el componente. v2.0 ● ## Siete variantes Primary, secondary, success, danger, warning, dark y light. ↗ ## Escala proporcional Padding, altura, radio e iconos crecen junto con el tamaño tipográfico. ◎ ## Estados accesibles Incluye foco visible, hover, active, disabled y reduced motion. i ## Composición básica Combina `.btn` con una variante como `.btn-primary`. Usa `.btn-ico` cuando la acción contiene únicamente un icono. ✦ ## Alias reales Las variantes aceptan alias cortos como `.btn-p` y la escala tipográfica puede escribirse como `.btn-font-size-{n}` o `.btn-fs-{n}`. Código + resultado ## Ejemplos reales de botones Selecciona una clase para comparar el marcado y el componente renderizado por QuicklyCSS. HTML Resultado aplicado Primary Componente real .btn aporta la estructura y .btn-primary aplica la variante semántica principal. ```html ``` .btn-secondary utiliza la paleta secundaria y conserva todos los estados de la base. ```html ``` .btn-success comunica una acción satisfactoria o confirmación positiva. ```html ``` .btn-ico mantiene ancho y alto proporcionales. Añade siempre un nombre accesible al botón. ```html ``` .btn-fs-4 fija font-size: 1.25rem; las dimensiones en em escalan con el texto. ```html ``` El atributo disabled reduce la opacidad, elimina la interacción y comunica el estado al navegador. ```html ``` Referencia ## Clases de botones La referencia agrupa la base, las variantes, los estados y la escala tipográfica del sistema. | Clases | Alias | Función | Uso recomendado | | --- | --- | --- | --- | | .btn | — | Base con texto | Combinar con una variante semántica. | | .btn-ico | — | Botón cuadrado | Acciones representadas únicamente por un icono. | | .btn-primary | .btn-p | Acción principal | CTA prioritario de una vista. | | .btn-secondary | .btn-s | Acción secundaria | Alternativa a la acción principal. | | .btn-success | .btn-g | Confirmación positiva | Guardar, aprobar o completar. | | .btn-danger | .btn-d | Acción destructiva | Eliminar, rechazar o cancelar definitivamente. | | .btn-warning | .btn-w | Advertencia | Acciones que requieren precaución. | | .btn-dark | .btn-k | Variante oscura | Contraste fuerte en superficies claras. | | .btn-light | .btn-l | Variante clara | Acciones discretas sobre fondos neutros. | | .btn-font-size-01–07 | .btn-fs-01–07 | 15px a 9px | Interfaces compactas, chips o controles densos. | | .btn-font-size-0 | .btn-fs-0 | 16px | Tamaño base del sistema. | | .btn-font-size-1–40 | .btn-fs-1–40 | 17px a 56px | Acciones progresivamente más destacadas. | | [disabled] | .is-disabled | Estado inactivo | Preferir el atributo nativo en elementos button. | | .ico | — | Icono interno de 1em | SVG, elemento i o span dentro del botón. | | .ico-left | — | Margen derecho | Icono situado antes del texto. | | .ico-right | — | Margen izquierdo | Icono situado después del texto. | Regla del sistema El tamaño del botón depende de su font-size: padding, altura mínima, radio, separación e iconos utilizan unidades em. Contraste WCAG AA `.btn-primary` mantiene texto blanco con contraste 6.70:1 en reposo y 8.72:1 durante `:hover`. Sus bordes y el foco visible conservan al menos 3:1 frente a superficies claras y oscuras. `.btn-dark` utiliza un borde perceptible y aclara su superficie durante `:hover` para no confundirse con fondos oscuros. Recomendaciones ## Buenas prácticas con botones 01 ### Una acción principal Evita competir visualmente con varios botones primary dentro del mismo contexto. 02 ### Texto específico Usa etiquetas que describan la acción, como “Guardar cambios” o “Descargar”. 03 ### Iconos accesibles Proporciona `aria-label` cuando un botón no contiene texto visible. 04 ### Disabled con contexto Explica qué condición debe cumplirse para habilitar una acción bloqueada. --- # Colors (paleta y aplicaciones) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/colors.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Contenidos · Colores Aplica colores al texto, los fondos y los bordes desde un único módulo, con 22 familias cromáticas, alias semánticos y una escala compartida de 11 tonos. v2.0 ◉ ## 22 familias Incluye cinco escalas neutras y diecisiete familias cromáticas. 11 ## Tonos de 50 a 950 Cada familia mantiene la misma progresión clara, media y oscura. 3 ## Tres propiedades Una misma paleta funciona para color, background-color y border-color. i ## Clases disponibles Usa una familia explícita como `.color-blue-600` o un alias semántico como `.color-primary`. El mismo criterio se aplica a `.bg-*` y `.border-*`. ✦ ## Tokens reutilizables Cada utilidad consume una variable `--qy-{familia}-{tono}`, por lo que la paleta puede tematizarse sin cambiar el marcado. Código + resultado ## Ejemplos reales de color Compara cómo la misma nomenclatura se aplica al texto, al fondo y al borde. HTML Resultado aplicado Texto Componente real .color-blue-600 aplica el tono blue 600 a la propiedad color. ```html
Texto azul 600
``` .bg-blue-500 aplica el tono blue 500 al fondo; .color-white mantiene el contraste del texto. ```html
Fondo azul 500
``` El color de borde se combina con utilidades reales de estilo y grosor para que sea visible. ```html
Borde emerald 500
``` Combina una superficie oscura con texto blanco para conservar una lectura clara. ```html
Superficie slate 900
``` Todas las familias comparten el mismo patrón de clase y la misma escala tonal. ```html
Texto rose 600
``` .color-primary expresa intención y toma su valor de --qy-text-primary; el tema puede cambiar el color sin modificar esta clase. ```html
Texto principal
``` .bg-success crea la superficie semántica y .color-success aplica el tono de texto correspondiente. ```html
Confirmación correcta
``` Intención + escala ## Colores semánticos del sistema Cada intención dispone de once tonos, del 50 al 950. Los alias permiten cambiar la identidad del tema sin reemplazar las clases utilizadas en el HTML. ### Primary Acción principal · base blue primary `.bg-primary · .color-primary` `--qy-primary-50` → `--qy-primary-950` ### Secondary Acción secundaria · base violet secondary `.bg-secondary · .color-secondary` `--qy-secondary-50` → `--qy-secondary-950` ### Success Confirmación y éxito · base green success `.bg-success · .color-success` `--qy-success-50` → `--qy-success-950` ### Warning Advertencia y atención · base amber warning `.bg-warning · .color-warning` `--qy-warning-50` → `--qy-warning-950` ### Danger Error y acción destructiva · base red danger `.bg-danger · .color-danger` `--qy-danger-50` → `--qy-danger-950` ### Info Información y orientación · base cyan info `.bg-info · .color-info` `--qy-info-50` → `--qy-info-950` Asignación predeterminada `primary → blue`, `secondary → violet`, `success → green`, `warning → amber`, `danger → red` e `info → cyan`. Uso recomendado Los fondos semánticos utilizan el tono 50 como superficie clara; texto y borde utilizan el tono 600 para conservar jerarquía y contraste. Vista general ## Familias disponibles Cada ficha reúne la identidad de la familia y sus once tonos en una escala continua. Pasa el cursor sobre cada segmento para consultar el tono, su valor hexadecimal y la clase equivalente. ### Slate Escala cromática · 11 tonos Slate Fondos `.bg-slate-50` → `.bg-slate-950` Texto `.color-slate-50` → `.color-slate-950` Bordes `.border-slate-50` → `.border-slate-950` ### Gray Escala cromática · 11 tonos Gray Fondos `.bg-gray-50` → `.bg-gray-950` Texto `.color-gray-50` → `.color-gray-950` Bordes `.border-gray-50` → `.border-gray-950` ### Zinc Escala cromática · 11 tonos Zinc Fondos `.bg-zinc-50` → `.bg-zinc-950` Texto `.color-zinc-50` → `.color-zinc-950` Bordes `.border-zinc-50` → `.border-zinc-950` ### Neutral Escala cromática · 11 tonos Neutral Fondos `.bg-neutral-50` → `.bg-neutral-950` Texto `.color-neutral-50` → `.color-neutral-950` Bordes `.border-neutral-50` → `.border-neutral-950` ### Stone Escala cromática · 11 tonos Stone Fondos `.bg-stone-50` → `.bg-stone-950` Texto `.color-stone-50` → `.color-stone-950` Bordes `.border-stone-50` → `.border-stone-950` ### Red Escala cromática · 11 tonos Red Fondos `.bg-red-50` → `.bg-red-950` Texto `.color-red-50` → `.color-red-950` Bordes `.border-red-50` → `.border-red-950` ### Orange Escala cromática · 11 tonos Orange Fondos `.bg-orange-50` → `.bg-orange-950` Texto `.color-orange-50` → `.color-orange-950` Bordes `.border-orange-50` → `.border-orange-950` ### Amber Escala cromática · 11 tonos Amber Fondos `.bg-amber-50` → `.bg-amber-950` Texto `.color-amber-50` → `.color-amber-950` Bordes `.border-amber-50` → `.border-amber-950` ### Yellow Escala cromática · 11 tonos Yellow Fondos `.bg-yellow-50` → `.bg-yellow-950` Texto `.color-yellow-50` → `.color-yellow-950` Bordes `.border-yellow-50` → `.border-yellow-950` ### Lime Escala cromática · 11 tonos Lime Fondos `.bg-lime-50` → `.bg-lime-950` Texto `.color-lime-50` → `.color-lime-950` Bordes `.border-lime-50` → `.border-lime-950` ### Green Escala cromática · 11 tonos Green Fondos `.bg-green-50` → `.bg-green-950` Texto `.color-green-50` → `.color-green-950` Bordes `.border-green-50` → `.border-green-950` ### Emerald Escala cromática · 11 tonos Emerald Fondos `.bg-emerald-50` → `.bg-emerald-950` Texto `.color-emerald-50` → `.color-emerald-950` Bordes `.border-emerald-50` → `.border-emerald-950` ### Teal Escala cromática · 11 tonos Teal Fondos `.bg-teal-50` → `.bg-teal-950` Texto `.color-teal-50` → `.color-teal-950` Bordes `.border-teal-50` → `.border-teal-950` ### Cyan Escala cromática · 11 tonos Cyan Fondos `.bg-cyan-50` → `.bg-cyan-950` Texto `.color-cyan-50` → `.color-cyan-950` Bordes `.border-cyan-50` → `.border-cyan-950` ### Sky Escala cromática · 11 tonos Sky Fondos `.bg-sky-50` → `.bg-sky-950` Texto `.color-sky-50` → `.color-sky-950` Bordes `.border-sky-50` → `.border-sky-950` ### Blue Escala cromática · 11 tonos Blue Fondos `.bg-blue-50` → `.bg-blue-950` Texto `.color-blue-50` → `.color-blue-950` Bordes `.border-blue-50` → `.border-blue-950` ### Indigo Escala cromática · 11 tonos Indigo Fondos `.bg-indigo-50` → `.bg-indigo-950` Texto `.color-indigo-50` → `.color-indigo-950` Bordes `.border-indigo-50` → `.border-indigo-950` ### Violet Escala cromática · 11 tonos Violet Fondos `.bg-violet-50` → `.bg-violet-950` Texto `.color-violet-50` → `.color-violet-950` Bordes `.border-violet-50` → `.border-violet-950` ### Purple Escala cromática · 11 tonos Purple Fondos `.bg-purple-50` → `.bg-purple-950` Texto `.color-purple-50` → `.color-purple-950` Bordes `.border-purple-50` → `.border-purple-950` ### Fuchsia Escala cromática · 11 tonos Fuchsia Fondos `.bg-fuchsia-50` → `.bg-fuchsia-950` Texto `.color-fuchsia-50` → `.color-fuchsia-950` Bordes `.border-fuchsia-50` → `.border-fuchsia-950` ### Pink Escala cromática · 11 tonos Pink Fondos `.bg-pink-50` → `.bg-pink-950` Texto `.color-pink-50` → `.color-pink-950` Bordes `.border-pink-50` → `.border-pink-950` ### Rose Escala cromática · 11 tonos Rose Fondos `.bg-rose-50` → `.bg-rose-950` Texto `.color-rose-50` → `.color-rose-950` Bordes `.border-rose-50` → `.border-rose-950` Referencia ## Clases de color El módulo reúne clases explícitas, alias semánticos y aplicadores de borde bajo el mismo namespace de tokens `--qy-*`. | Clases | Propiedad | Valores | Ejemplo | | --- | --- | --- | --- | | .color-{familia}-{tono} | color | 22 × 11 | .color-blue-600 | | .bg-{familia}-{tono} | background-color | 22 × 11 | .bg-emerald-500 | | .border-{familia}-{tono} | border-color | 22 × 11 | .border-rose-300 | | .color-{intención} | color | primary, secondary, success, warning, danger, info | .color-success | | .bg-{intención} | background-color | Alias semánticos | .bg-warning | | .border-{intención} | border-color | Alias semánticos | .border-danger | | .color-white / .color-black | color | Blanco y negro | Contraste de texto. | | .bg-white / .bg-black | background-color | Blanco y negro | Superficies puras. | | .border-white / .border-black | border-color | Blanco y negro | Bordes puros. | | --qy-{familia}-{tono} | Custom property | 22 × 11 | --qy-blue-500 | | --qy-{intención}-{tono} | Custom property semántica | 6 × 11 | --qy-primary-600 | Color y estructura Las clases `.border-{color}` modifican únicamente el color. Combínalas con `.border`, `.border-x`, `.border-y` o una variante por lado para crear el trazo sólido de 1px; las utilidades de grosor y estilo pueden reemplazar después esos valores. Escala tonal 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 y 950. Los valores bajos son más claros y los altos más oscuros. Recomendaciones ## Buenas prácticas con colores 01 ### Cuida el contraste Comprueba que texto y fondo mantengan una relación legible en todos los estados. 02 ### Usa intención semántica Reserva rojos para peligro y verdes para confirmaciones cuando el contexto lo requiera. 03 ### Limita la paleta Selecciona pocas familias por producto para conservar una identidad visual coherente. 04 ### Tematiza tokens Modifica las variables del sistema cuando cambie la marca, no cada componente. --- # Accordion (contenido expandible) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-accordion.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Interacción Organiza bloques extensos en secciones que se pueden abrir y cerrar con controles nativos. v2.0 + ## Mejora progresiva Details y summary funcionan sin JS; el módulo añade la transición. ⇥ ## Teclado nativo Cada encabezado puede activarse desde el teclado. ↕ ## Lectura progresiva Reduce la densidad inicial sin retirar el contenido del documento. i ## Título informativo Cada activador debe describir el contenido que revela. Evita etiquetas genéricas como “Más información”. Código + resultado ## Ejemplo aplicado de Accordion El código mostrado corresponde exactamente al componente renderizado en el panel de resultado. HTML ```html
¿Necesita JavaScript?
No. Utiliza details y summary nativos.
¿Es responsive?
Sí. Su ancho se adapta al contenedor.
¿Acepta utilidades?
Sí. Puedes ajustar spacing, bordes y color con Quickly.
``` Resultado aplicado Accordion · primera sección abierta Componente real ¿Necesita JavaScript? No. Utiliza `details` y `summary` nativos. ¿Es responsive? Sí. Su ancho se adapta al contenedor. ¿Acepta utilidades? Sí. Puedes ajustar spacing, bordes y color con Quickly. Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-accordion | Raíz | Agrupa los elementos desplegables. | | .q-accordion__item | Elemento | Unidad details independiente. | | .q-accordion__trigger | Activador | Summary que abre o cierra el contenido. | | .q-accordion__panel | Panel | Contenido expandible. | | [open] | Estado abierto | Expande el panel y rota el indicador. | | .bc-{token} | Color de acento | Sincroniza el título abierto y su flecha. | | .rounded-12 | Radio opcional | Define el redondeado exterior mediante una utilidad. | Recomendaciones ## Buenas prácticas de Accordion 01 ### No ocultes lo esencial Mantén visible la información necesaria para completar una tarea. 02 ### Orden lógico Conserva una secuencia comprensible incluso con todo cerrado. 03 ### Contenido moderado Evita paneles tan extensos que oculten la siguiente sección. 04 ### Nativo primero No reemplaces details si no necesitas un comportamiento especial. --- # Alert (mensajes contextuales) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-alert.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Estado Comunica información, confirmaciones, advertencias y errores sin interrumpir innecesariamente el flujo. v2.0 i ## Cuatro variantes Información, éxito, advertencia y peligro. ✓ ## Semántica visible El color acompaña un texto claro y nunca actúa como única señal. × ## Dismiss opcional El módulo puede retirar mensajes descartables de la interfaz. i ## Mensaje antes que color Utiliza `role="status"` para información no urgente y `role="alert"` cuando requiera anuncio inmediato. Código + resultado ## Ejemplos aplicados de Alert Selecciona una variante para revisar únicamente su código y el resultado correspondiente. HTML ```html
Actualización disponible

Hay una nueva versión lista para instalar.

``` Resultado aplicado Alert · información Componente real i Actualización disponible Hay una nueva versión lista para instalar. Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. HTML ```html
Cambios guardados

La configuración ya está activa.

``` Resultado aplicado Alert · éxito Componente real ✓ Cambios guardados La configuración ya está activa. Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. HTML ```html
Revisa la configuración

Algunos campos todavía requieren atención.

``` Resultado aplicado Alert · advertencia Componente real ! Revisa la configuración Algunos campos todavía requieren atención. Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. HTML ```html ``` Resultado aplicado Alert · peligro Componente real ! No fue posible guardar Corrige los errores e inténtalo nuevamente. Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-alert | Contenedor | Mensaje contextual base. | | .q-alert--success | Éxito | Confirmación positiva. | | .q-alert--warning | Advertencia | Situación que requiere atención. | | .q-alert--danger | Peligro | Error o acción crítica. | | .q-alert__icon | Icono | Refuerza visualmente el tipo de mensaje. | | .q-alert__close | Cerrar | Control circular para descartar el mensaje. | | role="status" / role="alert" | Semántica | Comunica la prioridad a tecnologías de asistencia. | | data-qy-dismiss | Hook JS | Retira el alert cuando es descartable. | | .bc-{token} | Color de acento | Sincroniza texto, icono, borde y fondo suave. | | .rounded-12 | Radio opcional | Redondea el contenedor del mensaje. | | .rounded-100 | Elementos circulares | Redondea por completo el icono y el botón de cierre. | Recomendaciones ## Buenas prácticas de Alert 01 ### Texto accionable Explica qué ocurrió y, si corresponde, qué hacer a continuación. 02 ### Rol correcto Reserva alert para mensajes urgentes o errores importantes. 03 ### No dependas del color Incluye icono, título o texto que explique el estado. 04 ### Cerrar sólo si aplica No hagas descartable un error que aún requiere solución. --- # Badge (etiquetas breves) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-badge.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Estado Añade estados, categorías o metadatos compactos junto a títulos, filas y controles. v2.0 ● ## Lectura rápida Resume un estado en pocas palabras. ↔ ## Contenido flexible Acepta texto e iconos pequeños sin fijar un ancho. 5 ## Variantes Base, purple, success, warning y danger. i ## Contenido compacto Una insignia complementa el contenido principal; no debe reemplazar títulos, botones ni explicaciones necesarias. Código + resultado ## Ejemplo aplicado de Badge El código mostrado corresponde exactamente al componente renderizado en el panel de resultado. HTML ```html
Información V2 Activo Pendiente Error
``` Resultado aplicado Badge · estados semánticos Componente real Información V2 Activo Pendiente Error Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-badge | Etiqueta base | Presenta información breve. | | .q-badge--purple | Identidad | Variante violeta. | | .q-badge--success | Éxito | Estado positivo. | | .q-badge--warning | Advertencia | Estado pendiente. | | .q-badge--danger | Peligro | Error o estado crítico. | | .display-flex | Layout auxiliar | Distribuye las insignias en una fila flexible. | | .flex-center | Alineación | Centra la colección dentro del área de resultado. | | .g-8 | Separación | Aplica 8px entre insignias. | | .bc-{token} | Color de acento | Sincroniza texto y fondo suave de la etiqueta. | | .rounded-p | Forma de píldora | Aplica el redondeado como utilidad independiente. | Recomendaciones ## Buenas prácticas de Badge 01 ### Una o dos palabras Mantén el contenido breve para conservar su función de etiqueta. 02 ### Estado reconocible Prefiere términos estables como Activo, Pendiente o Error. 03 ### Sin interacción Usa Button cuando el elemento deba ejecutar una acción. 04 ### Contraste legible Comprueba el contraste en fondos distintos al blanco. --- # Breadcrumb (ruta jerárquica) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-breadcrumb.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Orientación Comunica la ubicación de la página dentro de una jerarquía y permite volver a niveles anteriores sin sustituir la navegación principal. v2.0 / ## Jerarquía Hace visible la relación entre niveles. ↩ ## Retorno Los niveles anteriores permanecen enlazados. ● ## Color adaptable La utilidad bc-* personaliza enlaces y separadores. Código + resultado ## Ruta de documentación El último elemento representa la página actual y no necesita enlace. HTML ```html ``` Resultado aplicado Breadcrumb Componente real Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-breadcrumb | Raíz del componente. | Aplicar al nav. | | ol | Lista ordenada de niveles. | Mantiene el orden jerárquico. | | aria-label | Nombre de la navegación. | Usar “Migas de pan” o equivalente. | | aria-current="page" | Identifica la ubicación actual. | Aplicar al último li. | | .bc-{color} | Color del componente. | Personalización opcional. | Recomendaciones ## Buenas prácticas de Breadcrumb 01 ### No reemplaza el título La página mantiene su heading principal. 02 ### Ruta breve Evita incluir niveles que no aportan orientación. 03 ### Actual sin enlace Marca el último nivel con aria-current. --- # Card (tarjetas de contenido) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-card.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Presentación Agrupa información relacionada en una superficie flexible con cabecera, cuerpo, medios y acciones. v2.0 ▭ ## Anatomía flexible Cabecera, cuerpo, medio y pie pueden combinarse según el contenido. ↔ ## Responsive por naturaleza La tarjeta ocupa el ancho disponible y se adapta mediante grid o flex. ◇ ## Estilo neutral Entrega jerarquía sin imponer una identidad visual ajena al proyecto. i ## Composición recomendada Usa `.q-card` como superficie y añade únicamente las regiones que necesites. Las utilidades controlan el layout exterior. Código + resultado ## Ejemplos aplicados de Card Selecciona una composición para revisar únicamente su código y el resultado correspondiente. HTML ```html
Nuevo

Nuevo Core V2

Una arquitectura modular y consistente.

Explorar
``` Resultado aplicado Card · base Componente real Nuevo ## Nuevo Core V2 Una arquitectura modular y consistente. Explorar Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. HTML ```html
Jarrón artesanal con flores

Diseño que inspira

Imagen protagonista y contenido organizado debajo.

Explorar
``` Resultado aplicado Card · vertical Componente real ![Jarrón artesanal con flores](../assets/img/filter-showcase.jpg) ## Diseño que inspira Imagen protagonista y contenido organizado debajo. Explorar Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. HTML ```html
Jarrón artesanal con flores

Composición horizontal

Imagen y contenido comparten el espacio disponible.

Ver detalle
``` Resultado aplicado Card · horizontal Componente real ![Jarrón artesanal con flores](../assets/img/filter-showcase.jpg) ## Composición horizontal Imagen y contenido comparten el espacio disponible. Ver detalle Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. HTML ```html
Jarrón artesanal con flores

Una historia visual

El contenido se integra sobre la imagen completa.

Descubrir
``` Resultado aplicado Card · superpuesta Componente real ![Jarrón artesanal con flores](../assets/img/filter-showcase.jpg) ## Una historia visual El contenido se integra sobre la imagen completa. Descubrir Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-card | Superficie base | Contenedor principal del componente. | | .q-card__media | Medio visual | Imagen adaptable para cualquiera de las composiciones. | | .q-card--horizontal | Composición lateral | Distribuye imagen y contenido en dos columnas y se apila en móvil. | | .q-card__content | Contenido lateral | Agrupa cuerpo y pie en la variante horizontal. | | .q-card--overlay | Composición superpuesta | Usa la imagen como fondo con texto y acciones superpuestos. | | .q-card__header | Cabecera | Meta, etiqueta o información previa. | | .q-card__body | Contenido | Agrupa el contenido principal. | | .q-card__title | Título | Encabezado principal de la tarjeta. | | .q-card__text | Texto | Descripción o contenido complementario. | | .q-card__footer | Pie | Acciones o información secundaria. | | .shadow-box-s | Sombra opcional | Añade elevación mediante una utilidad independiente. | | .q-badge | Etiqueta auxiliar | Identifica el estado o categoría mostrada en la cabecera. | | .btn | Botón base | Activa la anatomía compartida del botón. | | .btn-primary | Acción principal | Destaca la acción prioritaria de la tarjeta. | | .btn-light | Acción sobre imagen | Mantiene el contraste de la acción en la variante superpuesta. | | .btn-fs-04 | Escala | Ajusta el tamaño tipográfico de la acción. | | .bc-{token} | Color de acento | Personaliza el título con un color del framework. | | .rounded-12 | Radio opcional | Redondea la superficie sin acoplar la forma a Card. | | .rounded-p | Badge redondeado | Da forma de píldora a la etiqueta auxiliar. | Recomendaciones ## Buenas prácticas de Card 01 ### Una idea por tarjeta Agrupa contenido relacionado y evita convertirla en una página completa. 02 ### Título claro Haz que el encabezado permita comprender la tarjeta al escanearla. 03 ### Acciones limitadas Prioriza una acción principal y una secundaria como máximo. 04 ### Grid exterior Controla columnas y separaciones con utilidades de Quickly. --- # Carousel (carrusel de contenido) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-carousel.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Interacción Recorre un conjunto pequeño de paneles mediante controles, indicadores y navegación por teclado. v2.0 ← ## Controles explícitos Anterior y siguiente siempre permanecen disponibles. 3 ## Indicadores Comunican cantidad y posición actual. ⌨ ## Teclado Las flechas izquierda y derecha cambian el slide. i ## Manual o automático Sin el atributo de autoplay, el carrusel es manual. Al activarlo, el usuario puede pausarlo y reanudarlo en cualquier momento. Código + resultado ## Ejemplo aplicado de Carousel El código mostrado corresponde exactamente al componente renderizado en el panel de resultado. HTML ```html
01

Slide 1

Arquitectura clara, modular y consistente.

``` Resultado aplicado Carousel · slide activo Componente real 01 ### Slide 1 Arquitectura clara, modular y consistente. 02 ### Slide 2 Construidos únicamente con QuicklyCSS. 03 ### Slide 3 Clases legibles en cada breakpoint. Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-carousel | Raíz | Contenedor navegable. | | .shadow-box-s | Sombra opcional | Eleva el carrusel como superficie independiente. | | .q-carousel__viewport | Ventana | Recorta la secuencia visible. | | .q-carousel__slide | Diapositiva | Elemento individual. | | .q-carousel__media | Medio | Imagen o video de una diapositiva. | | .q-carousel__content | Contenido | Composición textual de la diapositiva. | | .q-carousel__autoplay | Control de reproducción | Posiciona el botón para pausar o reanudar el modo automático. | | .btn-ico | Botón de icono | Mantiene proporciones cuadradas para los símbolos de pausa y reproducción. | | .btn-light | Variante visual | Aplica el tratamiento claro del sistema de botones. | | .btn-fs-02 | Escala tipográfica | Define el tamaño del símbolo del control. | | .rounded-100 | Forma circular | Redondea completamente el control de reproducción. | | .q-carousel__control | Control base | Botón de navegación. | | .shadow-box-xs | Sombra de control | Separa los controles del contenido del slide. | | .q-carousel__control--prev | Anterior | Retrocede una diapositiva. | | .q-carousel__control--next | Siguiente | Avanza una diapositiva. | | .q-carousel__indicators | Indicadores | Agrupa los destinos directos. | | .q-carousel__indicator | Indicador | Selecciona una diapositiva. | | .q-badge | Etiqueta auxiliar | Numera o identifica una diapositiva. | | .q-badge--purple | Etiqueta violeta | Distingue la segunda diapositiva. | | .q-badge--success | Etiqueta positiva | Distingue la tercera diapositiva. | | data-qy-carousel | Hook JS | Inicializa el carrusel. | | data-qy-carousel-autoplay="4000" | Modo automático | Avanza según el intervalo indicado; si se omite, el carrusel es manual. | | data-qy-carousel-toggle | Control de autoplay | Pausa o reanuda la reproducción automática. | | aria-label / title | Ayuda accesible | Anuncia la acción a lectores de pantalla y muestra un tooltip nativo. | | data-qy-carousel-slide | Hook JS | Identifica cada diapositiva. | | data-qy-carousel-prev / next | Hook JS | Conecta los controles anterior y siguiente. | | data-qy-carousel-indicator | Hook JS | Conecta cada indicador. | | .bc-{token} | Color de acento | Personaliza el indicador del slide activo. | | .rounded-16 | Radio del carrusel | Redondea el contenedor mediante una utilidad. | | .rounded-100 | Controles circulares | Redondea completamente los botones anterior, siguiente y pausa. | | .rounded-p | Indicadores | Mantiene los indicadores con extremos redondeados. | Recomendaciones ## Buenas prácticas de Carousel 01 ### Pocos slides Limita el conjunto a contenido realmente relacionado. 02 ### Controles visibles No dependas sólo de gestos o indicadores. 03 ### Autoplay controlable Incluye siempre una acción visible para pausar y reanudar el avance. 04 ### Altura estable Evita saltos de layout entre slides con contenido distinto. --- # Dropdown (menús desplegables) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-dropdown.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Navegación Presenta acciones o destinos secundarios bajo un control compacto usando elementos nativos. v2.0 ⌄ ## Comportamiento nativo Details y summary administran apertura sin JavaScript. ⇥ ## Accesible por teclado El control participa en el orden de foco del documento. ◇ ## Contenido flexible El menú admite enlaces y botones según la acción. i ## Enlaces o botones Usa enlaces para navegación y botones para acciones. No conviertas todos los elementos en enlaces por comodidad. Código + resultado ## Ejemplo aplicado de Dropdown El código mostrado corresponde exactamente al componente renderizado en el panel de resultado. HTML ```html
Opciones
Editar Duplicar
``` Resultado aplicado Dropdown · menú abierto Componente real Opciones EditarDuplicar Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-dropdown | Raíz | Contenedor details del desplegable. | | summary | Activador | Control nativo de apertura y cierre. | | .q-dropdown__menu | Menú | Superficie flotante de opciones. | | .q-dropdown__item | Elemento | Enlace o botón del menú. | | .shadow-box-s | Sombra opcional | Eleva la superficie desplegable. | | .btn | Botón base | Da forma al activador. | | .btn-primary | Variante principal | Destaca el activador del menú. | | .btn-fs-04 | Escala | Ajusta el tamaño tipográfico del activador. | | [open] | Estado abierto | Expone el menú y gira su indicador. | | .bc-{token} | Color de acento | Personaliza el texto de las opciones activas o enfocadas. | | .rounded-12 | Radio del menú | Redondea el panel desplegable. | | .rounded-8 | Radio de opción | Redondea cada elemento interactivo. | Recomendaciones ## Buenas prácticas de Dropdown 01 ### Nombre descriptivo El activador debe anticipar qué opciones contiene. 02 ### Acción correcta Distingue navegación de acciones mediante elementos semánticos. 03 ### No anidar Evita dropdowns dentro de otros dropdowns. 04 ### Espacio suficiente Comprueba que el menú no quede cortado por overflow. --- # Form (controles de formulario) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-form.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Entrada Construye campos legibles con etiquetas, ayuda, validación y estados de foco consistentes. v2.0 Aa ## Etiqueta visible Cada control conserva un nombre persistente. ⌨ ## Foco claro Inputs, selects y textareas comparten un ring accesible. ! ## Error asociado La validación combina estado visual y texto explicativo. i ## Etiqueta siempre visible Placeholder es una ayuda temporal y no reemplaza `.q-label`. Asocia cada label con su control. Código + resultado ## Ejemplo aplicado de Form El código mostrado corresponde exactamente al componente renderizado en el panel de resultado. HTML ```html

Información del proyecto

Configura los datos principales y su visibilidad.

``` Resultado aplicado Form · composición de campos Componente real ### Información del proyecto Configura los datos principales y su visibilidad. Nombre Se mostrará en tu perfil. Correo Recibirás aquí las notificaciones. Mensaje Estado Activo Pendiente Visibilidad Público Privado Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-form | Superficie | Agrupa y presenta el formulario como una unidad visual. | | .q-form__header | Introducción | Separa el contexto de los campos editables. | | .q-form__title | Título | Define el propósito inmediato del formulario. | | .q-form__description | Descripción | Explica brevemente la tarea antes de editar. | | .q-form__actions | Acciones | Alinea las decisiones al final del flujo. | | .q-field | Campo | Agrupa etiqueta, control y ayuda. | | .q-label | Etiqueta | Nombre visible del control. | | .q-input | Entrada | Campo input base. | | .q-select | Selección | Control select base. | | .q-textarea | Texto extenso | Control multilínea. | | .q-field__help | Ayuda | Instrucción complementaria. | | .q-field__error | Error | Mensaje de validación. | | .grid | Layout auxiliar | Activa la cuadrícula del formulario. | | .grid-col-2 | Columnas | Distribuye los campos en dos columnas. | | .grid-col-640-1 | Responsive | Reduce el formulario a una columna. | | .grid-col-span-2 | Extensión | Hace que una sección ocupe ambas columnas. | | .grid-col-span-640-1 | Extensión responsive | Ajusta las secciones al ancho móvil. | | .g-16 | Separación | Aplica 16px entre campos. | | .shadow-box-s | Sombra opcional | Añade elevación mediante una utilidad independiente. | | .btn | Botón base | Clase compartida de la acción. | | .btn-light | Acción secundaria | Presenta la opción de cancelar sin competir con el envío. | | .btn-primary | Acción principal | Destaca el envío del formulario. | | .btn-fs-01 | Escala | Mantiene una acción legible y proporcionada. | | [aria-invalid="true"] | Estado inválido | Comunica y representa errores. | | .bc-{token} | Color de acento | Sincroniza el título y el foco de los controles. | | .rounded-20 | Radio del formulario | Redondea la superficie principal. | | .rounded-12 | Radio de controles | Redondea inputs, selects y textarea. | Recomendaciones ## Buenas prácticas de Form 01 ### Labels reales Conecta cada etiqueta con su control. 02 ### Ayuda antes del error Explica formato o restricciones antes del envío. 03 ### Tipo correcto Usa email, tel, number y demás tipos nativos. 04 ### Errores concretos Indica qué campo falló y cómo corregirlo. --- # Grupo de entrada (campo + acción) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-input-group.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Buscador y acciones Compone un campo con uno o más controles relacionados para búsquedas, filtros, dominios o acciones contextuales. v2.0 ⌕ ## Buscador Une el término con su acción de envío. ↔ ## Continuo Campo y acción comparten un contorno enlazado, sin radios en la unión. ⌨ ## Accesible Admite label visible u oculto y mantiene el orden de teclado. Código + resultado ## Buscador compuesto La etiqueta sigue siendo necesaria aunque visualmente se oculte. HTML ```html
\n \n \n \n
``` Resultado aplicado Grupo de entrada Componente real Buscar proyecto Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-input-group | Contenedor flexible. | Agrupa campos y acciones como una sola unidad visual. | | .q-input | Campo principal con radios izquierdos. | Ocupa el ancho restante y queda recto junto a la acción. | | .q-select | Selector principal alternativo. | Puede reemplazar al input y conserva la misma unión. | | .btn / .btn-ico | Acción con radios derechos. | Mantiene ancho automático y elimina los radios del lado unido. | | .sr-only | Etiqueta sólo para lectores. | Úsala cuando el contexto visual sea suficiente. | Recomendaciones ## Buenas prácticas de Grupo de entrada 01 ### Una intención Agrupa sólo controles que resuelven la misma tarea. 02 ### Label disponible No uses placeholder como único nombre del campo. 03 ### Botón explícito La acción debe indicar Buscar, Aplicar o Añadir. --- # Loading (estados de carga) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-loading.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Estado Comunica esperas indeterminadas mediante spinner, puntos o esqueletos sin alterar el layout final. v2.0 ◌ ## Spinner Indica una espera breve o localizada. ••• ## Puntos Acompañan procesos conversacionales o progresivos. ▰ ## Skeleton Reserva el espacio del contenido mientras carga. i ## Elige según contexto Usa spinner para acciones breves, puntos para actividad continua y skeleton cuando conozcas la forma del contenido final. Código + resultado ## Ejemplos aplicados de Loading Selecciona un patrón para revisar únicamente su código y el resultado correspondiente. HTML ```html
Cargando…
``` Resultado aplicado Loading · spinner Componente real Cargando… Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. HTML ```html
``` Resultado aplicado Loading · puntos Componente real Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. HTML ```html
``` Resultado aplicado Loading · skeleton Componente real Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-loading | Grupo | Alinea indicador y mensaje. | | .q-spinner | Spinner | Indicador circular base. | | .q-spinner--sm | Spinner pequeño | Reduce el indicador. | | .q-spinner--lg | Spinner grande | Aumenta el indicador. | | .q-loading-dots | Puntos | Indicador alternativo de espera. | | .color-* | Color personalizable | Aplica cualquier utilidad de color del framework al contenedor de puntos. | | .q-skeleton | Esqueleto | Marcador de contenido pendiente. | | .q-skeleton--title | Título | Esqueleto con proporción de encabezado. | | .q-skeleton--text | Texto | Esqueleto de línea completa. | | .q-skeleton--text-short | Texto breve | Esqueleto de línea reducida. | | .grid | Layout auxiliar | Organiza los indicadores en columnas. | | .q-card | Superficie auxiliar | Presenta cada tipo de carga como tarjeta. | | .shadow-box-s | Sombra opcional | Eleva la superficie auxiliar sin modificar Card. | | .q-card__body | Contenido auxiliar | Contiene el indicador y su descripción. | | .g-12 | Separación interna | Aplica 12px entre elementos internos. | | .bc-{token} | Color de acento | Sincroniza el spinner y los puntos de carga. | | .rounded-c | Forma circular | Redondea spinner y puntos mediante una utilidad. | | .rounded-8 | Radio del skeleton | Redondea cada bloque de carga. | | .rounded-12 | Superficie auxiliar | Redondea la Card usada por el skeleton. | Recomendaciones ## Buenas prácticas de Loading 01 ### Mensaje accesible Incluye texto visible o aria-label con el estado. 02 ### Evita esperas falsas Retira Loading apenas el contenido esté disponible. 03 ### Reserva espacio Skeleton debe parecerse a la estructura final. 04 ### Reduced motion Las animaciones se detienen si el usuario lo solicita. --- # Modal (diálogos focales) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-modal.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Interacción Presenta decisiones o información contextual que requiere atención antes de volver al contenido principal. v2.0 □ ## Dialog nativo Aprovecha foco modal y backdrop del navegador. × ## Cierre explícito Incluye controles claros en cabecera y pie. ⌘ ## Módulo opcional El JavaScript conecta activadores y cierres mediante atributos. i ## Úsalo con moderación Modal interrumpe el flujo. Resérvalo para decisiones, confirmaciones o tareas breves que necesiten contexto inmediato. Código + resultado ## Ejemplos aplicados de Modal Selecciona una composición para revisar únicamente su código y el resultado correspondiente. HTML ```html

Confirmar acción

Revisa la información antes de continuar.
``` Resultado aplicado Modal · confirmación Componente real ## Confirmar acción Revisa la información antes de continuar. Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. HTML ```html
Jarrón artesanal con flores

Diseño que inspira

Descubre una composición visual con imagen y contenido distribuidos en formato horizontal.
``` Resultado aplicado Modal · imagen lateral Componente real ![Jarrón artesanal con flores](../assets/img/filter-showcase.jpg) ## Diseño que inspira Descubre una composición visual con imagen y contenido distribuidos en formato horizontal. Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-modal | Diálogo | Contenedor dialog principal. | | .q-modal__header | Cabecera | Título y acción de cierre. | | .q-modal__body | Contenido | Información principal del diálogo. | | .q-modal__footer | Acciones | Botones de confirmación y cancelación. | | .q-modal--media | Variante con imagen | Amplía el diálogo para una composición visual horizontal. | | .q-modal__layout | Distribución | Organiza la imagen lateral y el contenido en columnas adaptables. | | .q-modal__media | Imagen | Ocupa el lateral completo y conserva su proporción mediante recorte. | | .q-modal__content | Contenido lateral | Agrupa cabecera, cuerpo y acciones de la variante horizontal. | | .shadow-box-xl | Sombra opcional | Eleva el diálogo mediante una utilidad independiente. | | .btn | Botón base | Clase compartida de las acciones. | | .btn-primary | Acción principal | Confirma la operación. | | .btn-light | Acción secundaria | Cancela o cierra sin destacar. | | .btn-ico | Botón de icono | Control circular de cierre. | | .btn-fs-04 | Escala | Ajusta la escala tipográfica de las acciones. | | .display-flex | Layout auxiliar | Activa el contenedor flexible del ejemplo. | | .flex-center | Alineación | Centra el activador dentro del resultado. | | data-qy-modal-open | Hook JS | Abre el diálogo indicado. | | data-qy-modal-close | Hook JS | Cierra el diálogo contenedor. | | .bc-{token} | Color de acento | Sincroniza el título y el control de cierre. | | .rounded-16 | Radio opcional | Redondea la ventana modal. | | .rounded-100 | Control circular | Redondea completamente el botón de cierre. | Recomendaciones ## Buenas prácticas de Modal 01 ### Título específico Explica qué decisión o tarea contiene el diálogo. 02 ### Cierre disponible Ofrece cancelar o cerrar sin completar la acción. 03 ### Foco inicial Coloca el foco en un control seguro y predecible. 04 ### Una tarea No conviertas el modal en una aplicación dentro de otra. --- # Navbar (navegación principal) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-navbar.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Navegación Organiza identidad, enlaces y acciones principales en una barra adaptable y semántica. v2.0 ⌂ ## Marca visible Separa identidad y navegación sin romper la composición. ↔ ## Layout flexible Distribuye marca, enlaces y acciones mediante flex. ⌘ ## Semántica nativa Parte de nav, listas y enlaces reconocibles por tecnologías de asistencia. i ## Breakpoint seleccionable Sigue el patrón `componente-{breakpoint}-comportamiento`: `.q-navbar-640-collapse`, `.q-navbar-768-collapse`, `.q-navbar-1024-collapse`, `.q-navbar-1280-collapse` o `.q-navbar-1536-collapse`. Para un ancho propio usa `data-qy-navbar-breakpoint`. Código + resultado ## Ejemplo aplicado de Navbar El código mostrado corresponde exactamente al componente renderizado en el panel de resultado. HTML ```html ``` Resultado aplicado Navbar · estructura principal Componente real - Inicio - Sistema Fundamentos Contenedores - Grid - Tipografía - Utilidades - Componentes - Documentación Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-navbar | Contenedor | Barra principal. | | .q-navbar__brand | Marca | Identidad o enlace de inicio. | | .q-navbar__brand-logo | Logotipo | Favicon corporativo dentro del enlace de marca. | | .q-navbar-640-collapse | Breakpoint 640 | Colapsa la navegación hasta 640px. | | .q-navbar-768-collapse | Breakpoint 768 | Colapsa la navegación hasta 768px. | | .q-navbar-1024-collapse | Breakpoint 1024 | Colapsa la navegación hasta 1024px. | | .q-navbar-1280-collapse | Breakpoint 1280 | Colapsa la navegación hasta 1280px. | | .q-navbar-1536-collapse | Breakpoint 1536 | Colapsa la navegación hasta 1536px. | | data-qy-navbar-breakpoint | Breakpoint personalizado | Acepta un ancho numérico en píxeles. | | .q-navbar__collapse-toggle | Control móvil | Abre o colapsa la navegación en pantallas pequeñas. | | .q-navbar__nav | Lista | Agrupa enlaces y acciones. | | .q-navbar__item | Elemento | Contiene un destino o un menú de segundo nivel. | | .q-navbar__link | Enlace | Destino individual. | | .q-navbar__dropdown | Nivel desplegable | Control nativo que contiene el submenú. | | .q-navbar__toggle | Activador | Muestra el indicador y controla el segundo nivel. | | .q-navbar__submenu | Submenú | Agrupa los destinos del segundo nivel. | | .q-navbar__submenu-item | Elemento secundario | Contiene un destino o un tercer nivel. | | .q-navbar__sublink | Enlace secundario | Destino dentro del submenú. | | .q-navbar__submenu-dropdown | Tercer nivel | Control nativo que contiene el nivel anidado. | | .q-navbar__subtoggle | Activador anidado | Controla el tercer nivel y muestra su indicador. | | .q-navbar__submenu--nested | Submenú anidado | Agrupa los destinos del tercer nivel. | | .shadow-box-s | Sombra opcional | Eleva los submenús sobre el contenido. | | .shadow-none-640 | Reset responsive | Retira la sombra cuando el menú se integra al flujo móvil. | | [open] | Estado abierto | Expone el segundo nivel y rota el indicador. | | .is-open | Estado móvil | Expone la navegación principal en pantallas pequeñas. | | data-qy-navbar | Hook JS | Inicializa el comportamiento responsive. | | data-qy-navbar-toggle | Hook JS | Conecta el control de apertura. | | data-qy-navbar-menu | Hook JS | Identifica la lista colapsable. | | [aria-current="page"] | Estado | Marca la página activa. | | .bc-{token} | Color de acento | Personaliza enlaces activos y estados interactivos. | | .rounded-12 | Radio de superficies | Redondea la barra y los paneles de submenú. | | .rounded-8 | Radio interactivo | Redondea enlaces y control de colapso. | Recomendaciones ## Buenas prácticas de Navbar 01 ### Etiqueta nav Añade aria-label cuando existan varias navegaciones. 02 ### Página activa Usa aria-current para comunicar la ubicación actual. 03 ### Pocos destinos Deja los accesos secundarios para menús internos. 04 ### Móvil primero Comprueba orden, salto de línea y área táctil. --- # Offcanvas (fuera de pantalla) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-offcanvas.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Interacción Despliega navegación, filtros o contenido complementario desde un borde sin abandonar la vista actual. v2.0 → ## Entrada lateral El panel aparece desde la derecha o izquierda. □ ## Dialog nativo Conserva backdrop, foco modal y cierre con Escape. ⌘ ## Módulo opcional Los atributos conectan activadores y cierres. i ## Contenido complementario Utiliza Offcanvas para navegación o herramientas secundarias. La tarea principal debe seguir siendo comprensible cuando el panel está cerrado. Código + resultado ## Ejemplo aplicado de Offcanvas El código mostrado corresponde exactamente al componente renderizado en el panel de resultado. HTML ```html

Navegación

Explora la documentación, las utilidades y los componentes disponibles en QuicklyCSS V2.

``` Resultado aplicado Offcanvas · panel lateral Componente real ## Navegación Explora la documentación, las utilidades y los componentes disponibles en QuicklyCSS V2. Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-offcanvas | Panel | Diálogo lateral base. | | .shadow-box-xl | Sombra opcional | Eleva el panel lateral sobre el contenido. | | .q-offcanvas--left | Dirección | Abre el panel desde la izquierda. | | .q-offcanvas__layout | Estructura | Organiza el panel verticalmente. | | .q-offcanvas__header | Cabecera | Título y botón de cierre. | | .q-offcanvas__body | Contenido | Área desplazable principal. | | .q-offcanvas__footer | Pie | Acciones secundarias del panel. | | .btn | Botón base | Clase compartida de los controles. | | .btn-primary | Acción principal | Abre o confirma una acción. | | .btn-light | Acción secundaria | Cierra sin destacar. | | .btn-ico | Botón de icono | Control circular de cierre. | | .btn-fs-04 | Escala | Ajusta el tamaño de las acciones. | | .display-flex | Layout auxiliar | Activa el contenedor flexible del activador. | | .flex-center | Alineación | Centra el activador en el área de resultado. | | data-qy-offcanvas-open | Hook JS | Abre el panel indicado. | | data-qy-offcanvas-close | Hook JS | Cierra el panel contenedor. | | .bc-{token} | Color de acento | Sincroniza el título y el control de cierre. | | .rounded-l-20 | Radio lateral | Redondea el borde interior del panel derecho. | | .rounded-100 | Control circular | Redondea completamente el botón de cierre. | Recomendaciones ## Buenas prácticas de Offcanvas 01 ### Una función clara Dedica cada panel a navegación, filtros o una herramienta concreta. 02 ### Cierre visible Incluye un control de cierre además de Escape y backdrop. 03 ### Título asociado Conecta el diálogo con un encabezado mediante aria-labelledby. 04 ### Móvil primero Comprueba ancho, scroll interior y alcance táctil. --- # Pagination (navegación paginada) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-pagination.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Navegación Permite recorrer conjuntos extensos manteniendo visible la página actual y los controles anterior y siguiente. v2.0 1 ## Estado actual aria-current identifica la página seleccionada. ← ## Límites claros Anterior y siguiente admiten estado deshabilitado. ↔ ## Composición flexible La lista se adapta y puede envolver cuando falta espacio. i ## Contexto accesible Incluye una etiqueta en el elemento `nav` para distinguir la paginación de otras navegaciones. Código + resultado ## Ejemplo aplicado de Pagination El código mostrado corresponde exactamente al componente renderizado en el panel de resultado. HTML ```html ``` Resultado aplicado Pagination · página actual Componente real - ‹ - 1 - 2 - 3 - 4 - › Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-pagination | Lista | Agrupa los controles de página. | | .q-pagination__link | Control | Enlace individual de navegación. | | [aria-current="page"] | Página actual | Marca el destino activo. | | [aria-disabled="true"] | Deshabilitado | Impide una navegación no disponible. | | .bc-{token} | Color de acento | Sincroniza texto, borde y fondo de la página activa. | | .rounded-8 | Radio opcional | Redondea cada enlace de paginación. | Recomendaciones ## Buenas prácticas de Pagination 01 ### Nav etiquetado Usa aria-label para explicar qué colección pagina. 02 ### Página actual Mantén un único aria-current. 03 ### Destino real Cada enlace debe conservar una URL navegable. 04 ### Tamaño táctil Evita controles demasiado pequeños o cercanos. --- # Popover (acciones complementarias) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-popover.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Contenido contextual Presenta información o acciones contextuales mediante la API nativa de popover, con apertura, cierre y capa superior administrados por el navegador. v2.0 ▣ ## Contenido rico Admite texto, enlaces y controles breves. ✓ ## API nativa Popover y popovertarget gestionan el estado. Esc ## Cierre esperado Permite cerrar con Escape o al interactuar fuera. Código + resultado ## Panel de acciones El botón declara el elemento que controla mediante popovertarget. HTML ```html \n
\n Acciones disponibles\n

Duplica, archiva o comparte el proyecto.

\n
``` Resultado aplicado Popover Componente real Acciones disponibles Duplica, archiva o comparte el proyecto. Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-popover | Superficie emergente. | Aplicar al elemento con popover. | | popover | Activa la API nativa. | Atributo del panel. | | popovertarget | Relaciona el botón con el panel. | Su valor coincide con el id. | | .rounded-* | Radio opcional. | Se compone como utilidad externa. | Recomendaciones ## Buenas prácticas de Popover 01 ### Acción contextual No lo uses para procesos largos o críticos. 02 ### Disparador claro El botón debe explicar qué contenido abrirá. 03 ### Contenido breve Mantén el panel compacto y fácil de cerrar. --- # Progress (barra de progreso) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-progress.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Estado Representa el avance cuantificable de una tarea con colores componibles desde la paleta de backgrounds y movimiento configurable. v2.0 72 ## Valor real Expone value y max al navegador y tecnologías de asistencia. ∞ ## Paleta completa Cualquier utilidad bg-{color}-{tone} puede definir el color del avance. → ## Avance animado La barra crece desde cero y reutiliza duración y delay del sistema de motion. i ## Color y movimiento componibles Combina `.q-progress--animated` con cualquier utilidad `.bg-*`. La animación respeta `prefers-reduced-motion`; para una espera indeterminada utiliza Loading. Código + resultado ## Ejemplos aplicados de Progress Selecciona una variante para revisar únicamente su código y el resultado correspondiente. HTML ```html
Publicando proyecto 72%
72%
``` Resultado aplicado Progress · tamaño estándar Componente real Publicando proyecto 72% 72% Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. HTML ```html
Preparando recursos 45%
45%
``` Resultado aplicado Progress · tamaño grande Componente real Preparando recursos 45% 45% Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. HTML ```html
Optimizando estilos 88%
88%
``` Resultado aplicado Progress · tamaño pequeño Componente real Optimizando estilos 88% 88% Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-progress-group | Grupo | Agrupa texto y barra. | | .q-progress__meta | Metadatos | Muestra etiqueta y porcentaje. | | .q-progress | Barra | Estilo base del progress nativo. | | .q-progress--animated | Animación | Hace crecer el avance desde cero respetando reduced motion. | | .q-progress--success | Éxito | Progreso positivo. | | .q-progress--warning | Advertencia | Progreso con atención. | | .q-progress--danger | Peligro | Progreso crítico. | | .q-progress--sm | Tamaño pequeño | Reduce la altura de la barra. | | .q-progress--lg | Tamaño grande | Aumenta la altura de la barra. | | .bg-sky-500 | Color de avance | Toma el color celeste desde la paleta de backgrounds. | | .bg-violet-600 | Color de avance | Toma el color violeta desde la paleta de backgrounds. | | .bg-emerald-500 | Color de avance | Toma el color esmeralda desde la paleta de backgrounds. | | .anim-duration-1000 | Duración | Define un segundo para la animación de avance. | | .anim-delay-150 | Delay | Retrasa 150ms el inicio de la variante grande. | | .anim-delay-300 | Delay | Retrasa 300ms el inicio de la variante pequeña. | | .bc-{token} | Color de acento | Define el color del avance cuando no se utiliza una clase bg-*. | | .rounded-p | Forma de píldora | Redondea la barra mediante una utilidad independiente. | Recomendaciones ## Buenas prácticas de Progress 01 ### Valor honesto Actualiza el porcentaje según progreso real. 02 ### Nombre de tarea Explica qué proceso está avanzando. 03 ### Paleta coherente Usa las mismas clases bg-* que el resto de la interfaz para mantener consistencia. 04 ### Movimiento responsable Respeta reduced motion y usa Loading si el avance real es indeterminado. --- # Table (datos tabulares) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-table.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Datos Presenta relaciones entre filas y columnas dentro de un contenedor desplazable y legible. v2.0 ▦ ## Estructura semántica Conserva table, thead, tbody, th y td. ↔ ## Overflow seguro El wrapper habilita desplazamiento horizontal cuando es necesario. ≋ ## Variante striped Alterna fondos para facilitar el seguimiento de filas. i ## Datos, no layout Utiliza Table sólo cuando la relación entre filas y columnas aporte significado. Para distribuir contenido usa Grid. Código + resultado ## Ejemplo aplicado de Table El código mostrado corresponde exactamente al componente renderizado en el panel de resultado. HTML ```html
Proyecto Responsable Estado
Documentación V2 Equipo Quickly Activo
Componentes Core V2 Nuevo
Accesibilidad Sistema Revisión
``` Resultado aplicado Table · filas alternadas Componente real | Proyecto | Responsable | Estado | | --- | --- | --- | | Documentación V2 | Equipo Quickly | Activo | | Componentes | Core V2 | Nuevo | | Accesibilidad | Sistema | Revisión | Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-table-wrap | Contenedor | Controla borde y desplazamiento horizontal. | | .q-table | Tabla | Estilo base de datos tabulares. | | .q-table--striped | Filas alternadas | Mejora la lectura horizontal. | | .q-badge | Etiqueta auxiliar | Presenta el estado de una fila. | | .q-badge--success | Estado positivo | Identifica registros activos. | | .q-badge--warning | Estado pendiente | Identifica registros que requieren atención. | | th / td | Celdas nativas | Conservan la semántica tabular. | | .bc-{token} | Color de acento | Personaliza el texto de las cabeceras. | | .rounded-12 | Radio del contenedor | Redondea la superficie que recorta la tabla. | | .rounded-p | Estado redondeado | Da forma de píldora a los badges. | Recomendaciones ## Buenas prácticas de Table 01 ### Encabezados claros Describe cada columna con th. 02 ### Orden de lectura Mantén una secuencia lógica de izquierda a derecha. 03 ### Pocas acciones Evita llenar cada fila con controles secundarios. 04 ### Móvil verificable Comprueba overflow y no escondas columnas esenciales. --- # Tabs (paneles relacionados) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-tabs.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Interacción Alterna vistas relacionadas dentro del mismo contexto manteniendo navegación por teclado y estado seleccionado. v2.0 ⇥ ## Teclado incluido Flechas, Home y End cambian la pestaña activa. 1 ## Un panel visible El estado seleccionado sincroniza trigger y contenido. ↔ ## Desplazamiento seguro La lista permite desplazamiento horizontal cuando falta espacio. i ## Contenido relacionado Tabs funciona cuando los paneles son alternativas del mismo contexto. Para pasos secuenciales utiliza otro patrón. Código + resultado ## Ejemplo aplicado de Tabs El código mostrado corresponde exactamente al componente renderizado en el panel de resultado. HTML ```html
Configura la información principal del proyecto.
``` Resultado aplicado Tabs · panel seleccionado Componente real Configura la información principal del proyecto. Conecta únicamente los módulos que utilices. La navegación admite teclado y foco visible. Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-tabs | Raíz | Inicializa el conjunto. | | .q-tabs__list | Lista | Contenedor con role tablist. | | .q-tab | Activador | Selecciona un panel. | | .q-tab-panel | Panel | Contenido asociado a una pestaña. | | .bc-{token} | Color del estado activo | Sincroniza el texto y la línea seleccionada con tokens como primary, success, warning o danger. | | .rounded-12 | Radio opcional | Redondea el módulo completo mediante una utilidad independiente. | | data-qy-tabs | Hook JS | Inicializa el conjunto de pestañas. | | data-qy-tab | Hook JS | Identifica cada activador. | | data-qy-panel | Hook JS | Identifica cada panel. | | aria-selected / aria-controls | Estado accesible | Relaciona activadores y paneles. | Recomendaciones ## Buenas prácticas de Tabs 01 ### Mismo contexto Agrupa sólo contenidos equivalentes o estrechamente relacionados. 02 ### Etiqueta breve Evita nombres largos que saturen la lista. 03 ### IDs únicos Conecta cada tab y panel con aria-controls y aria-labelledby. 04 ### Estado inicial Deja una sola pestaña seleccionada al cargar. --- # Toast (notificaciones breves) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-toast.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Estado Confirma eventos no críticos mediante mensajes compactos que no bloquean la tarea actual. v2.0 ✓ ## No bloquea Acompaña el flujo sin crear un diálogo. × ## Descartable Puede cerrarse de manera explícita. i ## Mensaje breve Combina título y descripción corta. i ## No para errores críticos Si el usuario debe actuar para continuar, utiliza Alert junto al contenido afectado o Modal para una decisión focal. Código + resultado ## Ejemplo aplicado de Toast El código mostrado corresponde exactamente al componente renderizado en el panel de resultado. HTML ```html
Proyecto actualizado

Todos los cambios fueron guardados.

``` Resultado aplicado Toast · confirmación visible Componente real Proyecto actualizado Todos los cambios fueron guardados. Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-toast | Contenedor | Notificación temporal visible. | | .shadow-box-s | Sombra opcional | Separa visualmente la notificación del contenido. | | .bc-{token} | Color de acento | Sincroniza el borde, el título y el control de cierre con un color del framework. | | .q-toast__close | Cerrar | Control circular ubicado en la esquina superior derecha. | | role="status" | Semántica | Anuncia el mensaje sin interrumpir. | | data-qy-dismiss | Hook JS | Retira la notificación. | | .rounded-12 | Radio opcional | Redondea la notificación. | | .rounded-100 | Control circular | Redondea completamente el botón de cierre. | Recomendaciones ## Buenas prácticas de Toast 01 ### Breve y directo Limita el mensaje a una confirmación fácil de escanear. 02 ### No acumular Evita apilar múltiples notificaciones simultáneas. 03 ### Tiempo suficiente No retires contenido antes de poder leerlo. 04 ### Estado persistente Si importa después, refleja el resultado también en la interfaz. --- # Tooltip (descripción contextual) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/component-tooltip.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Componentes · Ayuda breve Explica brevemente un control al recibir hover o foco, sin ocultar información imprescindible para completar la tarea. v2.0 i ## Texto breve Aclara una acción o icono en una frase. ⌨ ## Hover y foco También aparece durante la navegación con teclado. ↗ ## Relacionado aria-describedby conecta el disparador con la ayuda. Código + resultado ## Ayuda accesible El contenido del tooltip complementa el nombre del botón; no lo reemplaza. HTML ```html \n \n Guarda los cambios del proyecto.\n ``` Resultado aplicado Tooltip Componente real Guarda los cambios del proyecto. Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-tooltip-anchor | Contexto de posicionamiento. | Envuelve disparador y tooltip. | | .q-tooltip | Contenido emergente. | Texto breve no interactivo. | | role="tooltip" | Expone el patrón accesible. | Aplicar al mensaje. | | aria-describedby | Relaciona disparador y mensaje. | Debe apuntar al id del tooltip. | Recomendaciones ## Buenas prácticas de Tooltip 01 ### Complementario No escondas instrucciones esenciales dentro del tooltip. 02 ### Breve Usa una frase directa y evita contenido interactivo. 03 ### Foco visible Comprueba que aparezca tanto con mouse como con teclado. --- # Construye interfaces claras y consistentes > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/components.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Sistema de componentes · Quickly V2 Una colección de patrones accesibles que comparte la misma escala, los mismos tokens y la misma lógica de composición del core. Elige una anatomía, añade utilidades y adapta el resultado a cada contexto. v2.0 ◇ ## Anatomía predecible Las clases `.q-*` nombran cada pieza y mantienen una estructura reconocible. ⌁ ## Accesibilidad desde HTML Los controles parten de elementos nativos, foco visible y relaciones ARIA explícitas. ↗ ## Interacción proporcional El módulo JavaScript sólo interviene cuando el comportamiento no puede resolverse con HTML. 16 componentes documentados 4 familias funcionales 1 lenguaje de composición 0 dependencias de interfaz i ## Una regla para toda la colección Las clases de componente entregan la anatomía; las utilidades de Quickly controlan distribución, espacio, color, alineación, estados y responsive. Así cada pieza se adapta sin perder identidad. Del patrón al resultado ## Una misma lógica para los 16 componentes La anatomía aporta significado, las utilidades resuelven la presentación y el comportamiento sólo se añade cuando la interfaz necesita coordinar estados. 01 · Anatomía Componente `.q-card``.q-card__body` Define la responsabilidad y las partes estables. + 02 · Presentación Utilidades `grid g-16 p-24``text-center` Ajustan layout, espacio, color y responsive. + 03 · Si hace falta Comportamiento `data-qy-*``quicklycss_v2_components.js` Sincroniza estados que HTML no resuelve por sí solo. = Resultado Interfaz coherente Legible, accesible y adaptable sin cambiar de lenguaje. CSS Presentación directa para Card, Badge, Progress, Loading y Table. HTML nativo Interacción del navegador para Dropdown y Accordion. JS opcional Estados coordinados para Tabs, Modal, Offcanvas y Carousel. Elige por intención ## Mapa de componentes Empieza por la tarea que debe resolver la interfaz. Cada familia reúne componentes con una responsabilidad concreta. 01 · 4 componentes Presentar y comunicar Superficies, mensajes, etiquetas y navegación principal. Card · Alert · Badge · Navbar → 02 · 5 componentes Mostrar y alternar Opciones, paneles, capas y mensajes temporales. Dropdown · Tabs · Accordion · Modal · Toast → 03 · 3 componentes Capturar y organizar Entrada de datos, lectura tabular y navegación paginada. Form · Table · Pagination → 04 · 4 componentes Orientar el proceso Contenido lateral, progreso, espera y secuencias navegables. Offcanvas · Progress · Loading · Carousel → Familia 01 · Presentar y comunicar ## Fundamentos visuales Cuatro piezas para agrupar contenido, comunicar estados y establecer navegación. Funcionan desde HTML y CSS. 01 ### [Card](component-card.md) `.q-card` Nuevo #### Arquitectura modular Combina estructura y contenido sin estilos externos. [Ver componente](component-card.md) 02 ### [Alert](component-alert.md) `.q-alert` i Cambios guardados La nueva configuración ya está activa. 03 ### [Badge](component-badge.md) `.q-badge` Información Activo Pendiente Error 04 ### [Navbar](component-navbar.md) `.q-navbar` Quickly - Inicio - Sistema - Docs Familia 02 · Mostrar y alternar ## Interacción y capas Patrones para revelar opciones, alternar paneles y mostrar contenido temporal sin perder el contexto ni el control del foco. 05 ### [Dropdown](component-dropdown.md) `.q-dropdown` Abrir opciones EditarDuplicar 06 ### [Tabs](component-tabs.md) `.q-tabs` Configura la información principal del proyecto. Conecta únicamente los módulos que utilices. 07 ### [Accordion](component-accordion.md) `.q-accordion` ¿Necesita JavaScript? No. Utiliza `details` y `summary` nativos. ¿Es responsive? Sí. Su ancho se adapta al contenedor. 08–09 ### [Modal](component-modal.md) + [Toast](component-toast.md) `.q-modal · .q-toast` Proyecto actualizado Todos los cambios fueron guardados. Familia 03 · Capturar y organizar ## Formularios y datos Controles legibles, tablas adaptables y paginación consistente para recorrer información estructurada. 10 ### [Form](component-form.md) `.q-field · .q-input` Nombre Se mostrará en tu perfil. Correo 11 ### [Table](component-table.md) `.q-table` | Proyecto | Estado | | --- | --- | | Documentación V2 | Activo | | Componentes | Nuevo | 12 ### [Pagination](component-pagination.md) `.q-pagination` - ‹ - 1 - 2 - 3 - › Familia 04 · Orientar el proceso ## Navegación y estado Patrones para abrir contenido complementario, comunicar avance, representar espera y recorrer una secuencia. 13 ### [Offcanvas](component-offcanvas.md) `.q-offcanvas` ## Menú lateral Contenido fuera de pantalla construido con Quickly V2. 14 ### [Progress](component-progress.md) `.q-progress` Publicando proyecto 72% 72% 15 ### [Loading](component-loading.md) `.q-spinner · .q-skeleton` Cargando… 16 ### [Carousel](component-carousel.md) `.q-carousel` 01 ### Slide 1 02 ### Slide 2 --- # Containers (fluido y porcentual) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/containers.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Estructura · containers.css El sistema de containers define el marco donde vive tu interfaz: centraliza el contenido, limita el ancho y mantiene una lectura consistente entre pantallas. v2.0 ▣ ## Ancho estándar Define un patrón de ancho compartido y evita valores aislados en cada vista. ◇ ## Diseño consistente Controla la longitud de línea y conserva una composición uniforme. ▦ ## Overrides por breakpoint Ajusta el porcentaje con las variantes incluidas en QuicklyCSS. i ## Problema que resuelve Sin containers, cada sección termina “inventando” su ancho con wrappers distintos, ajustes manuales y CSS duplicado. QuicklyCSS concentra esa decisión en clases reutilizables para obtener layouts previsibles. ✦ ## Convención real de clases Usa `.qy-cont`, `.qy-cont-fluid`, las escalas `.qy-cont-5` a `.qy-cont-10` y variantes como `.qy-cont-768-8`. Los breakpoints trabajan con `max-width`. Código + resultado ## Ejemplos reales de containers Selecciona una clase para comparar su marcado y el ancho que produce. HTML Resultado aplicado 100% viewport 100% .qy-cont funciona como alias base y puede combinarse con variantes por breakpoint. ```html
Contenedor base Alias semántico al 100% que estandariza el uso del sistema.
``` .qy-cont-fluid conserva width: 100% y max-width: 100%. ```html
Contenedor fluido Ocupa el ancho completo disponible y es útil para fondos o bandas.
``` .qy-cont-8 aplica max-width: 80%. Las escalas disponibles van de 5 a 10. ```html
Contenedor porcentual · 80% Limita el contenido al 80% y lo centra con margin-inline: auto.
``` .qy-cont-768-10 se activa con @media (max-width: 768px). Cambia el tamaño de la ventana para probarlo. ```html
Base 80% · móvil 100% Desde 768px hacia abajo, el override amplía el contenedor al 100%.
``` Referencia ## Clases de containers Todas parten de `width: 100%`, centrado con `margin-inline: auto` y un `max-width` porcentual. | Clase | Breakpoint | Max-width | Uso recomendado | | --- | --- | --- | --- | | .qy-cont | Base | 100% | Alias semántico del contenedor base. | | .qy-cont-fluid | Base | 100% | Bandas y secciones que ocupan todo el ancho. | | .qy-cont-10 | Base | 100% | Punto de partida para composiciones responsivas. | | .qy-cont-9 | Base | 90% | Wrapper general con margen lateral visible. | | .qy-cont-8 | Base | 80% | Contenido editorial y layouts centrados. | | .qy-cont-7 | Base | 70% | Landings y contenido focalizado. | | .qy-cont-6 | Base | 60% | Lectura prolongada y formularios. | | .qy-cont-5 | Base | 50% | Bloques destacados de ancho reducido. | | .qy-cont-[bp]-[n] | 640–6016px | 50%–100% | Patrón para ajustar la escala en un breakpoint. | | .qy-cont-640-[n] | ≤ 640px | 50%–100% | Primer ajuste para pantallas pequeñas. | | .qy-cont-768-[n] | ≤ 768px | 50%–100% | Ajuste para tablet y móvil amplio. | | .qy-cont-1024-[n] | ≤ 1024px | 50%–100% | Transición hacia desktop. | | .qy-cont-1280-[n] | ≤ 1280px | 50%–100% | Desktop estándar. | | .qy-cont-1536-[n] | ≤ 1536px | 50%–100% | Pantallas grandes. | | .qy-cont-2560-[n] | ≤ 2560px | 50%–100% | Resoluciones 2K. | | .qy-cont-3840-[n] | ≤ 3840px | 50%–100% | Resoluciones 4K. | | .qy-cont-6016-[n] | ≤ 6016px | 50%–100% | Pantallas de gran formato. | Regla del sistema n = 5…10 → 50%…100%. El breakpoint determina cuándo se aplica el ancho; la escala determina cuánto ocupa. Recomendaciones ## Buenas prácticas con containers 01 ### Define un patrón base Repite una combinación estable, por ejemplo `.qy-cont-8 .qy-cont-768-10`. 02 ### Piensa con max-width Las variantes se activan cuando el viewport es igual o menor al breakpoint. 03 ### Separa ancho y layout Usa containers para el ancho exterior y grid o flex para la composición interna. 04 ### Limita la profundidad Dos o tres niveles —sección, wrapper y contenido— suelen ser suficientes. --- # Display (flujo y visibilidad) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/display.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Estructura · display.css Controla cómo participa cada elemento en el flujo del documento: bloque, línea, flex, grid, tabla, ocultamiento y utilidades accesibles. v2.0 ▤ ## Flujo explícito Declara block, inline, flex, grid o table sin escribir CSS adicional. ⌘ ## Composición preparada Activa el contexto correcto antes de aplicar los módulos de grid o flex. ◉ ## Accesibilidad Incluye helpers para contenido visualmente oculto que sigue siendo accesible. i ## Problema que resuelve Evita repetir declaraciones de `display` y `visibility` en componentes. Las utilidades hacen explícito el comportamiento estructural directamente en el marcado. ✦ ## Convención real de clases Usa clases como `.display-block`, `.display-flex`, `.display-grid`, `.display-none`, `.visible`, `.invisible` y `.sr-only`. Código + resultado ## Ejemplos reales de display Selecciona una utilidad para comparar el marcado con su resultado aplicado. HTML Resultado aplicado display: block viewport comportamiento real .display-block aplica display: block !important. ```html
Elemento de bloque Ocupa el ancho disponible y comienza en una línea nueva.
``` .display-flex activa display: flex. La dirección y alineación pertenecen a sus módulos específicos. ```html
Contenedor flex Activa un contexto flexible para organizar sus elementos hijos.
``` .display-grid sólo activa el display. Las columnas se controlan desde grid-col.css. ```html
Contenedor grid Activa el contexto grid para combinarlo con las clases grid-col-* del framework.
``` El resultado queda vacío porque .display-none retira completamente el elemento del flujo. ```html ``` Referencia ## Clases de display La tabla refleja las utilidades disponibles actualmente en `PRODUCCION/src/css/estructura/display.css`. | Clase | Propiedad | Valor | Uso recomendado | | --- | --- | --- | --- | | .display-none | display | none | Retira el elemento y su espacio del layout. | | .display-block | display | block | Elemento de bloque a ancho disponible. | | .display-inline | display | inline | Contenido dentro del flujo de texto. | | .display-inline-block | display | inline-block | Dimensiones de bloque dentro del flujo inline. | | .display-flow-root | display | flow-root | Crea un nuevo contexto de formato de bloque. | | .display-flex | display | flex | Activa un contenedor flexible. | | .display-inline-flex | display | inline-flex | Flex que participa como elemento inline. | | .display-grid | display | grid | Activa un contenedor grid. | | .display-inline-grid | display | inline-grid | Grid que participa como elemento inline. | | .display-table | display | table | Comportamiento visual de tabla. | | .display-table-row | display | table-row | Comportamiento visual de fila. | | .display-table-cell | display | table-cell | Comportamiento visual de celda. | | .display-contents | display | contents | El wrapper no genera caja propia. | | .visible | visibility | visible | Hace visible el elemento. | | .invisible | visibility | hidden | Oculta conservando el espacio. | | .visible-collapse | visibility | collapse | Colapsa filas o celdas de tabla. | | .sr-only | helper | visualmente oculto | Contenido exclusivo para lectores de pantalla. | | .sr-only-focusable | helper | visible al enfocar | Enlaces de salto y controles accesibles. | Regla del sistema Display define la participación en el layout. Grid, flex, separación y alineación se completan con los módulos correspondientes. Recomendaciones ## Buenas prácticas con display 01 ### Usa HTML semántico La utilidad cambia la presentación, no el significado del elemento. 02 ### Combina módulos Activa grid o flex aquí y configura su estructura con el módulo especializado. 03 ### Distingue ocultamiento `display-none` elimina el espacio; `invisible` lo conserva. 04 ### Protege accesibilidad Usa `sr-only` cuando el contenido aún deba anunciarse. --- # Filter (filtros combinables) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/filter.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Efectos visuales Ajusta desenfoque, luz, contraste y color mediante ocho familias independientes que pueden aplicarse solas o combinarse. v2.0 8 ## Ocho familias Blur, brightness, contrast, grayscale, hue rotate, invert, saturate y sepia. + ## Composición real Las variables `--qy-filter-*` conservan cada efecto sin sobrescribir los demás. 0 ## Reset directo `.filter-none` elimina toda la composición de filtros del elemento. i ## El filtro modifica la superficie completa Se aplica al elemento ya renderizado: fondo, bordes, texto e hijos se procesan como una sola imagen. No cambia el layout ni las dimensiones. Código + resultado ## Compara cada tipo de filtro Cambia de pestaña para aplicar otra familia sobre la misma superficie y distinguir claramente su efecto. HTML Resultado aplicado Blur · 8px Misma superficie de referencia FILTER QuicklyCSS .blur-8 aplica un desenfoque de 8px a toda la superficie. ```html
Superficie con filtro
``` .brightness-150 aumenta la luminosidad al 150% del valor original. ```html
Superficie con filtro
``` .contrast-150 intensifica la diferencia entre las zonas claras y oscuras. ```html
Superficie con filtro
``` .grayscale-100 elimina completamente el color. ```html
Superficie con filtro
``` .hue-rotate-90 desplaza todos los matices 90 grados en la rueda cromática. ```html
Superficie con filtro
``` .invert-100 invierte completamente luces y colores. ```html
Superficie con filtro
``` .saturate-200 duplica la intensidad del color. ```html
Superficie con filtro
``` .sepia-100 aplica por completo el tono sepia. ```html
Superficie con filtro
``` Las variables permiten combinar matiz, saturación y brillo sin que una clase anule las demás. ```html
Superficie con filtro
``` Escalas completas ## Todos los valores disponibles Selecciona una familia para comparar visualmente cada clase incluida en `filter.css`. ¿Necesitas suavizar? Usa `.blur-*` ¿Ajustar luz? Usa `.brightness-*` o `.contrast-*` ¿Modificar color? Usa grayscale, hue, saturate o sepia ¿Invertir por completo? Usa `.invert-100` Blur ### `.blur-*` blur() Desenfoca toda la superficie. Los valores representan píxeles. Q `.blur-0` 0px Q `.blur-1` 1px Q `.blur-2` 2px Q `.blur-4` 4px Q `.blur-8` 8px Q `.blur-12` 12px Q `.blur-16` 16px Q `.blur-24` 24px Brightness ### `.brightness-*` brightness() Reduce o aumenta la luminosidad respecto del aspecto original. Q `.brightness-0` 0% Q `.brightness-50` 50% Q `.brightness-75` 75% Q `.brightness-90` 90% Q `.brightness-100` 100% Q `.brightness-110` 110% Q `.brightness-125` 125% Q `.brightness-150` 150% Q `.brightness-200` 200% Contrast ### `.contrast-*` contrast() Acerca o separa las zonas claras y oscuras de la superficie. Q `.contrast-0` 0% Q `.contrast-50` 50% Q `.contrast-75` 75% Q `.contrast-90` 90% Q `.contrast-100` 100% Q `.contrast-110` 110% Q `.contrast-125` 125% Q `.contrast-150` 150% Q `.contrast-200` 200% Grayscale ### `.grayscale-*` grayscale() Retira progresivamente la información de color. Q `.grayscale-0` 0% Q `.grayscale-50` 50% Q `.grayscale-100` 100% Hue rotate ### `.hue-rotate-*` hue-rotate() Gira todos los matices sobre la rueda cromática. Q `.hue-rotate-0` 0° Q `.hue-rotate-30` 30° Q `.hue-rotate-60` 60° Q `.hue-rotate-90` 90° Q `.hue-rotate-180` 180° Q `.hue-rotate-270` 270° Invert ### `.invert-*` invert() Intercambia los valores claros y oscuros, junto con sus colores opuestos. Q `.invert-0` 0% Q `.invert-100` 100% Saturate ### `.saturate-*` saturate() Reduce o intensifica la fuerza de los colores. Q `.saturate-0` 0% Q `.saturate-50` 50% Q `.saturate-100` 100% Q `.saturate-150` 150% Q `.saturate-200` 200% Sepia ### `.sepia-*` sepia() Transforma los colores hacia una tonalidad cálida y envejecida. Q `.sepia-0` 0% Q `.sepia-50` 50% Q `.sepia-100` 100% Q RESET ### `.filter-none` Elimina la propiedad `filter` completa, incluso cuando el elemento también contiene clases de las ocho familias. Composición ## Combina efectos sin perder los anteriores Cada clase modifica únicamente su variable; la regla común reconstruye la propiedad `filter` completa. 01 Gira el matiz `.hue-rotate-90` + 02 Intensifica el color `.saturate-200` + 03 Aumenta la luz `.brightness-110` HTML resultante ```html
Superficie combinada
``` El orden de estas clases en el atributo no elimina ninguna variable. RESULTADO APLICADO Q `3 filtros activos` Referencia ## Clases disponibles La tabla coincide con todas las utilidades incluidas actualmente en `filter.css`. | Familia | Valores | Unidad | Estado original | | --- | --- | --- | --- | | .blur-{valor} | 0, 1, 2, 4, 8, 12, 16, 24 | px | .blur-0 | | .brightness-{valor} | 0, 50, 75, 90, 100, 110, 125, 150, 200 | % | .brightness-100 | | .contrast-{valor} | 0, 50, 75, 90, 100, 110, 125, 150, 200 | % | .contrast-100 | | .grayscale-{valor} | 0, 50, 100 | % | .grayscale-0 | | .hue-rotate-{valor} | 0, 30, 60, 90, 180, 270 | ° | .hue-rotate-0 | | .invert-{valor} | 0, 100 | % | .invert-0 | | .saturate-{valor} | 0, 50, 100, 150, 200 | % | .saturate-100 | | .sepia-{valor} | 0, 50, 100 | % | .sepia-0 | | .filter-none | none | — | Elimina todos los filtros. | Recomendaciones ## Buenas prácticas para filtros 01 ### Conserva legibilidad Comprueba el contraste del texto después de aplicar brillo, contraste o inversión. 02 ### Modera el desenfoque Valores altos de blur pueden ocultar información y aumentar el área de renderizado. 03 ### Combina con intención Usa pocas familias simultáneas para que el resultado continúe siendo predecible. 04 ### Restablece con none Utiliza `.filter-none` cuando necesites eliminar toda la composición. --- # Flex col span (12 columnas) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/flex-col-span.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Estructura · flex-col-span.css Distribuye elementos flex en una retícula de 12 columnas. Cada clase define cuánto ancho ocupa un item y permite sobrescribirlo en los breakpoints reales de QuicklyCSS. v2.0 ▥ ## Retícula de 12 Convierte cada span en una fracción predecible del ancho disponible. ↔ ## Base flexible Define simultáneamente `flex-basis` y `max-width`. ▦ ## Overrides por breakpoint Cambia la fracción desde 640 hasta 6016 píxeles mediante `max-width`. i ## Problema que resuelve Evita calcular porcentajes manualmente para cada columna flex. Las clases expresan directamente cuántas partes de una retícula de doce debe ocupar cada item. ✦ ## Convención real de clases Usa `.flex-span-{n}` para la base y `.flex-span-{breakpoint}-{n}` para los overrides. El valor `n` va de 1 a 12. Código + resultado ## Ejemplos reales de flex span Compara el código con el porcentaje que ocupa cada item dentro de un contenedor flex. HTML Resultado aplicado 25% contenedor flex 12 columnas .flex-span-3 aplica flex: 0 0 25% y max-width: 25%. ```html
3 de 12 columnas Este item ocupa el 25% del contenedor flex.
``` .flex-span-6 aplica flex: 0 0 50% y max-width: 50%. ```html
6 de 12 columnas Este item ocupa el 50% del contenedor flex.
``` .flex-span-9 aplica flex: 0 0 75% y max-width: 75%. ```html
9 de 12 columnas Este item ocupa el 75% del contenedor flex.
``` Combina .flex-span-6 con .flex-span-768-12 para ampliar el item en tablet y móvil. ```html
6 columnas → 12 columnas Ocupa el 50% como base y el 100% cuando el viewport es igual o menor a 768px.
``` Referencia ## Clases flex-span Cada unidad equivale a `100% / 12`. Las variantes por breakpoint conservan la misma escala. | Clase | Columnas | Ancho | Uso recomendado | | --- | --- | --- | --- | | .flex-span-1 | 1/12 | 8.333333% | Indicadores o elementos mínimos. | | .flex-span-2 | 2/12 | 16.666667% | Controles compactos. | | .flex-span-3 | 3/12 | 25% | Cuatro columnas por fila. | | .flex-span-4 | 4/12 | 33.333333% | Tres columnas por fila. | | .flex-span-5 | 5/12 | 41.666667% | Composiciones asimétricas. | | .flex-span-6 | 6/12 | 50% | Dos columnas iguales. | | .flex-span-7 | 7/12 | 58.333333% | Contenido principal asimétrico. | | .flex-span-8 | 8/12 | 66.666667% | Contenido principal con sidebar. | | .flex-span-9 | 9/12 | 75% | Contenido amplio con lateral estrecho. | | .flex-span-10 | 10/12 | 83.333333% | Contenido casi completo. | | .flex-span-11 | 11/12 | 91.666667% | Margen estructural mínimo. | | .flex-span-12 | 12/12 | 100% | Fila completa. | | .flex-span-640-[n] | 1–12 | 8.33%–100% | Override para ≤640px. | | .flex-span-768-[n] | 1–12 | 8.33%–100% | Override para ≤768px. | | .flex-span-1024-[n] | 1–12 | 8.33%–100% | Override para ≤1024px. | | .flex-span-1280-[n] | 1–12 | 8.33%–100% | Override para ≤1280px. | | .flex-span-1536-[n] | 1–12 | 8.33%–100% | Override para ≤1536px. | | .flex-span-2560-[n] | 1–12 | 8.33%–100% | Override para ≤2560px. | | .flex-span-3840-[n] | 1–12 | 8.33%–100% | Override para ≤3840px. | | .flex-span-6016-[n] | 1–12 | 8.33%–100% | Override para ≤6016px. | Regla del sistema El padre debe ser flex. Cada item recibe una fracción de doce y los breakpoints redefinen esa fracción con max-width. Recomendaciones ## Buenas prácticas con flex span 01 ### Activa flex en el padre Las clases span están diseñadas para items dentro de un contenedor flex. 02 ### Suma doce En filas completas, procura que las fracciones principales sumen doce columnas. 03 ### Define pocos overrides Una base y uno o dos breakpoints suelen cubrir el comportamiento necesario. 04 ### Controla el espacio aparte Usa el módulo gap para separar items sin alterar sus porcentajes. --- # Flex col (columnas flexibles) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/flex-col.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Estructura · flex-col.css Define cuántas columnas tiene un contenedor flex. QuicklyCSS reparte automáticamente sus hijos directos en fracciones iguales y permite cambiar la cantidad por breakpoint. v2.0 ▥ ## Columnas iguales Reparte el ancho entre uno y doce hijos por fila. ↩ ## Flex con wrap `.flex` activa flexbox y permite que los items cambien de fila. ▦ ## Responsive real Modifica el número de columnas usando breakpoints basados en `max-width`. i ## Problema que resuelve Evita asignar manualmente porcentajes a cada hijo. El contenedor declara el número de columnas y todos sus elementos directos reciben la fracción correspondiente. ✦ ## Convención real de clases Combina `.flex` o `.flex-inline` con `.flex-col-{n}`. Para adaptar el layout usa `.flex-col-{breakpoint}-{n}`. Código + resultado ## Ejemplos reales de flex col Observa cómo el contenedor distribuye sus hijos directos en columnas iguales. HTML Resultado aplicado 2 columnas contenedor flex hijos directos .flex-col-2 asigna el 50% a cada hijo directo. ```html
Columna 1 Columna 2
``` .flex-col-3 asigna un tercio del ancho a cada hijo directo. El espacio restante corresponde a la tercera columna disponible. ```html
Columna 1 Columna 2
``` .flex-col-4 asigna el 25% a cada hijo directo. El contenedor admite cuatro items por fila. ```html
Columna 1 Columna 2
``` .flex-auto-fit permite que cada hijo crezca, se reduzca y parta de una base de 200px. ```html
Item fluido 1 Item fluido 2
``` En la implementación actual, .flex-auto-fill comparte el mismo comportamiento flex: 1 1 200px de .flex-auto-fit. ```html
Item automático 1 Item automático 2
``` La composición cambia de cuatro columnas a una cuando el viewport es igual o menor a 768px. ```html
Columna 1 Columna 2
``` Referencia ## Clases flex-col Las clases se aplican al contenedor y dimensionan todos sus hijos directos. | Clase | Columnas | Ancho por hijo | Uso recomendado | | --- | --- | --- | --- | | .flex | — | — | Activa flex con wrap. | | .flex-inline | — | — | Activa inline-flex con wrap. | | .flex-auto-fit | Automáticas | Mínimo 200px | Items fluidos que ocupan el espacio disponible. | | .flex-auto-fill | Automáticas | Mínimo 200px | Reserva tracks automáticos incluso sin contenido. | | .flex-col-1 | 1 | 100% | Una columna por fila. | | .flex-col-2 | 2 | 50% | Dos columnas iguales. | | .flex-col-3 | 3 | 33.333333% | Tres columnas iguales. | | .flex-col-4 | 4 | 25% | Cuatro columnas iguales. | | .flex-col-5 | 5 | 20% | Cinco columnas compactas. | | .flex-col-6 | 6 | 16.666667% | Seis columnas compactas. | | .flex-col-7 | 7 | 14.285714% | Siete divisiones iguales. | | .flex-col-8 | 8 | 12.5% | Ocho divisiones iguales. | | .flex-col-9 | 9 | 11.111111% | Nueve divisiones iguales. | | .flex-col-10 | 10 | 10% | Diez divisiones iguales. | | .flex-col-11 | 11 | 9.090909% | Once divisiones iguales. | | .flex-col-12 | 12 | 8.333333% | Retícula de doce columnas. | | .flex-col-640-[n] | 1–12 | 100% / n | Override para ≤640px. | | .flex-col-768-[n] | 1–12 | 100% / n | Override para ≤768px. | | .flex-col-1024-[n] | 1–12 | 100% / n | Override para ≤1024px. | | .flex-col-1280-[n] | 1–12 | 100% / n | Override para ≤1280px. | | .flex-col-1536-[n] | 1–12 | 100% / n | Override para ≤1536px. | | .flex-col-2560-[n] | 1–12 | 100% / n | Override para ≤2560px. | | .flex-col-3840-[n] | 1–12 | 100% / n | Override para ≤3840px. | | .flex-col-6016-[n] | 1–12 | 100% / n | Override para ≤6016px. | Regla del sistema El número de columnas vive en el contenedor. Los hijos directos reciben flex-basis y max-width calculados como 100% / n. Recomendaciones ## Buenas prácticas con flex col 01 ### Configura el padre Coloca `.flex` y `.flex-col-n` en el mismo contenedor. 02 ### Usa hijos directos La regla sólo dimensiona el primer nivel de elementos descendientes. 03 ### Reduce columnas en móvil Usa uno o dos overrides para conservar la legibilidad. 04 ### Separa con gap Combina el layout con utilidades de separación sin cambiar su estructura. --- # Gap (separación entre elementos) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/gap.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Espaciado Controla el espacio entre hijos de un contenedor flex o grid sin añadir márgenes individuales a cada elemento. v2.0 ↔ ## Tres direcciones `.g-*` controla ambos ejes, `.gx-*` columnas y `.gy-*` filas. 11 ## Escala compartida Once valores desde 0px hasta 96px mantienen el ritmo espacial del sistema. 8 ## Ocho breakpoints Las tres familias admiten variantes desde 640px hasta 6016px. i ## El contenedor define el contexto `gap` sólo separa hijos directos. Activa primero un layout con `.display-flex`, `.grid` o `.display-grid`. Código + resultado ## Compara los tres ejes de separación El mismo grupo de elementos permite distinguir cuándo cambia toda la cuadrícula, sólo las columnas o sólo las filas. HTML Resultado aplicado Ambos ejes · 16px Separación real A B C D E F .g-16 aplica 16px tanto entre columnas como entre filas. ```html
ABC DEF
``` .gx-32 modifica column-gap; las filas permanecen sin separación adicional. ```html
ABC DEF
``` .gy-32 modifica row-gap; las columnas permanecen sin separación adicional. ```html
ABC DEF
``` La clase base se aplica siempre; .g-1024-32 la reemplaza cuando el viewport alcanza 1024px. ```html
ABC DEF
``` Mapa del sistema ## Elige la familia según el eje Las tres familias comparten la misma escala; sólo cambia la propiedad CSS que controlan. `.g-{valor}` Dos ejes ### Separación general Aplica `gap`. Es la opción habitual cuando filas y columnas usan la misma distancia. Ejemplo: `.g-24` `.gx-{valor}` Eje horizontal ### Separación entre columnas Aplica `column-gap`. Úsala cuando el ritmo horizontal difiere del vertical. Ejemplo: `.gx-24` `.gy-{valor}` Eje vertical ### Separación entre filas Aplica `row-gap`. Es útil en listas, formularios y grupos apilados. Ejemplo: `.gy-24` Escala ## Once valores disponibles Cada muestra aplica la clase real `.g-{valor}`. La distancia violeta representa el espacio que queda entre ambos elementos. `.g-0` 0px `.g-4` 4px `.g-8` 8px `.g-12` 12px `.g-16` 16px `.g-24` 24px `.g-32` 32px `.g-40` 40px `.g-48` 48px `.g-64` 64px `.g-96` 96px Reset `.g-none` elimina el espacio en ambos ejes. `.g-0`, `.gx-0` y `.gy-0` expresan el mismo valor dentro de cada familia. Variantes responsivas ## Ocho puntos de activación Inserta el breakpoint entre la familia y el valor: `.g-1024-32`, `.gx-1280-24` o `.gy-768-16`. `640` min-width .g-640-32 `768` min-width .g-768-32 `1024` min-width .g-1024-32 `1280` min-width .g-1280-32 `1536` min-width .g-1536-32 `2560` min-width .g-2560-32 `3840` min-width .g-3840-32 `6016` min-width .g-6016-32 HTML ```html
Contenido
Contenido
``` El contenedor comienza con 8px, pasa a 16px desde 768px y a 32px desde 1280px. Referencia ## Clases disponibles Todas las familias de clases aceptan los valores 0, 4, 8, 12, 16, 24, 32, 40, 48, 64 y 96. | Clases | Propiedad | Qué separa | Ejemplo | | --- | --- | --- | --- | | .g-{valor} | gap | Filas y columnas. | .g-16 | | .gx-{valor} | column-gap | Columnas, eje horizontal. | .gx-24 | | .gy-{valor} | row-gap | Filas, eje vertical. | .gy-32 | | .g-none | gap: 0 | Elimina toda separación. | .g-none | | .g-{bp}-{valor} | gap | Ambos ejes desde el breakpoint. | .g-1024-32 | | .gx-{bp}-{valor} | column-gap | Columnas desde el breakpoint. | .gx-1280-24 | | .gy-{bp}-{valor} | row-gap | Filas desde el breakpoint. | .gy-768-16 | Responsive Las variantes existen para ocho breakpoints: 640, 768, 1024, 1280, 1536, 2560, 3840 y 6016. Recomendaciones ## Buenas prácticas de espaciado 01 ### Gap para relaciones Usa gap entre elementos hermanos; reserva margin para separar un componente de su entorno. 02 ### Base antes de responsive Define primero el espacio móvil y añade sólo los cambios necesarios por breakpoint. 03 ### Un eje cuando corresponda Usa `.gx-*` o `.gy-*` sólo si los ejes realmente necesitan ritmos distintos. 04 ### Escala del sistema Elige el valor más cercano de la escala en lugar de introducir separaciones arbitrarias. --- # Grid col span (ocupación de columnas) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/grid-col-span.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Estructura · grid-col-span.css Controla cuántas columnas ocupa un item dentro de un grid. El sistema ofrece spans de 1 a 12 y variantes para todos los breakpoints de QuicklyCSS. v2.0 ▥ ## Spans de 1 a 12 Expresa la ocupación del item directamente en columnas. ↔ ## Items independientes Cada hijo puede ocupar una cantidad distinta dentro del mismo grid. ▦ ## Overrides adaptables Modifica el span en resoluciones específicas mediante `max-width`. i ## Problema que resuelve Permite crear composiciones asimétricas sin escribir reglas de `grid-column` para cada componente o breakpoint. ✦ ## Convención real de clases Usa `.grid-col-span-{n}` para la base y `.grid-col-span-{breakpoint}-{n}` para cambiar la ocupación. El padre debe ser un grid con columnas definidas. Código + resultado ## Ejemplos reales de grid col span Los resultados se renderizan dentro de un grid real de doce columnas. HTML Resultado aplicado 3 de 12 grid padre 12 columnas .grid-col-span-3 aplica grid-column: span 3 dentro de un grid de doce columnas. ```html
Span de 3 columnas Este item ocupa el 25% del grid padre.
``` .grid-col-span-6 aplica grid-column: span 6 dentro de un grid de doce columnas. ```html
Span de 6 columnas Este item ocupa el 50% del grid padre.
``` .grid-col-span-9 aplica grid-column: span 9 dentro de un grid de doce columnas. ```html
Span de 9 columnas Este item ocupa el 75% del grid padre.
``` Combina .grid-col-span-6 con .grid-col-span-768-12 para ampliar el item en tablet y móvil. ```html
6 columnas → 12 columnas Ocupa la mitad como base y todo el grid cuando el viewport es igual o menor a 768px.
``` Referencia ## Clases grid-col-span La escala indica cuántas columnas consecutivas ocupa el item dentro del grid. | Clase | Span | En grid de 12 | Uso recomendado | | --- | --- | --- | --- | | .grid-col-span-1 | 1 | 8.333333% | Elemento mínimo. | | .grid-col-span-2 | 2 | 16.666667% | Control compacto. | | .grid-col-span-3 | 3 | 25% | Cuarto del grid. | | .grid-col-span-4 | 4 | 33.333333% | Tercio del grid. | | .grid-col-span-5 | 5 | 41.666667% | Composición asimétrica. | | .grid-col-span-6 | 6 | 50% | Mitad del grid. | | .grid-col-span-7 | 7 | 58.333333% | Contenido principal asimétrico. | | .grid-col-span-8 | 8 | 66.666667% | Dos tercios del grid. | | .grid-col-span-9 | 9 | 75% | Tres cuartos del grid. | | .grid-col-span-10 | 10 | 83.333333% | Contenido casi completo. | | .grid-col-span-11 | 11 | 91.666667% | Margen estructural mínimo. | | .grid-col-span-12 | 12 | 100% | Fila completa. | | .grid-col-span-640-[n] | 1–12 | Variable | Override para ≤640px. | | .grid-col-span-768-[n] | 1–12 | Variable | Override para ≤768px. | | .grid-col-span-1024-[n] | 1–12 | Variable | Override para ≤1024px. | | .grid-col-span-1280-[n] | 1–12 | Variable | Override para ≤1280px. | | .grid-col-span-1536-[n] | 1–12 | Variable | Override para ≤1536px. | | .grid-col-span-2560-[n] | 1–12 | Variable | Override para ≤2560px. | | .grid-col-span-3840-[n] | 1–12 | Variable | Override para ≤3840px. | | .grid-col-span-6016-[n] | 1–12 | Variable | Override para ≤6016px. | Regla del sistema El padre define la cantidad total de columnas; grid-col-span controla cuántas de ellas ocupa cada item. Recomendaciones ## Buenas prácticas con grid col span 01 ### Define el grid padre El span sólo tiene sentido dentro de un contenedor grid con columnas. 02 ### Respeta la escala En un grid de doce columnas, evita spans superiores a doce. 03 ### Amplía en móvil Los contenidos principales suelen pasar a span completo en pantallas pequeñas. 04 ### Usa gap en el padre La separación pertenece al grid, no al ancho individual del item. --- # Grid col (columnas de grid) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/grid-col.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Estructura · grid-col.css Define la cantidad de columnas de un grid entre 1 y 12, crea distribuciones automáticas con un mínimo de 200px y adapta la composición mediante breakpoints. v2.0 ▦ ## De 1 a 12 columnas Genera tracks iguales con unidades fraccionales. ⌗ ## Columnas automáticas Incluye auto-fit y auto-fill con una base mínima de 200px. ↔ ## Responsive por contenedor Cambia la cantidad de columnas en siete breakpoints reales. i ## Problema que resuelve Centraliza la definición de columnas para evitar repetir `grid-template-columns` y media queries en cada componente. ✦ ## Convención real de clases Combina `.grid` con `.grid-col-{n}`, `.grid-auto`, `.grid-auto-fit` o `.grid-auto-fill`. Este archivo no incluye variantes para 1024px. Código + resultado ## Ejemplos reales de grid col Observa cómo el contenedor distribuye sus hijos dentro de columnas iguales o automáticas. HTML Resultado aplicado 2 columnas contenedor grid hijos directos .grid-col-2 crea dos columnas iguales con repeat(2, 1fr). ```html
Columna 1 Columna 2
``` .grid-col-3 crea tres tracks iguales; el tercero queda disponible para otro item. ```html
Columna 1 Columna 2
``` .grid-col-4 crea cuatro tracks iguales; los items se colocan siguiendo el flujo del grid. ```html
Columna 1 Columna 2
``` .grid-auto-fit colapsa tracks vacíos y permite que los items existentes ocupen el espacio. ```html
Item fluido 1 Item fluido 2
``` .grid-auto-fill conserva los tracks automáticos disponibles aunque no todos tengan contenido. ```html
Item automático 1 Item automático 2
``` La composición cambia de cuatro columnas a una cuando el viewport es igual o menor a 768px. ```html
Columna 1 Columna 2
``` Referencia ## Clases grid-col Las clases se aplican al contenedor y definen sus tracks, no el span individual de los items. | Clase | Columnas | Definición | Uso recomendado | | --- | --- | --- | --- | | .grid | — | display: grid | Activa el contexto grid. | | .grid-auto | 12 | repeat(12, 1fr) | Retícula automática de doce columnas. | | .grid-auto-fit | Automáticas | minmax(200px, 1fr) | Colapsa tracks vacíos. | | .grid-auto-fill | Automáticas | minmax(200px, 1fr) | Conserva tracks automáticos vacíos. | | .grid-col-1 | 1 | repeat(1, 1fr) | Una columna. | | .grid-col-2 | 2 | repeat(2, 1fr) | Dos columnas iguales. | | .grid-col-3 | 3 | repeat(3, 1fr) | Tres columnas iguales. | | .grid-col-4 | 4 | repeat(4, 1fr) | Cuatro columnas iguales. | | .grid-col-5 | 5 | repeat(5, 1fr) | Cinco columnas iguales. | | .grid-col-6 | 6 | repeat(6, 1fr) | Seis columnas iguales. | | .grid-col-7 | 7 | repeat(7, 1fr) | Siete columnas iguales. | | .grid-col-8 | 8 | repeat(8, 1fr) | Ocho columnas iguales. | | .grid-col-9 | 9 | repeat(9, 1fr) | Nueve columnas iguales. | | .grid-col-10 | 10 | repeat(10, 1fr) | Diez columnas iguales. | | .grid-col-11 | 11 | repeat(11, 1fr) | Once columnas iguales. | | .grid-col-12 | 12 | repeat(12, 1fr) | Doce columnas iguales. | | .grid-col-640-[n] | 1–12 | repeat(n, 1fr) | Override para ≤640px. | | .grid-col-768-[n] | 1–12 | repeat(n, 1fr) | Override para ≤768px. | | .grid-col-1280-[n] | 1–12 | repeat(n, 1fr) | Override para ≤1280px. | | .grid-col-1536-[n] | 1–12 | repeat(n, 1fr) | Override para ≤1536px. | | .grid-col-2560-[n] | 1–12 | repeat(n, 1fr) | Override para ≤2560px. | | .grid-col-3840-[n] | 1–12 | repeat(n, 1fr) | Override para ≤3840px. | | .grid-col-6016-[n] | 1–12 | repeat(n, 1fr) | Override para ≤6016px. | Regla del sistema Grid-col define los tracks del contenedor. Grid-col-span controla después cuántos tracks ocupa cada item. Recomendaciones ## Buenas prácticas con grid col 01 ### Activa grid Combina siempre la definición de columnas con la clase `.grid`. 02 ### Usa auto-fit para fluidez Permite que los items existentes aprovechen el espacio sobrante. 03 ### Reduce columnas en móvil Un override simple suele ser suficiente para mantener la legibilidad. 04 ### Separa con gap Define la separación en el padre sin modificar el tamaño de los tracks. --- # Grid row span (ocupación de filas) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/grid-row-span.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Estructura · grid-row-span.css Controla cuántas filas ocupa un item dentro de un grid. La escala real incluye spans de 1 a 12 y variantes para todos los breakpoints de QuicklyCSS. v2.0 ↕ ## Spans de 1 a 12 Expresa directamente cuántas filas consecutivas ocupa cada item. ▤ ## Composición vertical Permite destacar tarjetas o módulos con alturas estructurales distintas. ▦ ## Overrides adaptables Cambia el span por resolución mediante las variantes de breakpoint reales. i ## Problema que resuelve Permite construir mosaicos y composiciones verticales sin escribir una regla de `grid-row` para cada componente. ✦ ## Convención real de clases Usa `.grid-row-span-{n}` para la base y `.grid-row-span-{breakpoint}-{n}` para el override. El elemento debe ser hijo de un contenedor grid con filas definidas. Código + resultado ## Ejemplos reales de grid row span El resultado usa un grid real; la altura del item permite comparar cuántas filas ocupa cada clase. HTML Resultado aplicado 2 filas grid padre filas de 48px .grid-row-span-2 aplica grid-row: span 2 dentro del contenedor grid. ```html
Span de 2 filas Este item ocupa dos filas del grid padre.
``` .grid-row-span-3 aplica grid-row: span 3 y aumenta la ocupación vertical. ```html
Span de 3 filas Este item ocupa tres filas del grid padre.
``` .grid-row-span-4 es útil para una tarjeta destacada dentro de un mosaico. ```html
Span de 4 filas Este item ocupa cuatro filas del grid padre.
``` Combina .grid-row-span-4 con .grid-row-span-768-1 para compactar el item en tablet y móvil. ```html
4 filas → 1 fila Ocupa cuatro filas como base y una fila cuando el viewport es igual o menor a 768px.
``` Referencia ## Clases grid-row-span La escala indica cuántas filas consecutivas ocupa el item dentro del grid padre. | Clase | Filas | Propiedad aplicada | Uso recomendado | | --- | --- | --- | --- | | .grid-row-span-1 | 1 | grid-row: span 1 | Item de altura base. | | .grid-row-span-2 | 2 | grid-row: span 2 | Tarjeta compacta destacada. | | .grid-row-span-3 | 3 | grid-row: span 3 | Módulo vertical medio. | | .grid-row-span-4 | 4 | grid-row: span 4 | Tarjeta principal del mosaico. | | .grid-row-span-5 | 5 | grid-row: span 5 | Contenido vertical extenso. | | .grid-row-span-6 | 6 | grid-row: span 6 | Media escala de doce filas. | | .grid-row-span-7 | 7 | grid-row: span 7 | Composición asimétrica amplia. | | .grid-row-span-8 | 8 | grid-row: span 8 | Panel vertical dominante. | | .grid-row-span-9 | 9 | grid-row: span 9 | Contenido de gran altura. | | .grid-row-span-10 | 10 | grid-row: span 10 | Módulo casi completo. | | .grid-row-span-11 | 11 | grid-row: span 11 | Ocupación vertical extendida. | | .grid-row-span-12 | 12 | grid-row: span 12 | Escala vertical completa. | | .grid-row-span-640-[n] | 1–12 | Variable | Override para ≤640px. | | .grid-row-span-768-[n] | 1–12 | Variable | Override para ≤768px. | | .grid-row-span-1024-[n] | 1–12 | Variable | Override para ≤1024px. | | .grid-row-span-1280-[n] | 1–12 | Variable | Override para ≤1280px. | | .grid-row-span-1536-[n] | 1–12 | Variable | Override para ≤1536px. | | .grid-row-span-2560-[n] | 1–12 | Variable | Override para ≤2560px. | | .grid-row-span-3840-[n] | 1–12 | Variable | Override para ≤3840px. | | .grid-row-span-6016-[n] | 1–12 | Variable | Override para ≤6016px. | Regla del sistema El padre define las filas y su altura; grid-row-span controla cuántas de ellas ocupa el item. Recomendaciones ## Buenas prácticas con grid row span 01 ### Define filas en el padre El span necesita un grid cuyas filas explícitas o automáticas tengan una altura coherente. 02 ### Alinea el contenido Comprueba que el contenido pueda crecer sin desbordarse dentro del espacio asignado. 03 ### Compacta en móvil Reduce los spans grandes cuando una composición vertical ya no aporta jerarquía. 04 ### Usa gap en el padre La separación entre filas pertenece al grid, no a cada item individual. --- # Hatched (achurados) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/hatched.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Superficies Aplica 28 patrones de QuicklyCSS con una única clase numerada: los 25 diseños históricos y tres incorporaciones nuevas, sin imágenes externas. v2.0 28 ## Veintiocho patrones Los 25 originales y tres diseños nuevos. 1 ## Una sola clase Usa `.hatched-{número}` directamente. CSS ## Sin imágenes Cada trama se genera con gradientes. i ## Una clase define el patrón completo El HTML sólo necesita una clase entre `.hatched-1` y `.hatched-28`. Las clases originales permanecen sin cambios. Código + resultado ## Compara patrones representativos Selecciona una pestaña para ver la clase exacta y el resultado que produce sobre la misma superficie. HTML Resultado aplicado Hatched · 01 Una clase · patrón completo Patrón aplicado Líneas diagonales a 45°. ```html
Patrón 01
``` Superpone diagonales a 45° y 135°. ```html
Patrón 08
``` Matriz alternada de puntos pequeños. ```html
Patrón 16
``` Puntos uniformes y espaciados inspirados en interfaces oscuras. ```html
Patrón 26
``` Segmentos angulares forman un ritmo de espiga contemporáneo. ```html
Patrón 27
``` Arcos superpuestos producen una trama orgánica y continua. ```html
Patrón 28
``` Colección completa ## Los veintiocho achurados Las clases 1–25 preservan la colección histórica; 26–28 incorporan puntos, espiga y escamas. 01 `.hatched-1` ### Diagonal Líneas diagonales a 45°. 02 `.hatched-2` ### Diagonal inversa Invierte la dirección del trazo. 03 `.hatched-3` ### Horizontal Líneas paralelas horizontales. 04 `.hatched-4` ### Vertical Líneas paralelas verticales. 05 `.hatched-5` ### Cuadrícula Cruza los ejes horizontal y vertical. 06 `.hatched-6` ### Diagonal espaciada Aumenta la separación entre líneas. 07 `.hatched-7` ### Diagonal gruesa Trazo ancho con densidad media. 08 `.hatched-8` ### Cruz diagonal Superpone diagonales a 45° y 135°. 09 `.hatched-9` ### Cuadrícula marcada Cruce ortogonal de mayor presencia. 10 `.hatched-10` ### Persiana fina Horizontal compacta de un píxel. 11 `.hatched-11` ### Diagonal 30° Inclinación más suave y compacta. 12 `.hatched-12` ### Inversa 150° Trazo inverso grueso y abierto. 13 `.hatched-13` ### Cruz 30° Cruce diagonal de ángulo abierto. 14 `.hatched-14` ### Inversa fina Línea sutil a 120°. 15 `.hatched-15` ### Vertical densa Vertical fina con poco espacio. 16 `.hatched-16` ### Puntos finos Matriz alternada de puntos pequeños. 17 `.hatched-17` ### Diagonal densa Bandas gruesas y próximas. 18 `.hatched-18` ### Cuadrícula gruesa Cruce ortogonal amplio y marcado. 19 `.hatched-19` ### Cruz fina Retícula diagonal compacta. 20 `.hatched-20` ### Trama compleja Combina ejes y diagonales. 21 `.hatched-21` ### Horizontal abierta Línea horizontal con mayor separación. 22 `.hatched-22` ### Vertical abierta Línea vertical con mayor separación. 23 `.hatched-23` ### Diagonal abierta Diagonal equilibrada y espaciada. 24 `.hatched-24` ### Cruz abierta Cruce diagonal de baja densidad. 25 `.hatched-25` ### Diagonal amplia Línea gruesa con separación máxima. 26 `.hatched-26` ### Retícula de puntos Puntos uniformes y espaciados inspirados en interfaces oscuras. 27 `.hatched-27` ### Espiga geométrica Segmentos angulares forman un ritmo de espiga contemporáneo. 28 `.hatched-28` ### Escamas Arcos superpuestos producen una trama orgánica y continua. Referencia ## Clases disponibles Las clases originales conservan sus nombres y las nuevas continúan la misma numeración. 01–05 ### Patrones básicos Diagonales, líneas ortogonales y cuadrícula. `.hatched-1 … .hatched-5` 06–10 ### Grosor y densidad Variaciones más espaciadas, gruesas o compactas. `.hatched-6 … .hatched-10` 11–15 ### Ángulos alternativos Direcciones de 30°, 120°, 150° y vertical densa. `.hatched-11 … .hatched-15` 16–20 ### Puntos y cruces Puntos, tramas densas y combinaciones complejas. `.hatched-16 … .hatched-20` 21–25 ### Patrones abiertos Superficies de baja densidad con mayor separación. `.hatched-21 … .hatched-25` 26–28 ### Nuevos patrones Retícula de puntos, espiga geométrica y escamas. `.hatched-26 … .hatched-28` Criterio de uso ## Buenas prácticas 01 ### Un patrón por elemento No combines varias clases `.hatched-*`; la última regla puede sustituir a las anteriores. 02 ### Prioriza legibilidad Usa el achurado como fondo decorativo y mantén suficiente contraste para el contenido. 03 ### Elige la densidad Los patrones densos funcionan en superficies pequeñas; los abiertos respiran mejor en áreas amplias. 04 ### Retíralo con claridad Elimina la clase numerada cuando el elemento deba volver a una superficie sin trama. --- # Icons (SVG escalables) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/icons.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Contenidos · Iconos Integra iconos SVG que heredan el tamaño y el color del contexto, conservan su proporción y permanecen estables dentro de layouts flex. v2.0 1em ## Escala con el texto `.icon` usa 1em de ancho y alto para responder al `font-size` aplicado. ◆ ## Color heredado `.icon-current` conecta el relleno y el trazo del SVG con `currentColor`. ↔ ## SVG y Material Las utilidades también escalan y colorean iconos de fuente como Material Symbols. i ## Composición recomendada Combina `.icon` y `.icon-current` con una utilidad como `.font-size-4` y un color como `.color-blue-600`. ✦ ## Sin escalas propias El módulo no define clases `.icon-size-*`. Los tamaños proceden de la escala tipográfica para evitar mantener dos sistemas paralelos. Código + resultado ## Ejemplos reales de iconos Selecciona una composición para comprobar cómo responde el mismo SVG al tamaño y al color. HTML Resultado aplicado 24px SVG real .icon establece un cuadro de 1em; .font-size-4 aporta el tamaño de 24px. ```html ``` .icon-current fuerza fill y stroke a currentColor; la utilidad de color controla el resultado. ```html ``` El icono reutiliza la escala existente: .font-size-8 equivale a 60px. ```html ``` Cualquier utilidad color-* puede controlar el SVG cuando se combina con .icon-current. ```html ``` Escala disponible ## 14 niveles recomendados para iconos `.icon` mide `1em`. La escala comienza en `.font-size-01` (11px) y continúa con `.font-size-1` hasta `.font-size-13`. Se eliminó el nivel `0` para evitar duplicar los 16px de `.font-size-1`. 1 tamaño mínimo `.font-size-01` · 11px 13 principales `1–13` · 16px a 100px 14 niveles en total Sin tamaños base duplicados `.font-size-01` 11px `.font-size-1` 16px `.font-size-2` 18px `.font-size-3` 20px `.font-size-4` 24px `.font-size-5` 30px `.font-size-6` 36px `.font-size-7` 48px `.font-size-8` 60px `.font-size-9` 72px `.font-size-10` 80px `.font-size-11` 88px `.font-size-12` 96px `.font-size-13` 100px | Opción | Clases | Niveles | Cuándo usarla | | --- | --- | --- | --- | | Mínimo | .font-size-01 | 1 | Iconos auxiliares de 11px; evitar tamaños menores. | | Fija principal | .font-size-1–13 | 13 | Controles, navegación, destacados y displays entre 16px y 100px. | | Fluida | .font-size-fluid-1–6 | 6 | Iconos protagonistas que deben responder continuamente al viewport. | | Responsive | .font-size-{breakpoint}-{nivel} | 9 breakpoints | Usa 01 o los niveles 1–13 después del breakpoint. | Opciones de integración ## SVG y Material Symbols QuicklyCSS controla tamaño y color tanto en SVG inline como en iconos basados en fuente. Recomendado ### SVG inline Permite controlar geometría, relleno y trazo con `.icon` y `.icon-current`. ```html ``` Resultado aplicado SVG inline check_circle Biblioteca externa ### Google Material Symbols Al ser una fuente de iconos, usa directamente las utilidades `font-size-*` y `color-*`; no necesita `.icon`. ```html check_circle ``` Resultado aplicado check_circle Material Symbols Elección rápida Usa SVG inline para control total y Material Symbols para acceder a un catálogo amplio. Si el icono comunica una acción sin texto visible, agrega un nombre accesible al control. Referencia ## Clases de iconos El módulo es deliberadamente pequeño: dos clases resuelven la geometría y la herencia de color. | Clases | Propiedad | Resultado | Uso recomendado | | --- | --- | --- | --- | | .icon | inline-size: 1em block-size: 1em | Icono proporcional al texto y estable en flex. | Clase base para SVG incorporados. | | .icon-current | fill: currentColor stroke: currentColor | El SVG adopta el color CSS del elemento. | SVG que deban responder a utilidades color-* . | | .font-size-{nivel} | font-size | Cambia el tamaño final porque 1em sigue la escala tipográfica. | Composición con font-size . | | .color-{familia}-{tono} | color | Controla el color heredado por .icon-current . | Composición con colors . | Regla del sistema El módulo no impone una colección: normaliza SVG propios y se compone con bibliotecas externas basadas en fuentes o CSS. Recomendaciones ## Buenas prácticas con iconos 01 ### ViewBox consistente Conserva un `viewBox` correcto para que el SVG pueda escalar sin deformarse. 02 ### Decorativos ocultos Usa `aria-hidden="true"` cuando el texto cercano ya comunica el significado. 03 ### Acciones con nombre Los botones que sólo contienen un icono necesitan un `aria-label` descriptivo. 04 ### Un solo sistema Escala iconos con `font-size-*` en lugar de inventar tamaños independientes. --- # Iframe (contenido responsivo) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/iframe.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Contenidos · Embeds Integra videos, mapas, presentaciones y vistas externas conservando su proporción, sin alturas fijas ni desbordes en pantallas pequeñas. v2.0 16:9 ## Proporción estable `.iframe` utiliza 16:9 por defecto y admite siete utilidades de ratio. ↔ ## Ancho responsivo El wrapper ocupa el ancho disponible y calcula automáticamente la altura. ▣ ## Múltiples formatos Funciona con `iframe`, `embed`, `video` y `object`. i ## Uso recomendado Aplica `.iframe` al contenedor, no al elemento embebido. Agrega una clase `.ratio-*` sólo cuando necesites cambiar el 16:9 predeterminado. ✶ ## Sin JavaScript El comportamiento depende de CSS nativo y conserva un fallback para navegadores sin soporte de `aspect-ratio`. Código + resultado ## Ejemplos reales de iframe Selecciona una proporción para comparar el marcado y el resultado aplicado al mismo contenido. HTML Resultado aplicado 16:9 Embed responsivo ▶ Contenido embebido '> .iframe usa 16:9 por defecto; ratio-16-9 puede declararse de forma explícita cuando mejora la lectura del componente. ```html
``` .ratio-4-3 reemplaza la proporción base y resulta útil para presentaciones o contenido clásico. ```html
``` .ratio-1-1 crea un embed cuadrado y limita su ancho dentro de la vista previa. ```html
``` .ratio-9-16 está pensado para video vertical; conviene limitar el ancho del wrapper en layouts amplios. ```html
``` Escala disponible ## Siete proporciones Las utilidades de ratio son compartidas con otros medios y reemplazan el 16:9 inicial de `.iframe`. 16:9 `.ratio-16-9` Video y contenido panorámico 4:3 `.ratio-4-3` Presentaciones y contenido clásico 1:1 `.ratio-1-1` Contenido cuadrado 21:9 `.ratio-21-9` Contenido cinematográfico ultrawide 3:2 `.ratio-3-2` Fotografía y medios horizontales 9:16 `.ratio-9-16` Reels, Shorts y video vertical 3:4 `.ratio-3-4` Contenido vertical moderado Referencia ## Clases de iframe Una clase estructural y siete modificadores cubren los formatos habituales de contenido embebido. | Clase | Proporción | Función | Uso recomendado | | --- | --- | --- | --- | | .iframe | 16:9 | Wrapper responsivo y recorte del contenido. | Aplicar siempre al contenedor exterior. | | .ratio-16-9 | 16:9 | Modifica aspect-ratio . | Video y contenido panorámico. | | .ratio-4-3 | 4:3 | Modifica aspect-ratio . | Presentaciones y contenido clásico. | | .ratio-1-1 | 1:1 | Modifica aspect-ratio . | Contenido cuadrado. | | .ratio-21-9 | 21:9 | Modifica aspect-ratio . | Contenido cinematográfico ultrawide. | | .ratio-3-2 | 3:2 | Modifica aspect-ratio . | Fotografía y medios horizontales. | | .ratio-9-16 | 9:16 | Modifica aspect-ratio . | Reels, Shorts y video vertical. | | .ratio-3-4 | 3:4 | Modifica aspect-ratio . | Contenido vertical moderado. | Regla del sistema El elemento embebido debe ser hijo directo del wrapper para ocupar correctamente todo el espacio disponible. Recomendaciones ## Buenas prácticas con iframes 01 ### Título accesible Incluye siempre un atributo `title` que describa con claridad el contenido embebido. 02 ### Carga diferida Usa `loading="lazy"` cuando el iframe no sea imprescindible en el primer viewport. 03 ### Permisos mínimos Limita `allow` y `sandbox` a las capacidades que el proveedor realmente necesita. 04 ### Ancho vertical Restringe el ancho de los ratios 9:16 y 3:4 para que no generen bloques excesivamente altos. --- # Images (medios fluidos) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/images.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Contenidos · Medios Controla el tamaño, el recorte y el punto focal de imágenes y otros medios reemplazados con utilidades pequeñas y combinables. v2.0 ↔ ## Imagen fluida `.img-fluid` evita desbordes y conserva la proporción natural. ▣ ## Recorte predecible Cinco clases `.object-*` controlan cómo ocupa la imagen su caja. ⌖ ## Punto focal Nueve posiciones permiten conservar visible la zona importante del recurso. i ## Composición recomendada Usa `.img-fluid` para imágenes responsivas. Cuando la caja tenga ancho y alto definidos, combina una utilidad de ajuste con una de posición. Código + resultado ## Prueba los modos de ajuste Selecciona una clase para comparar el marcado y su efecto sobre la misma fotografía. HTML Resultado aplicado Responsivo · 16:9 Imagen real ![Paisaje montañoso junto a un lago](https://picsum.photos/id/1015/900/600) .img-fluid mantiene la imagen responsiva; .object-contain evita deformarla dentro del contenedor 16:9. ```html
Paisaje montañoso junto a un lago
``` .object-cover llena la caja y recorta lo necesario; .object-center conserva el centro como punto focal. ```html
Paisaje montañoso junto a un lago
``` .object-contain muestra el recurso completo; el espacio sobrante pertenece a la caja contenedora. ```html
Paisaje montañoso junto a un lago
``` .object-scale-down reduce el recurso sólo cuando es necesario y nunca lo amplía por encima de su tamaño natural. ```html
Paisaje montañoso junto a un lago
``` Referencia ## Ajustes disponibles Estas utilidades se aplican directamente a ``, ` ` y otros elementos reemplazados. | Clase | Valor | Resultado | Uso recomendado | | --- | --- | --- | --- | | .img-fluid | max-inline-size: 100% | No excede el contenedor y conserva su proporción. | Base para imágenes responsivas. | | .object-cover | object-fit: cover | Cubre toda la caja; puede recortar la imagen. | Fotos de portada, tarjetas y hero. | | .object-contain | object-fit: contain | Muestra la imagen completa sin recortarla. | Logotipos, productos e ilustraciones. | | .object-fill | object-fit: fill | Llena la caja sin conservar la proporción. | Casos controlados donde la distorsión sea aceptable. | | .object-none | object-fit: none | Conserva el tamaño natural del recurso. | Inspección o recorte a escala original. | | .object-scale-down | object-fit: scale-down | Usa el menor resultado entre none y contain. | Evitar ampliar recursos pequeños. | Regla del sistema `object-fit` necesita una caja con ancho y alto definidos para producir un recorte visible. Punto focal ## Nueve posiciones Combínalas principalmente con `.object-cover`, `.object-contain`, `.object-none` o `.object-scale-down`. Centro `.object-center` `object-position: center` Superior `.object-top` `object-position: top` Inferior `.object-bottom` `object-position: bottom` Izquierda `.object-left` `object-position: left` Derecha `.object-right` `object-position: right` Superior izquierda `.object-top-left` `object-position: left top` Superior derecha `.object-top-right` `object-position: right top` Inferior izquierda `.object-bottom-left` `object-position: left bottom` Inferior derecha `.object-bottom-right` `object-position: right bottom` Recomendaciones ## Buenas prácticas con imágenes 01 ### Texto alternativo Describe el contenido en `alt`; usa `alt=""` sólo cuando la imagen sea decorativa. 02 ### Dimensiones Declara `width` y `height` para reservar espacio y reducir saltos de layout. 03 ### Carga eficiente Usa `loading="lazy"` fuera del primer viewport y entrega formatos optimizados. 04 ### Punto focal Ajusta `object-position` cuando `cover` pueda ocultar información relevante. --- # Text decoration (decoración de texto) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/line-types.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Contenidos · Texto Controla el estilo y el grosor de subrayados y tachados sin modificar bordes ni outlines. v2.0 — ## Cinco estilos Desde `solid` hasta `wavy`, exclusivamente para texto. 10 ## Diez grosores `.decoration-1` a `.decoration-10` equivalen a valores de 1px a 10px. Aa ## Responsabilidad única `.decoration-*` nunca altera `border` ni `outline`. i ## Composición requerida Activa la decoración con `.underline` o `.line-through` y luego combina estilo y grosor: `.decoration-dashed .decoration-2`. Código + resultado ## Compara estilos de decoración Selecciona un estilo para aplicarlo sobre el mismo texto subrayado. HTML Resultado aplicado 3px · solid Decoración real Texto de ejemplo .underline activa la línea; .decoration-solid y .decoration-3 controlan su estilo y grosor. ```html

Texto con subrayado sólido

``` .decoration-dashed produce un subrayado segmentado sin modificar los bordes del elemento. ```html

Texto con subrayado segmentado

``` Un grosor mayor hace más evidente el patrón punteado. ```html

Texto con subrayado punteado

``` .decoration-double necesita suficiente grosor para distinguir ambos trazos. ```html

Texto con subrayado doble

``` .decoration-wavy controla el estilo; .underline activa la decoración. ```html

Texto con subrayado ondulado

``` Escala disponible ## Grosores de decoración Las clases `.decoration-{nivel}` controlan únicamente `text-decoration-thickness`, desde 1px hasta 10px. Aa `.decoration-1` 1px Aa `.decoration-2` 2px Aa `.decoration-3` 3px Aa `.decoration-4` 4px Aa `.decoration-5` 5px Aa `.decoration-6` 6px Aa `.decoration-7` 7px Aa `.decoration-8` 8px Aa `.decoration-9` 9px Aa `.decoration-10` 10px Referencia ## Clases disponibles Todas estas utilidades afectan exclusivamente propiedades de decoración de texto. | Clase | Valor | Propiedad | Resultado | | --- | --- | --- | --- | | .decoration-solid | solid | text-decoration-style | Trazo continuo. | | .decoration-dashed | dashed | text-decoration-style | Trazo segmentado. | | .decoration-dotted | dotted | text-decoration-style | Trazo punteado. | | .decoration-double | double | text-decoration-style | Trazo doble; necesita suficiente grosor para distinguirse. | | .decoration-wavy | wavy | text-decoration-style | Trazo ondulado. | | .decoration-{1…10} | 1px…10px | text-decoration-thickness | Controla el grosor de la decoración. | Separación de contextos Para bordes usa `.border-solid`, `.border-dashed` y `.border-{0…10}`. Las clases `.decoration-*` no modifican bordes ni outlines. Recomendaciones ## Buenas prácticas con decoraciones 01 ### Activa la línea Usa `.underline` o `.line-through` antes de definir estilo y grosor. 02 ### Declara la intención Combina una clase de estilo y otra de grosor cuando el diseño requiera ambos controles. 03 ### Reserva double Usa al menos 3px para que el trazo doble pueda distinguirse correctamente. 04 ### Separa contextos Usa `.border-*` para cajas; no emplees decoraciones de texto como sustituto de un borde. --- # Lists (listas y marcadores) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/lists.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Contenidos · Listas Normaliza listas semánticas y controla marcadores, posición y separación vertical con utilidades pequeñas y predecibles. v2.0 • ## Nueve marcadores Viñetas, números, letras y romanos en variantes minúsculas y mayúsculas. ↕ ## Cinco separaciones `.list-gap-1` a `.list-gap-5` controlan el ritmo vertical. ↳ ## Anidación automática Las sublistas heredan sangría y reciben un marcador apropiado para su nivel. i ## Base recomendada Aplica `.list` para normalizar margen, sangría y altura de línea; añade después el marcador, la posición y el espaciado que necesites. Código + resultado ## Compara listas reales Selecciona una variante para ver su marcado y el resultado aplicado sobre el mismo contenido. HTML Resultado aplicado Disc · gap 2 Lista semántica - Instalación del sistema - Configuración inicial - Uso de componentes - Buenas prácticas .list establece la base; .list-disc define la viñeta y .list-gap-2 separa los elementos 0.5rem. ```html ``` .list-square cambia únicamente la forma del marcador. ```html ``` Para secuencias ordenadas usa un elemento ol junto a .list-decimal. ```html
  1. Instalación del sistema
  2. Configuración inicial
  3. Uso de componentes
``` .list-roman produce numeración romana en minúsculas. ```html
  1. Instalación del sistema
  2. Configuración inicial
  3. Uso de componentes
``` .list-none elimina marcador y sangría; es útil como base para navegación o componentes. ```html ``` Escala disponible ## Nueve tipos de marcador Usa `ul` para viñetas y `ol` cuando el orden de los elementos tenga significado. - Primer elemento - Segundo elemento - Tercer elemento `.list-disc` disc - Primer elemento - Segundo elemento - Tercer elemento `.list-circle` circle - Primer elemento - Segundo elemento - Tercer elemento `.list-square` square - Primer elemento - Segundo elemento - Tercer elemento `.list-decimal` decimal - Primer elemento - Segundo elemento - Tercer elemento `.list-leading-zero` decimal-leading-zero - Primer elemento - Segundo elemento - Tercer elemento `.list-alpha` lower-alpha - Primer elemento - Segundo elemento - Tercer elemento `.list-alpha-up` upper-alpha - Primer elemento - Segundo elemento - Tercer elemento `.list-roman` lower-roman - Primer elemento - Segundo elemento - Tercer elemento `.list-roman-up` upper-roman Ritmo vertical ## Cinco niveles de separación El margen se aplica a cada hijo directo `li`; no requiere convertir la lista en flex. - Elemento - Elemento - Elemento `.list-gap-1` 0.25rem - Elemento - Elemento - Elemento `.list-gap-2` 0.5rem - Elemento - Elemento - Elemento `.list-gap-3` 0.75rem - Elemento - Elemento - Elemento `.list-gap-4` 1rem - Elemento - Elemento - Elemento `.list-gap-5` 1.25rem Referencia ## Clases disponibles La referencia corresponde a las utilidades presentes actualmente en `lists.css`. | Clase | Rango o valor | Resultado | Uso recomendado | | --- | --- | --- | --- | | .list | Base | Normaliza margen, sangría, posición y altura de línea. | Aplicar a listas de contenido. | | .list-none | list-style: none | Elimina marcador y sangría. | Navegación y listas de interfaz. | | .list-{marcador} | 9 variantes | Cambia list-style-type . | Definir viñeta o numeración. | | .list-gap-{1…5} | 0.25rem…1.25rem | Añade margen inferior a cada hijo directo. | Controlar ritmo vertical. | | .list-inside | inside | Incluye el marcador dentro de la caja de contenido. | Bloques estrechos o alineaciones especiales. | | .list-outside | outside | Sitúa el marcador fuera de la caja de contenido. | Lectura editorial; valor base recomendado. | | .list-reset | Reset total | Elimina margen, padding, marcador y espaciado de hijos. | Base neutral para componentes propios. | Listas anidadas Dentro de `.list`, las sublistas reciben sangría automática; los `ul` usan `circle` y los `ol`, `lower-alpha`. Recomendaciones ## Buenas prácticas con listas 01 ### Semántica primero Usa `ol` si el orden importa y `ul` cuando los elementos sean equivalentes. 02 ### Marcadores visibles No elimines viñetas en contenido editorial si son necesarias para comprender la estructura. 03 ### Separación moderada Elige un único nivel de gap por lista para conservar un ritmo visual consistente. 04 ### Reset intencional Usa `.list-reset` sólo cuando un componente vaya a definir toda su presentación. --- # Opacity (presencia visual) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/opacity.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Transparencia Controla la transparencia del elemento completo en once niveles, aplícala sólo durante hover o incorpora una transición de opacidad preconfigurada. v2.0 11 ## Once niveles La escala avanza de 0% a 100% visible mediante incrementos constantes de diez puntos. 3 ## Tres familias Valor fijo, preset con transición y cambio exclusivo durante `:hover`. 1 ## Una capa La propiedad se calcula sobre el elemento completo, incluidos contenido, bordes y descendientes. i ## Transparente no significa oculto `.opacity-0` hace invisible el elemento, pero mantiene su espacio y puede seguir recibiendo interacción. Para retirarlo del layout utiliza una utilidad de display o visibility adecuada. Código + resultado ## Compara las tres formas de aplicarla El HTML mostrado es el mismo que produce cada resultado aplicado. HTML ```html
Contenido al 50%
``` Resultado aplicado 50% visible Contenido Texto, fondo y borde `.opacity-50` aplica `opacity: 0.5` permanentemente a la caja completa. HTML ```html
Superficie

Texto siempre opaco

``` Resultado aplicado Sólo la superficie cambia Superficie Texto siempre opaco Pasa el cursor sobre el recuadro Las clases se aplican únicamente a la superficie: transiciona de 100% a 40%, mientras el texto hermano permanece completamente opaco. HTML ```html
Superficie

Texto siempre opaco

``` Resultado aplicado 40% → 100% Superficie Texto siempre opaco Pasa el cursor sobre el recuadro `.opacity-trans-40` inicia la superficie al 40% y prepara la transición; `.opacity-hover-100` la lleva al 100% sin modificar el texto. Escala ## De invisible a completamente opaco El número representa el porcentaje visible. El valor CSS equivalente va de `0` a `1`. `.opacity-0` 0% visible `.opacity-10` 10% visible `.opacity-20` 20% visible `.opacity-30` 30% visible `.opacity-40` 40% visible `.opacity-50` 50% visible `.opacity-60` 60% visible `.opacity-70` 70% visible `.opacity-80` 80% visible `.opacity-90` 90% visible `.opacity-100` 100% visible Mapa del sistema ## Una escala, tres momentos de aplicación Las tres familias comparten los valores 0, 10, 20…100, pero difieren en cuándo aplican la opacidad y si agregan movimiento. BASE `.opacity-{valor}` ### Estado permanente Aplica el nivel inmediatamente y lo mantiene mientras la clase permanezca en el elemento. `opacity: valor` PRESET `.opacity-trans-{valor}` ### Valor con transición Aplica el nivel y prepara cualquier cambio posterior de opacidad durante 250ms con easing suave. `opacity + transition` ESTADO `.opacity-hover-{valor}` ### Sólo al pasar el cursor No cambia el estado normal; aplica el nivel únicamente mientras el elemento coincide con `:hover`. `:hover { opacity }` Sin variantes responsive Este módulo no define clases con breakpoint. No uses nombres como `.opacity-768-50`: actualmente no existen en el framework. Alcance real ## Qué cambia y qué permanece Comprender el comportamiento de la propiedad evita usar opacidad como reemplazo de display, visibility o colores transparentes. ◫ ### Afecta toda la caja Fondo, borde, texto, imágenes y descendientes se componen juntos con el mismo nivel. ↔ ### Conserva el espacio La caja sigue participando normalmente en el layout incluso cuando utiliza `.opacity-0`. ⌁ ### Conserva interacción Un elemento transparente puede seguir recibiendo clics y foco si no desactivas esas capacidades. Aa ### Reduce contraste En textos y controles, comprueba que el resultado conserve contraste suficiente sobre el fondo real. Referencia ## Clases disponibles La tabla distingue el valor visible de la familia que decide cuándo se aplica. | Clases | Propiedad | Función | Uso | | --- | --- | --- | --- | | .opacity-0 | opacity: 0 | Mantiene el elemento al 0% visible. | Estado base permanente. | | .opacity-10 | opacity: 0.1 | Mantiene el elemento al 10% visible. | Estado base permanente. | | .opacity-20 | opacity: 0.2 | Mantiene el elemento al 20% visible. | Estado base permanente. | | .opacity-30 | opacity: 0.3 | Mantiene el elemento al 30% visible. | Estado base permanente. | | .opacity-40 | opacity: 0.4 | Mantiene el elemento al 40% visible. | Estado base permanente. | | .opacity-50 | opacity: 0.5 | Mantiene el elemento al 50% visible. | Estado base permanente. | | .opacity-60 | opacity: 0.6 | Mantiene el elemento al 60% visible. | Estado base permanente. | | .opacity-70 | opacity: 0.7 | Mantiene el elemento al 70% visible. | Estado base permanente. | | .opacity-80 | opacity: 0.8 | Mantiene el elemento al 80% visible. | Estado base permanente. | | .opacity-90 | opacity: 0.9 | Mantiene el elemento al 90% visible. | Estado base permanente. | | .opacity-100 | opacity: 1 | Mantiene el elemento al 100% visible. | Estado base permanente. | | .opacity-trans-{0…100} | opacity + transition | Aplica el nivel indicado y anima los cambios de opacidad durante 250ms. | .opacity-trans-80 | | .opacity-hover-{0…100} | opacity en :hover | Aplica el nivel indicado solamente mientras el puntero está encima. | .opacity-hover-60 | Recomendaciones ## Buenas prácticas de opacity 01 ### No ocultes interacción Si utilizas `.opacity-0`, controla también foco y eventos cuando el elemento no deba operar. 02 ### Cuida el contraste Evita valores bajos en contenido esencial, etiquetas de formularios y acciones principales. 03 ### Prefiere composición Combina un estado base y hover cuando necesites definir claramente ambos extremos del cambio. 04 ### No anides opacidades Dos ancestros semitransparentes multiplican el efecto y pueden volver impredecible el resultado. --- # Overflow (recorte y desplazamiento) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/overflow.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Desbordamiento Controla contenido desbordado, scroll, overscroll, barras, snap y truncado de texto con utilidades composables. v2.0 ↕ ## Ambos ejes o uno Usa `.overflow-*` globalmente o las familias `.overflow-x-*` y `.overflow-y-*`. ⇢ ## Scroll controlado Combina scrollbars, overscroll y snap para paneles, galerías y navegación interna. … ## Texto resistente Recorta una línea, limita párrafos o permite cortar palabras largas sin romper el layout. i ## Overflow necesita un límite El efecto se vuelve visible cuando el contenedor tiene un ancho o alto menor que su contenido. Código + resultado ## Compara recorte y desplazamiento El contenido es deliberadamente mayor que su caja para que cada comportamiento sea visible. HTML Resultado aplicado Recorta ambos ejes Prueba el scroll cuando esté disponible Elemento 01 Elemento 02 Elemento 03 .overflow-hidden recorta el contenido y no ofrece desplazamiento. ```html
...
``` .overflow-clip recorta en el borde de la caja y no crea un contenedor desplazable. ```html
...
``` .overflow-auto muestra desplazamiento únicamente cuando el contenido supera la caja. ```html
...
``` .overflow-scroll fuerza un área desplazable en ambos ejes. ```html
...
``` La composición habilita desplazamiento horizontal y recorta el eje vertical. ```html
...
``` Ejes y composición ## Controla sólo la dirección necesaria Las variantes por eje evitan activar scroll o recorte donde no corresponde. `.overflow-x-auto` Horizontal ### Desplazamiento lateral Útil para tablas, galerías y filas que conservan el ancho de sus elementos. `.overflow-y-auto` Vertical ### Panel con altura limitada Permite recorrer contenido largo sin ampliar indefinidamente la página. `.overflow-x-hidden-y-auto` Composición ### X oculto, Y automático Patrón frecuente para menús laterales, modales y paneles apilados. Scroll y snap ## Desplazamiento predecible Combina una caja desplazable con snap en el contenedor y alineación en sus hijos. Arrastra horizontalmente `.overflow-x-auto .snap-x-mandatory .scrollbar-thin` 01 02 03 04 Cada tarjeta usa `.snap-start`; el contenedor decide el eje y la intensidad del ajuste. `.scroll-smooth` Comportamiento Suaviza desplazamientos iniciados por enlaces, scripts o navegación interna. `.scroll-mt-{0|8|16|24|32}` Margen del destino Reserva una separación superior cuando un elemento se convierte en objetivo del scroll. `.scroll-pt-{0|8|16|24|32}` Padding del contenedor Desplaza el punto de llegada dentro del área desplazable. `.overscroll-contain` Propagación Evita que el gesto continúe en el contenedor padre al alcanzar un extremo. `.scrollbar-none` Visibilidad Oculta visualmente la barra sin desactivar el desplazamiento. `.scrollbar-gutter-stable` Estabilidad Reserva espacio para la barra y reduce cambios de ancho en el contenido. Texto y truncado ## Evita que el contenido rompa la caja El truncado de varias líneas se compone con `.truncate` y una clase `.line-1` a `.line-6`. Una línea con indicador Nombre-de-archivo-muy-largo-que-supera-el-ancho-disponible-documentacion-final.pdf `.text-ellipsis` Recorta y añade puntos suspensivos. Una línea sin indicador Nombre-de-archivo-muy-largo-que-supera-el-ancho-disponible-documentacion-final.pdf `.text-clip` Recorta sin añadir puntos suspensivos. Tres líneas Este párrafo contiene suficiente texto para ocupar varias líneas. La combinación conserva solamente tres líneas visibles y oculta el contenido restante sin depender de una altura fija. `.truncate .line-3` La clase base prepara el elemento y `.line-3` define el límite. Palabra extensa https://ejemplo.test/ruta/identificadorExtremadamenteLargoSinSeparadoresQueNoDebeRomperLaTarjeta `.break-words` Permite cortar cadenas largas cuando no existe un punto natural. Referencia ## Clases disponibles La tabla resume únicamente las familias presentes en el módulo actual. | Clases | Valores | Función | Ejemplo | | --- | --- | --- | --- | | .overflow-{valor} | visible, hidden, clip, auto, scroll | Controla ambos ejes. | .overflow-auto | | .overflow-x-{valor} / .overflow-y-{valor} | visible, hidden, clip, auto, scroll | Controla un eje. | .overflow-x-auto | | .overflow-x-hidden-y-auto / .overflow-x-auto-y-hidden | Composición directa | Combina ambos ejes. | .overflow-x-hidden-y-auto | | .scroll-{auto\|smooth} | auto, smooth | Define el comportamiento de scroll. | .scroll-smooth | | .scroll-mt-{valor} / .scroll-pt-{valor} | 0, 8, 16, 24, 32 | Offset superior de destino o contenedor. | .scroll-mt-16 | | .overscroll[-x\|-y]-{valor} | auto, contain, none | Controla la propagación del gesto. | .overscroll-y-contain | | .text-{clip\|ellipsis} | Una línea | Recorta texto horizontal. | .text-ellipsis | | .truncate .line-{1…6} | 1 a 6 líneas | Limita texto multilínea. | .truncate .line-3 | | .wrap-* / .break-* / .hyphens-* | Familias tipográficas | Controla espacios, cortes y guionado. | .break-words | | .scrollbar-* | auto, thin, none, color, gutter | Controla presencia y estabilidad de la barra. | .scrollbar-thin | | .snap-* | tipo, eje, alineación y parada | Configura puntos de ajuste. | .snap-x-mandatory | | .overflow-break-avoid | break-inside: avoid | Evita partir una caja entre columnas o páginas. | .overflow-break-avoid | Recomendaciones ## Buenas prácticas de overflow 01 ### Limita primero la caja Define una dimensión o restricción real antes de esperar un efecto de overflow. 02 ### Prefiere un eje Activa sólo el eje que realmente necesita desplazamiento para evitar barras inesperadas. 03 ### Compón el truncado Usa `.truncate` junto a `.line-*`; una clase de líneas aislada no prepara el recorte. 04 ### No ocultes accesibilidad Si escondes la barra, conserva navegación por teclado y una señal clara de que existe contenido desplazable. --- # Position (flujo y anclaje) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/position.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Posicionamiento Controla cómo participa un elemento en el flujo, define referencias para hijos absolutos y aplica presets fixed o sticky sin mezclar el orden de capas. v2.0 5 ## Cinco modos Static, relative, absolute, fixed y sticky cubren la propiedad CSS sin introducir nombres alternativos. ↗ ## Diez presets Seis anclajes fixed y cuatro sticky combinan posición y offset en una sola utilidad. ≤ ## Siete límites Las variantes con breakpoint desactivan el posicionamiento en ese ancho y tamaños menores. i ## Position y z-index se componen Este módulo decide dónde participa el elemento; usa `.z-*` únicamente cuando también necesites controlar qué capa queda encima. Código + resultado ## Observa cada contexto de posicionamiento Cada pestaña contiene el mismo HTML que produce el resultado aplicado. HTML ```html
Elemento
Contenedor relativo
``` Resultado aplicado Respecto del padre Elemento Contenedor relativo El padre relativo crea la referencia; el hijo absoluto sale del flujo y usa los offsets indicados. HTML ```html
Barra fija
Viewport simulado
``` Resultado aplicado Superior · ancho completo Barra fija Viewport simulado `.position-fixed-t` fija arriba y establece `left: 0` y `right: 0`. HTML ```html
Viewport simulado
``` Resultado aplicado Esquina inferior derecha Viewport simulado `.position-fixed-rb` combina `position: fixed`, `right: 0` y `bottom: 0`. HTML ```html
Título persistente

Contenido 01

Contenido 02

Contenido 03

Contenido 04

Contenido 05

``` Resultado aplicado Desplaza el panel Título persistente Contenido 01 Contenido 02 Contenido 03 Contenido 04 Contenido 05 `.position-sticky-t` conserva el elemento arriba mientras se desplaza su contenedor. Propiedad base ## Cinco formas de participar en el flujo Estas clases sólo modifican `position`; no agregan offsets ni valores de z-index. `.position-static` static Participa en el flujo normal e ignora offsets. `.position-relative` relative Conserva su espacio y sirve de referencia para hijos absolutos. `.position-absolute` absolute Sale del flujo y se posiciona respecto del ancestro adecuado. `.position-fixed` fixed Se fija respecto de la ventana visible. `.position-sticky` sticky Alterna entre flujo normal y anclaje durante el desplazamiento. Anclajes compuestos ## Presets fixed y sticky Los sufijos usan `t`, `r`, `b` y `l` para top, right, bottom y left. ### Fixed · relativo al viewport `.position-fixed-t` Arriba, ancho completo. `.position-fixed-b` Abajo, ancho completo. `.position-fixed-lt` Esquina superior izquierda. `.position-fixed-rt` Esquina superior derecha. `.position-fixed-lb` Esquina inferior izquierda. `.position-fixed-rb` Esquina inferior derecha. ### Sticky · relativo al área de scroll `.position-sticky-t` Anclaje superior. `.position-sticky-b` Anclaje inferior. `.position-sticky-l` Anclaje izquierdo. `.position-sticky-r` Anclaje derecho. Desactivación responsive ## Siete límites máximos Una clase con sufijo revierte a `position: static` y limpia los cuatro offsets cuando la ventana es igual o menor al valor indicado. `640` max-width .position-fixed-t-640 `768` max-width .position-fixed-t-768 `1280` max-width .position-fixed-t-1280 `1536` max-width .position-fixed-t-1536 `2560` max-width .position-fixed-t-2560 `3840` max-width .position-fixed-t-3840 `6016` max-width .position-fixed-t-6016 HTML ```html
Barra fija sólo sobre 768px
``` Sobre 768px actúa `.position-fixed-t`. En 768px o menos, `.position-fixed-t-768` la devuelve al flujo normal y limpia sus offsets. Importante Estas variantes no activan el posicionamiento desde un breakpoint; lo desactivan hacia abajo y deben combinarse con la clase base correspondiente. Referencia ## Clases disponibles La tabla contiene únicamente las familias presentes en el módulo actual. | Clases | Propiedades | Función | Ejemplo | | --- | --- | --- | --- | | .position-static | position: static | Mantiene el elemento en el flujo normal; los offsets no producen desplazamiento. | .position-static | | .position-relative | position: relative | Conserva su espacio original, admite offsets y sirve como referencia para descendientes absolutos. | .position-relative | | .position-absolute | position: absolute | Saca el elemento del flujo y lo posiciona respecto del ancestro posicionado más cercano. | .position-absolute | | .position-fixed | position: fixed | Saca el elemento del flujo y lo mantiene fijo respecto de la ventana visible. | .position-fixed | | .position-sticky | position: sticky | Permanece en el flujo hasta alcanzar un offset dentro de su área de desplazamiento. | .position-sticky | | .position-fixed-t | fixed; top: 0; left: 0; right: 0 | Fija una barra arriba y la extiende a todo el ancho disponible. | .position-fixed-t | | .position-fixed-b | fixed; bottom: 0; left: 0; right: 0 | Fija una barra abajo y la extiende a todo el ancho disponible. | .position-fixed-b | | .position-fixed-lt | fixed; left: 0; top: 0 | Fija el elemento en la esquina superior izquierda. | .position-fixed-lt | | .position-fixed-rt | fixed; right: 0; top: 0 | Fija el elemento en la esquina superior derecha. | .position-fixed-rt | | .position-fixed-lb | fixed; left: 0; bottom: 0 | Fija el elemento en la esquina inferior izquierda. | .position-fixed-lb | | .position-fixed-rb | fixed; right: 0; bottom: 0 | Fija el elemento en la esquina inferior derecha. | .position-fixed-rb | | .position-sticky-t | sticky; top: 0 | Mantiene el elemento adherido al borde superior durante el desplazamiento. | .position-sticky-t | | .position-sticky-r | sticky; right: 0 | Mantiene el elemento adherido al borde derecho durante el desplazamiento horizontal. | .position-sticky-r | | .position-sticky-b | sticky; bottom: 0 | Mantiene el elemento adherido al borde inferior durante el desplazamiento. | .position-sticky-b | | .position-sticky-l | sticky; left: 0 | Mantiene el elemento adherido al borde izquierdo durante el desplazamiento horizontal. | .position-sticky-l | | .position-{tipo}-{bp} | static + offsets auto | Desactiva el modo base en el límite indicado. | .position-fixed-768 | | .position-fixed-{lado}-{bp} | static + offsets auto | Desactiva un preset fixed en el límite indicado. | .position-fixed-rb-768 | | .position-sticky-{lado}-{bp} | static + offsets auto | Desactiva un preset sticky en el límite indicado. | .position-sticky-t-768 | Recomendaciones ## Buenas prácticas de position 01 ### Define la referencia Usa `.position-relative` en el padre que debe contener a un hijo absoluto. 02 ### Prefiere presets Para barras y acciones flotantes usa una clase compuesta antes de repetir offsets. 03 ### Sticky necesita scroll Comprueba el overflow y la altura de sus ancestros cuando el anclaje no responda. 04 ### Separa las capas Combina con `.z-*` sólo cuando exista una superposición que ordenar. --- # Rango y archivo (valores y adjuntos) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/range-file.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Contenidos · Entradas nativas Dos entradas nativas para ajustar valores dentro de una escala o seleccionar archivos sin reemplazar el comportamiento del navegador. v2.0 ↔ ## Valor continuo Range expresa una posición dentro de límites conocidos. ⇧ ## Archivo nativo File conserva selector, teclado y permisos del sistema. ● ## Componibles Color, borde y espaciado se añaden con utilidades. Código + resultado ## Rango y archivo Selecciona un control para revisar únicamente su código y resultado. HTML ```html ``` Resultado aplicado Rango Componente real HTML ```html ``` Resultado aplicado Archivo Componente real Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-range | Control de valor continuo. | Combinar con min, max, step y value. | | .q-file | Selector de archivos. | Combinar con accept y multiple cuando corresponda. | | .q-field | Agrupa etiqueta y control. | Aplicar al label exterior. | | .q-label | Etiqueta visible. | Describe el dato solicitado. | Recomendaciones ## Buenas prácticas de Rango y archivo 01 ### Límites claros Comunica el mínimo, máximo y unidad del rango. 02 ### Formatos aceptados Usa accept como ayuda, no como única validación. 03 ### Validación posterior Comprueba tipo y tamaño del archivo también en servidor. --- # Reverse (flujo visual) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/reverse.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Dirección y orden Invierte la dirección visual de Grid o Flex y cambia la posición de elementos concretos con `order`, sin alterar el orden semántico del HTML. v2.0 G ## Grid Invierte el eje inline mediante `direction` y conserva la lectura interna de cada hijo. F ## Flex Alterna entre fila, fila inversa, columna y columna inversa con `flex-direction`. # ## Order Asigna prioridad visual a un hijo Flex o Grid con valores de `-9999` a `9999`. i ## Tres herramientas, tres alcances `.reverse-grid-*` cambia la dirección inline del Grid; `.reverse-flex-*` cambia el eje y sentido de Flex; `.order-*` mueve sólo el elemento que recibe la clase. Código + resultado ## Compara qué invierte cada familia El HTML mostrado es el mismo que produce cada resultado aplicado. HTML ```html
A B C
``` Resultado aplicado C · B · A A B C `.reverse-grid-x-e` usa `direction: rtl` en el Grid para comenzar desde el extremo derecho, pero devuelve cada hijo a `ltr` para no invertir su texto. HTML ```html
A B C
``` Resultado aplicado row-reverse A B C `.reverse-flex-x-e` aplica `flex-direction: row-reverse`: mantiene el eje horizontal e invierte su sentido. HTML ```html
A B C
``` Resultado aplicado column-reverse A B C `.reverse-flex-y-e` aplica `flex-direction: column-reverse`: organiza verticalmente y comienza desde abajo. HTML ```html
A B C
``` Resultado aplicado B · A · C A B C `.order-first` asigna `order: -9999` a B; por eso aparece antes que A y C sin cambiar su posición en el HTML. Mapa del sistema ## Elige según el contenedor La clase reverse siempre va en el contenedor; la clase order se aplica directamente al hijo que quieres priorizar. GRID `.reverse-grid-*` ### Dirección inline Úsala en un contenedor Grid para empezar a distribuir columnas desde la derecha o restaurar el inicio izquierdo. Propiedad: `direction` FLEX `.reverse-flex-*` ### Eje y sentido Úsala en un contenedor Flex para controlar fila o columna y decidir desde qué extremo comienza. Propiedad: `flex-direction` HIJO `.order-*` ### Prioridad individual Úsala en un hijo de Grid o Flex para cambiar su posición visual respecto de sus hermanos. Propiedad: `order` Lectura de clases ## Un segmento para el eje y otro para el sentido Lee la clase como `.reverse-{layout}-{eje}-{sentido}`. En el segmento del eje, `x` representa el eje horizontal y `y` el vertical. En el último segmento, `s` significa start y `e` significa end . Ejemplo: `.reverse-flex-x-e` `x` selecciona el eje horizontal (fila). La `e` final significa end y activa la inversión: `row-reverse`. `.reverse-grid-x-e` Grid · horizontal · invertido `x`: eje inline. `e`: end. Resultado: `direction: rtl`. `.reverse-grid-x-s` Grid · horizontal · normal `x`: eje inline. `s`: start. Resultado: `direction: ltr`. `.reverse-flex-x-e` Flex · fila · invertida `x`: eje horizontal. `e`: end. Resultado: `row-reverse`. `.reverse-flex-x-s` Flex · fila · normal `x`: eje horizontal. `s`: start. Resultado: `row`. `.reverse-flex-y-e` Flex · columna · invertida `y`: eje vertical. `e`: end. Resultado: `column-reverse`. `.reverse-flex-y-s` Flex · columna · normal `y`: eje vertical. `s`: start. Resultado: `column`. Regla rápida El penúltimo segmento elige el eje: `-x-` = horizontal y `-y-` = vertical. El último elige el sentido: `-s` = normal y `-e` = invertido. Orden de hijos ## Extremos y trece posiciones numéricas Los elementos se ordenan de menor a mayor valor; cuando comparten el mismo valor, conserva prioridad el orden original del HTML. `.order-first` -9999 Envía el elemento antes de cualquier valor numérico incluido por el módulo. `.order-last` 9999 Envía el elemento después de cualquier valor numérico incluido por el módulo. `.order-0` order: 0 `.order-1` order: 1 `.order-2` order: 2 `.order-3` order: 3 `.order-4` order: 4 `.order-5` order: 5 `.order-6` order: 6 `.order-7` order: 7 `.order-8` order: 8 `.order-9` order: 9 `.order-10` order: 10 `.order-11` order: 11 `.order-12` order: 12 Accesibilidad `order` cambia la presentación visual, no la lectura del DOM. Mantén en el HTML un orden lógico para teclado y tecnologías de asistencia. Variantes responsive ## Ocho puntos de activación Inserta el breakpoint después de la familia. La regla comienza a aplicarse desde ese ancho porque utiliza `min-width`. `640` min-width .reverse-flex-640-x-e `768` min-width .reverse-flex-768-x-e `1024` min-width .reverse-flex-1024-x-e `1280` min-width .reverse-flex-1280-x-e `1536` min-width .reverse-flex-1536-x-e `2560` min-width .reverse-flex-2560-x-e `3840` min-width .reverse-flex-3840-x-e `6016` min-width .reverse-flex-6016-x-e HTML ```html
Primero en el HTML
Segundo en el HTML
``` Hasta 767px mantiene `row`. Desde 768px, `.reverse-flex-768-x-e` cambia el contenedor a `row-reverse`. `.reverse-grid-{bp}-x-e` Invierte Grid desde el breakpoint. `.reverse-flex-{bp}-{x|y}-{s|e}` Define eje y sentido de Flex desde el breakpoint. `.order-{bp}-{valor}` Cambia el orden del hijo desde el breakpoint. Referencia ## Clases disponibles Cada clase base indica la propiedad exacta que modifica y el efecto que produce. | Clases | Propiedad | Función | Uso | | --- | --- | --- | --- | | .reverse-grid-x-e | direction: rtl | Hace que el Grid distribuya su eje inline desde la derecha; restablece los hijos a ltr . | Invertir columnas Grid. | | .reverse-grid-x-s | direction: ltr | Hace que el Grid distribuya su eje inline desde la izquierda; mantiene los hijos en ltr . | Restaurar Grid normal. | | .reverse-flex-x-e | flex-direction: row-reverse | Conserva el eje horizontal e invierte el orden visual de los hijos. | Fila de derecha a izquierda. | | .reverse-flex-x-s | flex-direction: row | Conserva el eje horizontal y restaura el sentido visual inicial. | Fila de izquierda a derecha. | | .reverse-flex-y-e | flex-direction: column-reverse | Cambia al eje vertical y coloca visualmente el último hijo arriba. | Columna de abajo hacia arriba. | | .reverse-flex-y-s | flex-direction: column | Cambia al eje vertical y conserva el orden visual del HTML. | Columna de arriba hacia abajo. | | .order-first | order: -9999 | Coloca el elemento antes que los valores numéricos de la escala. | Prioridad visual inicial. | | .order-last | order: 9999 | Coloca el elemento después que los valores numéricos de la escala. | Prioridad visual final. | | .order-0 | order: 0 | Asigna al elemento la posición numérica 0 dentro del orden visual del contenedor. | Hijo de Grid o Flex. | | .order-1 | order: 1 | Asigna al elemento la posición numérica 1 dentro del orden visual del contenedor. | Hijo de Grid o Flex. | | .order-2 | order: 2 | Asigna al elemento la posición numérica 2 dentro del orden visual del contenedor. | Hijo de Grid o Flex. | | .order-3 | order: 3 | Asigna al elemento la posición numérica 3 dentro del orden visual del contenedor. | Hijo de Grid o Flex. | | .order-4 | order: 4 | Asigna al elemento la posición numérica 4 dentro del orden visual del contenedor. | Hijo de Grid o Flex. | | .order-5 | order: 5 | Asigna al elemento la posición numérica 5 dentro del orden visual del contenedor. | Hijo de Grid o Flex. | | .order-6 | order: 6 | Asigna al elemento la posición numérica 6 dentro del orden visual del contenedor. | Hijo de Grid o Flex. | | .order-7 | order: 7 | Asigna al elemento la posición numérica 7 dentro del orden visual del contenedor. | Hijo de Grid o Flex. | | .order-8 | order: 8 | Asigna al elemento la posición numérica 8 dentro del orden visual del contenedor. | Hijo de Grid o Flex. | | .order-9 | order: 9 | Asigna al elemento la posición numérica 9 dentro del orden visual del contenedor. | Hijo de Grid o Flex. | | .order-10 | order: 10 | Asigna al elemento la posición numérica 10 dentro del orden visual del contenedor. | Hijo de Grid o Flex. | | .order-11 | order: 11 | Asigna al elemento la posición numérica 11 dentro del orden visual del contenedor. | Hijo de Grid o Flex. | | .order-12 | order: 12 | Asigna al elemento la posición numérica 12 dentro del orden visual del contenedor. | Hijo de Grid o Flex. | | .reverse-grid-{bp}-x-{s\|e} | direction | Aplica el sentido normal o inverso del Grid desde el breakpoint indicado. | .reverse-grid-768-x-e | | .reverse-flex-{bp}-{x\|y}-{s\|e} | flex-direction | Aplica el eje y sentido de Flex desde el breakpoint indicado. | .reverse-flex-768-y-e | | .order-{bp}-{first\|last\|0…12} | order | Asigna la prioridad visual al hijo desde el breakpoint indicado. | .order-768-first | Recomendaciones ## Buenas prácticas de reverse y order 01 ### Elige por contexto Usa la familia Grid o Flex que corresponda al `display` real del contenedor. 02 ### -s vuelve al inicio El sufijo `-s` significa start : restaura `row`, `column` o `ltr`. En cambio, `-e` invierte el sentido. 03 ### Protege la lectura No uses inversión visual para corregir un HTML cuyo orden semántico sea incorrecto. 04 ### Order sólo en hijos Aplica `.order-*` a elementos que participan directamente en un contenedor Grid o Flex. --- # Run y Run Back (movimiento ligado al scroll) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/run.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Activación por viewport Activa efectos cuando el elemento entra en la ventana visible. Run avanza hasta mostrarlo; Run Back también revierte el efecto cuando sale. v2.0 R ## Nombres originales Conserva `.fade-*`, `.flip-*`, `.zoom-*` y los atributos históricos. ↕ ## CSS puro La progresión se enlaza al viewport con scroll-driven animations, sin JavaScript. ✓ ## Fallback visible Si el navegador no admite la función, el contenido permanece visible y usable. i ## Movimiento vinculado al viewport Run ejecuta el efecto una vez cuando el elemento entra en el área visible. Run Back permite repetirlo al entrar y revertirlo al salir. Código + resultado ## Compara Run y Run Back Selecciona una composición para ver el activador, el efecto y el resultado que produce sobre el elemento. HTML Resultado aplicado Viewport · entrada Prueba interactiva El efecto se activa al entrar en el viewport RUN Contenido visible El efecto se activa al entrar en el viewport. .fade-in hace aparecer el elemento mediante un cambio progresivo de opacidad. ```html
Contenido visible
``` .fade-up combina opacidad con un desplazamiento ascendente al entrar. ```html
Contenido visible
``` .zoom-in aumenta progresivamente la escala; .run-back también revierte el efecto al salir. ```html
Contenido visible
``` .slide-up — Aparece mientras se desplaza 24px hacia arriba. ```html
Contenido visible
``` .slide-right — Aparece entrando 24px desde la izquierda. ```html
Contenido visible
``` .rotate-in — Aparece corrigiendo un giro de −8° y una escala reducida. ```html
Contenido visible
``` .blur-in — Aparece eliminando progresivamente un desenfoque de 10px. ```html
Contenido visible
``` .clip-up — Revela el contenido verticalmente desde el borde inferior. ```html
Contenido visible
``` .mask-lr — Descubre el contenido mediante una máscara de izquierda a derecha. ```html
Contenido visible
``` .tilt-in — Aparece corrigiendo una inclinación y un desplazamiento vertical. ```html
Contenido visible
``` .pop-in — Aumenta la escala con un pequeño rebote antes de estabilizarse. ```html
Contenido visible
``` .shadow-in — Añade progresivamente una sombra elevada al elemento. ```html
Contenido visible
``` .reveal — Revela el contenido horizontalmente de izquierda a derecha. ```html
Contenido visible
``` Responsabilidades ## Animation controla el tiempo; Run controla el recorrido La diferencia no está en el aspecto del efecto, sino en qué hace avanzar la secuencia. TIEMPO ### Animation `.animate-fade-in` Empieza al aplicar la clase y progresa durante una duración fija. VIEWPORT · IDA ### Run `.run.fade-up` Progresa al entrar en el viewport y conserva el estado visible. VIEWPORT · IDA Y VUELTA ### Run Back `.run-back.fade-up` Entra con el scroll y revierte la secuencia cuando el elemento sale. → ## Regla rápida Si necesitas reproducir, pausar o definir milisegundos, usa [Animation](animation.md). Si el movimiento debe seguir la posición del elemento en pantalla, usa Run. Composición ## Un activador y un efecto El activador define cuándo progresa; el efecto define qué transformación se ve. 01 Activador `.run` + 02 Efecto `.fade-up` = 03 Resultado `entrada al viewport` RUN ### Entrada en una dirección `class="run fade-up"` Comienza cuando cerca del 10% del elemento entra en pantalla, avanza con el recorrido y termina visible. RUN BACK ### Entrada y salida reversibles `class="run-back fade-up"` La primera parte revela el elemento; al abandonar el viewport, la segunda parte reproduce el efecto en sentido inverso. Clases ```html
Contenido
Contenido
``` Atributos originales ```html
Contenido
Contenido
``` Ambas sintaxis son equivalentes. `data-Qy-r` representa Run y `data-Qy-rb` representa Run Back. Mapa del sistema ## Tres familias originales Elige la familia según la transformación que debe comunicar: desplazamiento, giro o escala. ¿Debe desplazarse? Usa `.fade-*` ¿Debe girar? Usa `.flip-*` ¿Debe cambiar de escala? Usa `.zoom-*` | Familia | Clase | Resultado | | --- | --- | --- | | Fade .fade-* 8 efectos | .fade-up | Aparece mientras se desplaza hacia arriba. | | .fade-down | Aparece mientras se desplaza hacia abajo. | — | | .fade-right | Aparece mientras se desplaza hacia la derecha. | — | | .fade-left | Aparece mientras se desplaza hacia la izquierda. | — | | .fade-up-right | Aparece hacia arriba y a la derecha. | — | | .fade-up-left | Aparece hacia arriba y a la izquierda. | — | | .fade-down-right | Aparece hacia abajo y a la derecha. | — | | .fade-down-left | Aparece hacia abajo y a la izquierda. | — | | Flip .flip-* 4 efectos | .flip-left | Rota 90 grados hacia la izquierda sobre el eje Y. | | .flip-right | Rota 90 grados hacia la derecha sobre el eje Y. | — | | .flip-up | Rota 90 grados hacia arriba sobre el eje X. | — | | .flip-down | Rota 90 grados hacia abajo sobre el eje X. | — | | Zoom .zoom-* 10 efectos | .zoom-in | Aparece aumentando su escala. | | .zoom-in-up | Aumenta su escala mientras entra desde abajo. | — | | .zoom-in-down | Aumenta su escala mientras entra desde arriba. | — | | .zoom-in-left | Aumenta su escala mientras entra desde la derecha. | — | | .zoom-in-right | Aumenta su escala mientras entra desde la izquierda. | — | | .zoom-out | Aparece reduciéndose desde una escala mayor. | — | | .zoom-out-up | Reduce su escala mientras se desplaza hacia arriba. | — | | .zoom-out-down | Reduce su escala mientras se desplaza hacia abajo. | — | | .zoom-out-left | Reduce su escala mientras se desplaza hacia la izquierda. | — | | .zoom-out-right | Reduce su escala mientras se desplaza hacia la derecha. | — | Run / Run Back · Extensiones v2 ## Efectos adicionales vinculados al viewport Estos efectos sí pertenecen a Run / Run Back. Utiliza cada clase junto a `.run` o `.run-back`; por sí sola sólo define el movimiento. | Clase | Propiedad principal | Resultado | | --- | --- | --- | | .slide-up | transform + opacity | Aparece mientras se desplaza 24px hacia arriba. | | .slide-right | transform + opacity | Aparece entrando 24px desde la izquierda. | | .rotate-in | transform + opacity | Aparece corrigiendo un giro de −8° y una escala reducida. | | .blur-in | filter + opacity | Aparece eliminando progresivamente un desenfoque de 10px. | | .clip-up | clip-path + opacity | Revela el contenido verticalmente desde el borde inferior. | | .mask-lr | mask | Descubre el contenido mediante una máscara de izquierda a derecha. | | .tilt-in | transform + opacity | Aparece corrigiendo una inclinación y un desplazamiento vertical. | | .pop-in | transform + opacity | Aumenta la escala con un pequeño rebote antes de estabilizarse. | | .shadow-in | box-shadow | Añade progresivamente una sombra elevada al elemento. | | .reveal | clip-path | Revela el contenido horizontalmente de izquierda a derecha. | i ## Cómo se utilizan Ejemplo de entrada: `.run.slide-up`. Ejemplo reversible: `.run-back.slide-up`. Utiliza directamente el nombre de la clase mostrado en la tabla. Recomendaciones ## Una intención clara por elemento 01 ### Combina dos piezas Usa un solo activador y un solo efecto por elemento. 02 ### Run para revelar Elige Run cuando el estado final deba permanecer visible. 03 ### Run Back para revertir Úsalo cuando la salida de pantalla también deba comunicar movimiento. 04 ### Contenido primero El fallback y `prefers-reduced-motion` mantienen el contenido accesible. --- # Scroll (desplazamiento y anclaje) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/scroll.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Desplazamiento Controla el desbordamiento, la animación del desplazamiento, los puntos de anclaje, los offsets y la propagación del scroll. v2.0 ↔ ## Comportamiento `.scroll-smooth` anima los saltos; `.scroll-auto` conserva el comportamiento nativo. ⌁ ## Anclaje preciso El contenedor define el eje y cada elemento decide si se alinea al inicio, centro o final. ⇥ ## Propagación controlada `.overscroll-x-contain` evita que el gesto continúe desplazando el contenedor padre. i ## Primero debe existir desbordamiento Las utilidades de scroll producen un efecto visible cuando el contenido supera una dimensión limitada. Para un carrusel horizontal combina `.overflow-x-auto` con un contenido más ancho que su contenedor. Código + resultado ## Dos composiciones de scroll Cada pestaña muestra una responsabilidad distinta. El HTML contiene todos los elementos que aparecen en el resultado aplicado. HTML ```html

Arrastra la fila y suelta en cualquier posición.

01Inicio
02Inicio
03Inicio
04Inicio
05Inicio
06Inicio
07Inicio
08Inicio
``` Resultado aplicado MANDATORY · AJUSTE OBLIGATORIO Arrastra la fila y suelta en cualquier posición. 01 Inicio 02 Inicio 03 Inicio 04 Inicio 05 Inicio 06 Inicio 07 Inicio 08 Inicio Siempre termina con una tarjeta alineada a la guía. `.snap-x` obliga a terminar en un punto válido, aunque sueltes lejos. `.snap-start` alinea el borde inicial de la tarjeta con la guía azul. HTML ```html

Arrastra la fila y suéltala cerca del centro.

01Punto de snap
02Punto de snap
03Punto de snap
04Punto de snap
05Punto de snap
06Punto de snap
07Punto de snap
08Punto de snap
``` Resultado aplicado PROXIMITY · AJUSTE CERCANO Arrastra la fila y suéltala cerca del centro. 01 Punto de snap 02 Punto de snap 03 Punto de snap 04 Punto de snap 05 Punto de snap 06 Punto de snap 07 Punto de snap 08 Punto de snap Lejos: conserva la posición Cerca: centra la tarjeta `.scroll-smooth` anima el recorrido. `.snap-x-proximity` decide si corrige la posición: sólo actúa cuando una tarjeta termina cerca de la guía central. Mapa del sistema ## Cuatro decisiones independientes Compón únicamente las familias que el patrón necesita. 01 `.scroll-smooth` ### Cómo se mueve Define si el desplazamiento programático es suave o inmediato. 02 `.snap-x` ### Dónde se detiene Activa puntos de anclaje en el contenedor y define su eje. 03 `.scroll-p-16` ### Distancia del borde Reserva un offset interno al llevar un punto de snap a posición. 04 `.overscroll-x-contain` ### Cómo se propaga Evita encadenar el gesto horizontal con el contenedor padre. Scroll snap ## El contenedor define la regla; el hijo, la alineación El snap necesita una clase en ambos niveles. Si falta una de las dos partes, no hay un punto completo de anclaje. CONTENEDOR `.snap-x``.snap-y``.snap-both` ### Obligatorio El navegador debe terminar en un punto de snap válido. CONTENEDOR `.snap-x-proximity``.snap-y-proximity``.snap-both-proximity` ### Por proximidad Se ajusta sólo cuando el recorrido termina cerca del punto. ELEMENTO `.snap-start``.snap-center``.snap-end` ### Alineación Indica qué parte del elemento coincide con el área visible. Offsets ## Dos espacios con responsabilidades distintas Ambas escalas usan píxeles. Cambia de pestaña para ver qué borde toma como referencia cada familia. Borde del contenedor Espacio reservado Elemento destino Espacio del contenedor `.scroll-p-{valor}` mueve hacia dentro la línea donde deben alinearse los elementos. A `.scroll-p-0` 0px La alineación comienza a 0px del borde. A `.scroll-p-8` 8px La alineación comienza a 8px del borde. A `.scroll-p-16` 16px La alineación comienza a 16px del borde. A `.scroll-p-24` 24px La alineación comienza a 24px del borde. A `.scroll-p-32` 32px La alineación comienza a 32px del borde. A `.scroll-p-48` 48px La alineación comienza a 48px del borde. A `.scroll-p-64` 64px La alineación comienza a 64px del borde. A `.scroll-p-96` 96px La alineación comienza a 96px del borde. Espacio del destino `.scroll-m-{valor}` conserva una separación externa antes de alinear el elemento. A `.scroll-m-0` 0px El destino conserva 0px antes de su borde. A `.scroll-m-8` 8px El destino conserva 8px antes de su borde. A `.scroll-m-16` 16px El destino conserva 16px antes de su borde. A `.scroll-m-24` 24px El destino conserva 24px antes de su borde. A `.scroll-m-32` 32px El destino conserva 32px antes de su borde. A `.scroll-m-48` 48px El destino conserva 48px antes de su borde. A `.scroll-m-64` 64px El destino conserva 64px antes de su borde. A `.scroll-m-96` 96px El destino conserva 96px antes de su borde. Variantes específicas `.scroll-mx-16` aplica margen horizontal y `.scroll-my-16` aplica margen vertical. Referencia ## Clases disponibles Resumen de las familias reales cargadas por el framework. | Clases | Propiedad | Valores | Qué hacen | | --- | --- | --- | --- | | .scroll-auto / .scroll-smooth | scroll-behavior | auto / smooth | Controlan la animación del desplazamiento programático. | | .snap-x / .snap-y / .snap-both | scroll-snap-type | mandatory | Definen eje y ajuste obligatorio. | | .snap-*-proximity | scroll-snap-type | proximity | Ajustan sólo cerca de un punto. | | .snap-start / .snap-center / .snap-end | scroll-snap-align | start / center / end | Alinean cada elemento dentro del contenedor. | | .scroll-p-{valor} | scroll-padding | 0, 8, 16, 24, 32, 48, 64, 96px | Reserva espacio dentro del área visible. | | .scroll-m-{valor} | scroll-margin | 0, 8, 16, 24, 32, 48, 64, 96px | Añade separación alrededor del destino. | | .overscroll-{auto\|contain\|none} | overscroll-behavior | 3 valores | Controla la propagación al contenedor padre. | | .overscroll-x-* / .overscroll-y-* | overscroll por eje | auto / contain / none | Limita la regla a un eje. | Recomendaciones ## Buenas prácticas de scroll 01 ### Define el desbordamiento Usa `.overflow-x-auto` o `.overflow-y-auto` en el contenedor antes de aplicar comportamiento o snap. 02 ### Respeta movimiento reducido `.scroll-smooth` vuelve automáticamente a desplazamiento inmediato cuando el usuario activa `prefers-reduced-motion`. 03 ### Combina ambos niveles Snap requiere una regla en el contenedor y una alineación en cada elemento destino. 04 ### Contén paneles anidados Usa overscroll contain cuando el gesto no deba continuar desplazando la página exterior. --- # Selección (decisiones nativas) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/selection.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Contenidos · Checkbox y radio Presenta opciones múltiples o excluyentes conservando semántica, teclado y personalización mediante los colores del framework. v2.0 ✓ ## HTML nativo Checkbox y radio conservan el comportamiento esperado. ⌨ ## Accesible Label, fieldset y legend proporcionan nombre y contexto. ● ## Color componible Las utilidades bc-* controlan el color seleccionado. Código + resultado ## Patrones de selección Selecciona un patrón para revisar únicamente su código y resultado. HTML ```html ``` Resultado aplicado Selección · múltiple Componente real Correo HTML ```html
Visibilidad
``` Resultado aplicado Selección · exclusiva Componente real Visibilidad Público Privado Construido únicamente con clases de QuicklyCSS V2 y HTML semántico. Referencia ## Clases disponibles La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive. | Clase o atributo | Función | Uso recomendado | | --- | --- | --- | | .q-fieldset | Agrupa controles relacionados. | Rodear conjuntos con una misma pregunta. | | .q-legend | Nombra el conjunto. | Primer hijo del fieldset. | | .q-choice | Alinea control y texto. | Aplicar al label visible. | | .q-checkbox | Selección múltiple. | Opciones independientes. | | .q-radio | Selección excluyente. | Compartir el mismo name. | Recomendaciones ## Buenas prácticas de Selección 01 ### Pregunta visible Nombra cada conjunto mediante legend. 02 ### Label completo Permite activar el control pulsando también el texto. 03 ### Estado real Usa checked y disabled en lugar de simular estados visuales. --- # Shadow (sombras) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/shadow.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Profundidad Aplica profundidad a cajas, imágenes recortadas y texto mediante clases completas, listas para usar y con cinco intensidades. v2.0 □ ## Cajas `.shadow-box-*` usa `box-shadow` sobre el rectángulo completo. ◇ ## Imágenes `.shadow-img-*` usa `drop-shadow()` y respeta transparencias. Aa ## Texto `.shadow-text-*` dibuja la sombra directamente sobre los caracteres. i ## Cada clase produce un resultado completo No combines tipo, dirección e intensidad por separado. Selecciona una clase como `.shadow-box-m` o `.shadow-img-right`. Todas las sombras utilizan exclusivamente negro o grises neutros. Código + resultado ## Elige la familia según el contenido El HTML mostrado es el mismo que produce cada resultado aplicado. HTML ```html
Tarjeta con sombra
``` Resultado aplicado BOX · MEDIA Tarjeta con sombra `.shadow-box-m` aplica una sombra media al perímetro rectangular de la tarjeta. HTML ```html Logo de QuicklyCSS ``` Resultado aplicado IMAGEN · MEDIA ![Logo de QuicklyCSS](../assets/img/Logo-Quickly.png) `.shadow-img-m` usa `drop-shadow()`; en recursos transparentes sigue la silueta visible y no la caja del archivo. HTML ```html

Texto con sombra

``` Resultado aplicado TEXTO · MEDIA ### Texto con sombra `.shadow-text-m` aplica la sombra a los glifos. No agrega profundidad al contenedor del título. Escalas ## Cinco intensidades por familia Los sufijos `xs`, `s`, `m`, `l` y `xl` aumentan la presencia visual. Todas las intensidades usan sombras negras; sólo cambian la opacidad, el desplazamiento y el desenfoque. ### Cajas · `.shadow-box-*` `.shadow-box-xs` Extra sutil `.shadow-box-s` Sutil `.shadow-box-m` Media `.shadow-box-l` Alta `.shadow-box-xl` Máxima ### Imágenes · `.shadow-img-*` ![](../assets/img/Logo-Quickly.png) `.shadow-img-xs` Extra sutil ![](../assets/img/Logo-Quickly.png) `.shadow-img-s` Sutil ![](../assets/img/Logo-Quickly.png) `.shadow-img-m` Media ![](../assets/img/Logo-Quickly.png) `.shadow-img-l` Alta ![](../assets/img/Logo-Quickly.png) `.shadow-img-xl` Máxima ### Texto · `.shadow-text-*` Aa `.shadow-text-xs` Extra sutil Aa `.shadow-text-s` Sutil Aa `.shadow-text-m` Media Aa `.shadow-text-l` Alta Aa `.shadow-text-xl` Máxima Paleta neutral ## Una paleta neutral Las sombras de profundidad usan negro con distintas opacidades. El contorno claro utiliza el gris neutral 400 para separar texto blanco de fondos claros. `rgba(0, 0, 0, α)` ### Negro Color de todas las sombras de cajas, imágenes y texto. La transparencia cambia según la intensidad. `var(--qy-gray-400)` ### Gris claro Se utiliza en `.shadow-text-outline-light` para producir un contorno leve alrededor del texto blanco. Profundidad oscura, contorno neutral Las sombras de cajas, imágenes y texto permanecen negras; únicamente el contorno leve utiliza gris neutral. Variantes especiales ## Dirección para imágenes y contorno para texto Estas utilidades no forman parte de la escala de cinco tamaños: resuelven contextos específicos. ![](../assets/img/Logo-Quickly.png) `.shadow-img-left` ### Proyección izquierda Desplaza la sombra hacia la izquierda y abajo para una imagen flotante. ![](../assets/img/Logo-Quickly.png) `.shadow-img-right` ### Proyección derecha Desplaza la sombra hacia la derecha y abajo para equilibrar la composición. Texto claro `.shadow-text-outline-dark + .color-white` ### Contorno negro Combina el contorno negro con texto blanco sobre un fondo gris neutro. Texto blanco `.shadow-text-outline-light + .color-white` ### Contorno gris leve Combina texto blanco con un contorno gris neutral 400 para separarlo suavemente del fondo. Variantes responsive ## El breakpoint se agrega al final La forma es `.shadow-{familia}-{tamaño}-{breakpoint}`. En este módulo los media queries usan `max-width`, por lo que la clase se activa hasta el ancho indicado. 640px `max-width` `.shadow-box-m-640` 768px `max-width` `.shadow-box-m-768` 1280px `max-width` `.shadow-box-m-1280` 1536px `max-width` `.shadow-box-m-1536` 2560px `max-width` `.shadow-box-m-2560` 3840px `max-width` `.shadow-box-m-3840` 6016px `max-width` `.shadow-box-m-6016` También disponible Cambia `box` por `img` o `text`, y utiliza cualquiera de los tamaños `xs`, `s`, `m`, `l` o `xl`. El reset sigue la forma `.shadow-none-{breakpoint}`. Referencia ## Clases disponibles La tabla resume las familias reales definidas por el módulo. | Clases | Propiedad | Color | Función | Ejemplo | | --- | --- | --- | --- | --- | | .shadow-box-{xs…xl} | box-shadow | Negro | Sombra rectangular para cajas y componentes. | .shadow-box-m | | .shadow-img-{xs…xl} | filter: drop-shadow() | Negro | Sombra que sigue la transparencia del recurso. | .shadow-img-l | | .shadow-img-left , .shadow-img-right | filter: drop-shadow() | Negro | Proyección lateral fija para imágenes. | .shadow-img-right | | .shadow-text-{xs…xl} | text-shadow | Negro | Sombra oscura aplicada a los caracteres. | .shadow-text-xl | | .shadow-text-outline-dark | text-shadow | Negro | Trazo negro alrededor del texto. | Texto claro sobre fotografía. | | .shadow-text-outline-light | text-shadow | Gris neutral 400 | Trazo gris leve alrededor del texto. | Texto blanco sobre fondos claros. | | .shadow-none | Reset | — | Elimina box-shadow, filter y text-shadow. | Restaurar el estado sin sombra. | | .shadow-{familia}-{tamaño}-{bp} | Responsive | Oscuro | Aplica la variante hasta el breakpoint indicado. | .shadow-box-m-768 | Recomendaciones ## Buenas prácticas de shadow 01 ### Usa la familia correcta Una imagen transparente necesita `shadow-img`; una tarjeta rectangular necesita `shadow-box`. 02 ### Reserva los extremos Usa `l` y `xl` sólo cuando la jerarquía realmente requiera mucha profundidad. 03 ### Mantén coherencia No mezcles direcciones e intensidades arbitrarias dentro de una misma familia de componentes. 04 ### Comprueba contraste Los glows y contornos ayudan a leer, pero no reemplazan una combinación accesible de texto y fondo. --- # Sizes (ancho y alto) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/sizes.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Dimensiones Controla dimensiones automáticas, porcentuales, fraccionarias, relativas al viewport y límites mínimos o máximos. v2.0 % ## Proporciones Escalas porcentuales y fracciones frecuentes para ancho y alto. ↔ ## Viewport `vw` y `vh` permiten dimensionar respecto de la ventana. 8 ## Responsive Ocho breakpoints aplican fracciones, porcentajes y dimensiones de viewport. i ## La unidad cambia la referencia `%` depende del contenedor, `vw/vh` depende del viewport y `full` necesita una dimensión resoluble en el elemento padre. Código + resultado ## Compara formas de definir el ancho Todos los resultados se miden dentro del mismo contenedor para que la diferencia sea evidente. HTML Resultado aplicado 100% del contenedor Contenedor de referencia Elemento .w-full ocupa todo el ancho disponible del contenedor padre. ```html
Elemento
``` .wp-50 calcula la mitad del ancho del contenedor padre. ```html
Elemento
``` .w-1/3 expresa una fracción frecuente sin introducir un porcentaje manual. ```html
Elemento
``` .w-fit ajusta el ancho al contenido sin superar el espacio disponible. ```html
Elemento
``` La utilidad base define 50%; desde 1024px, .wp-1024-75 la reemplaza por 75%. ```html
Elemento
``` Escalas y opciones ## Explora cada familia de tamaños Elige la referencia adecuada: contenido, contenedor, viewport o límites mínimos y máximos. Ancho porcentual `.wp-*` usa como referencia el ancho del contenedor. `width: %` `.wp-10` 10% `.wp-20` 20% `.wp-30` 30% `.wp-40` 40% `.wp-50` 50% `.wp-60` 60% `.wp-70` 70% `.wp-80` 80% `.wp-90` 90% `.wp-100` 100% Alto porcentual `.hp-*` necesita una altura calculable en el contenedor. `height: %` `.hp-10` 10% `.hp-20` 20% `.hp-30` 30% `.hp-40` 40% `.hp-50` 50% `.hp-60` 60% `.hp-70` 70% `.hp-80` 80% `.hp-90` 90% `.hp-100` 100% Dependencia Si el padre no tiene una altura resoluble, un porcentaje vertical puede producir un resultado distinto del esperado. Fracciones frecuentes La misma proporción existe para ancho con `.w-*` y para alto con `.h-*`. `width / height` `.w-1/2``.h-1/2` 50% `.w-1/3``.h-1/3` 33.333% `.w-2/3``.h-2/3` 66.667% `.w-1/4``.h-1/4` 25% `.w-3/4``.h-3/4` 75% Tamaños intrínsecos y completos Estas opciones definen cómo se relaciona el elemento con su contenido, contenedor o viewport. `.w-* / .h-*` Ancho aplicado Contenido `.w-auto` Alto aplicado Contenido `.h-auto` Sigue las reglas normales de tamaño del elemento. Ancho aplicado Contenido `.w-full` Alto aplicado Contenido `.h-full` Ocupa el 100% de la dimensión calculable del contenedor. Ancho aplicado Contenido `.w-min` Alto aplicado Contenido `.h-min` Adopta la dimensión mínima que admite el contenido. Ancho aplicado Contenido `.w-max` Alto aplicado Contenido `.h-max` Adopta la dimensión ideal sin comprimir el contenido. Ancho aplicado Contenido `.w-fit` Alto aplicado Contenido `.h-fit` Se ajusta al contenido y al espacio disponible. Ancho aplicado Contenido `.w-screen` La medida continúa hasta completar 100vw. Alto aplicado Contenido `.h-screen` La medida continúa hasta completar 100vh. Usa 100vw para el ancho o 100vh para el alto. Dimensiones del viewport Estas clases ignoran el tamaño del contenedor y toman como referencia la ventana visible; las cajas de demostración contienen la medida completa. `vw / vh` 10vw `.vw-10` 10% del ancho del viewport. 30vw `.vw-30` 30% del ancho del viewport. 10vh `.vh-10` 10% del alto del viewport. 30vh `.vh-30` 30% del alto del viewport. Límites mínimos y máximos Estas clases no fijan la dimensión: establecen hasta dónde puede reducirse o crecer el elemento. `min-* / max-*` Mínimo horizontal mínimo 60% `.wp-20 .min-w-60` El ancho solicitado es 20%, pero `.min-w-60` impide que baje de 60%. Máximo horizontal máximo 40% `.w-full .max-w-40` `.w-full` intenta ocupar todo el ancho, pero `.max-w-40` lo limita a 40%. Mínimo vertical mínimo 60% `.hp-20 .min-h-60` La altura base de 20% aumenta hasta el mínimo permitido de 60%. Máximo vertical máximo 40% `.h-full .max-h-40` La altura completa se detiene en 40% por el límite máximo. Referencia del contenedor Usa `.min-w-*` y `.max-w-*` para ancho porcentual, o `.min-h-*` y `.max-h-*` para alto porcentual. Estas últimas necesitan una altura calculable en el contenedor padre. Referencia del viewport `.min-wv-{10…90}` y `.max-wv-{10…90}` limitan con `vw`; `.min-hv-{10…90}` y `.max-hv-{10…90}` limitan con `vh`. Para un límite de 100vw o 100vh usa las variantes `*-screen`. Variantes responsivas ## Ocho puntos de activación Inserta el breakpoint después de la familia: `.wp-1024-75`, `.w-768-1/2` o `.vh-1280-50`. `640` min-width .wp-640-75 `768` min-width .wp-768-75 `1024` min-width .wp-1024-75 `1280` min-width .wp-1280-75 `1536` min-width .wp-1536-75 `2560` min-width .wp-2560-75 `3840` min-width .wp-3840-75 `6016` min-width .wp-6016-75 HTML ```html
Contenido adaptable
``` El elemento comienza al 100%, pasa al 75% desde 768px y al 50% desde 1280px. MIN-HEIGHT DEL VIEWPORT ```html
Contenido adaptable
``` El mínimo comienza en 40vh y aumenta a 70vh desde 768px. Las variantes responsive de Sizes usan `min-width`: se activan desde el breakpoint indicado. Orden de la clase El patrón es `.min-hv-{breakpoint}-{valor}`. Por ejemplo, `.min-hv-1024-60` aplica `min-height: 60vh` desde 1024px. Referencia ## Clases disponibles La tabla resume las familias que realmente existen en el módulo actual. | Clases | Unidad o valor | Qué controla | Ejemplo | | --- | --- | --- | --- | | .w-{auto\|full\|min\|max\|fit\|screen} | Intrínseco, %, vw | Ancho directo. | .w-fit | | .h-{auto\|full\|min\|max\|fit\|screen} | Intrínseco, %, vh | Alto directo. | .h-full | | .wp-{10…100} | % del contenedor | Ancho en pasos de 10%. | .wp-60 | | .hp-{10…100} | % del contenedor | Alto en pasos de 10%. | .hp-40 | | .w-{fracción} | 1/2, 1/3, 2/3, 1/4, 3/4 | Ancho fraccionario. | .w-2/3 | | .h-{fracción} | 1/2, 1/3, 2/3, 1/4, 3/4 | Alto fraccionario. | .h-1/2 | | .vw-{10…100} / .vh-{10…100} | vw / vh | Dimensión relativa al viewport. | .vw-50 | | .min-w-{0\|full\|screen} / .max-w-{none\|full\|screen} | 0, %, vw | Límites horizontales especiales. | .max-w-full | | .min-w-{10\|20\|30\|40\|60\|70\|80\|90} / .max-w-{10\|20\|30\|40\|60\|70\|80\|90} | % del contenedor | Límites horizontales porcentuales. | .min-w-60 | | .min-wv-{10…90} / .max-wv-{10…90} | vw | Límites relativos al ancho del viewport. | .max-wv-80 | | .min-h-{0\|full\|screen} / .max-h-{none\|full\|screen} | 0, %, vh | Límites verticales especiales. | .min-h-screen | | .min-h-{10\|20\|30\|40\|60\|70\|80\|90} / .max-h-{10\|20\|30\|40\|60\|70\|80\|90} | % del contenedor | Límites verticales porcentuales. | .max-h-40 | | .min-hv-{10…90} / .max-hv-{10…90} | vh | Límites relativos al alto del viewport. | .min-hv-70 | | .{familia}-{bp}-{valor} | 8 breakpoints | Variantes responsive. | .wp-1024-75 | Responsive Las variantes se activan mediante `min-width` en 640, 768, 1024, 1280, 1536, 2560, 3840 y 6016 píxeles. Las familias `min-wv`, `max-wv`, `min-hv` y `max-hv` ofrecen valores de 10 a 90 en cada breakpoint. Recomendaciones ## Buenas prácticas de tamaños 01 ### Elige la referencia Usa porcentajes para el contenedor y viewport únicamente cuando la ventana sea la referencia real. 02 ### Evita alturas frágiles Una altura porcentual necesita una altura definida o calculable en su contenedor padre. 03 ### Limita sin fijar Usa min y max cuando el contenido deba conservar flexibilidad dentro de ciertos límites. 04 ### Base antes de responsive Define primero el tamaño general y sobrescríbelo sólo en los breakpoints necesarios. --- # Spacing (margin y padding) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/spacing.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Espaciado Controla el espacio exterior e interior mediante una escala compartida de once valores en píxeles. v2.0 ↔ ## Dos contextos `.m-*` separa el elemento de su entorno y `.p-*` separa el contenido de su borde. 11 ## Escala compartida Once valores desde 0px hasta 96px mantienen el mismo ritmo en margin y padding. 8 ## Ocho breakpoints Todas las familias admiten variantes desde 640px hasta 6016px. i ## La escala usa píxeles El sufijo coincide con el valor del token: `.p-24` aplica `var(--q-units-24)`, cuyo valor actual es 24px. Código + resultado ## Compara espacio exterior e interior Cada opción aplica clases reales sobre el mismo elemento para mostrar qué zona modifica. HTML Resultado aplicado Interior · 24px Área violeta = espacio aplicado Contenido .p-24 aplica 24px en los cuatro lados; las franjas violetas señalan toda el área de padding. ```html
Contenido
``` .m-24 aplica 24px exteriores en los cuatro lados; las franjas violetas muestran el margen real alrededor del elemento. ```html
Contenido
``` .px-32 aplica exactamente 32px a izquierda y derecha; las franjas violetas señalan ambas zonas de padding. ```html
Contenido
``` .mt-32 aplica 32px únicamente sobre el elemento; la franja violeta muestra ese margen superior. ```html
Contenido
``` El padding comienza en 8px, cambia a 16px desde 768px y a 32px desde 1280px. ```html
Contenido
``` Familias y direcciones ## Elige primero el contexto y después el eje Margin controla el exterior; padding controla el interior. Ambas familias ofrecen todos los lados, ejes y lados individuales. `.m-{valor}` Exterior Elemento ### Margin Separa el borde del elemento respecto de los elementos o límites que lo rodean. Ejemplo: `.m-24` `.p-{valor}` Interior Contenido ### Padding Separa el contenido del borde del propio elemento y aumenta su caja visible. Ejemplo: `.p-24` `.m-* / .p-*` Todos los lados Aplica el mismo valor arriba, derecha, abajo e izquierda. `.mx-* / .px-*` Eje horizontal Aplica el valor a izquierda y derecha. `.my-* / .py-*` Eje vertical Aplica el valor arriba y abajo. `.*t / .*r / .*b / .*l` Lado individual Controla top, right, bottom o left por separado. Escala ## Once valores aplicados Cambia de pestaña para observar la misma escala como separación exterior o interior. Espacio exterior La zona violeta queda fuera del borde del elemento. `margin` Elemento `.m-0` 0px Elemento `.m-4` 4px Elemento `.m-8` 8px Elemento `.m-12` 12px Elemento `.m-16` 16px Elemento `.m-24` 24px Elemento `.m-32` 32px Elemento `.m-40` 40px Elemento `.m-48` 48px Elemento `.m-64` 64px Elemento `.m-96` 96px Espacio interior La zona violeta queda entre el contenido y el borde del elemento. `padding` Contenido `.p-0` 0px Contenido `.p-4` 4px Contenido `.p-8` 8px Contenido `.p-12` 12px Contenido `.p-16` 16px Contenido `.p-24` 24px Contenido `.p-32` 32px Contenido `.p-40` 40px Contenido `.p-48` 48px Contenido `.p-64` 64px Contenido `.p-96` 96px Variantes responsivas ## Ocho puntos de activación Inserta el breakpoint entre la dirección y el valor: `.p-768-16`, `.mx-1024-24` o `.pt-1280-32`. `640` min-width .p-640-24 `768` min-width .p-768-24 `1024` min-width .p-1024-24 `1280` min-width .p-1280-24 `1536` min-width .p-1536-24 `2560` min-width .p-2560-24 `3840` min-width .p-3840-24 `6016` min-width .p-6016-24 HTML ```html
Contenido adaptable
``` El padding comienza en 8px, pasa a 16px desde 768px y a 32px desde 1280px. Referencia ## Clases disponibles Todas las familias aceptan los valores 0, 4, 8, 12, 16, 24, 32, 40, 48, 64 y 96. | Clases | Propiedad | Dirección | Ejemplo | | --- | --- | --- | --- | | .m-{valor} | margin | Cuatro lados. | .m-16 | | .mx-{valor} / .my-{valor} | margin-* | Eje horizontal o vertical. | .mx-24 | | .mt\|mr\|mb\|ml-{valor} | margin-* | Un lado específico. | .mt-32 | | .p-{valor} | padding | Cuatro lados. | .p-16 | | .px-{valor} / .py-{valor} | padding-* | Eje horizontal o vertical. | .py-24 | | .pt\|pr\|pb\|pl-{valor} | padding-* | Un lado específico. | .pl-32 | | .{familia}-{bp}-{valor} | La propiedad de la familia | Desde el breakpoint indicado. | .px-1024-32 | Responsive Las variantes se activan en 640, 768, 1024, 1280, 1536, 2560, 3840 y 6016 píxeles. Recomendaciones ## Buenas prácticas de spacing 01 ### Usa la escala Elige el valor disponible más cercano en lugar de introducir medidas arbitrarias. 02 ### Margin para el exterior Separa componentes entre sí con margin; evita usarlo para crear aire dentro de una caja. 03 ### Padding para el interior Usa padding para proteger el contenido y ampliar el área visual o interactiva del componente. 04 ### Gap entre hermanos Cuando varios hijos comparten un contenedor flex o grid, usa gap para separarlos uniformemente. --- # States (variantes interactivas) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/states.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Interacción Aplica estilos en respuesta a hover, foco, activación y controles deshabilitados; también coordina elementos relacionados mediante group y peer. v2.0 7 ## Siete contextos Hover, focus, focus-visible, active, disabled, group y peer cubren los estados frecuentes. : ## Sintaxis explícita El prefijo indica cuándo actúa la utilidad: `hover:text-secondary`. ⌨ ## Foco visible Las variantes focus-visible conservan una señal clara para la navegación con teclado. i ## Los dos puntos forman parte del nombre En HTML escribe `hover:text-secondary`. El escape `hover\:text-secondary` se utiliza únicamente dentro del selector CSS. Código + resultado ## Compara todas las familias de estado Selecciona una opción y prueba el resultado con puntero, teclado o el control nativo correspondiente. ¿Cambia el propio elemento? Usa `hover:`, `focus:` o `active:` ¿El control no está disponible? Usa el atributo HTML y `disabled:` ¿Responde otro elemento? Usa `group-*` o `peer-*` HTML ```html Ver proyecto ``` Resultado aplicado HOVER · 4 PROPIEDADES Pasa el cursor sobre el control Ver proyecto → Opciones: texto `primary`, `secondary`, `success`, `warning`, `danger`, `info`, `muted` y `text`; fondo y borde admiten los siete colores semánticos; opacidad admite 50, 75 y 100. HTML ```html ``` Resultado aplicado FOCUS · 4 OPCIONES Haz clic o usa Tab Opciones: `focus:outline-none`, `focus:text-primary`, `focus:bg-primary` y `focus:border-primary`. HTML ```html ``` Resultado aplicado FOCUS VISIBLE · TECLADO Usa Tab para mostrar el anillo Opciones: `focus-visible:outline-none`, `focus-visible:ring` y `focus-visible:ring-2`. HTML ```html ``` Resultado aplicado ACTIVE · PRESIONA Mantén presionado el control Opciones: `active:scale-95`, `active:opacity-75` y `active:bg-primary`. HTML ```html ``` Resultado aplicado DISABLED · ATRIBUTO NATIVO Control no disponible Opciones: `disabled:opacity-30`, `disabled:opacity-50`, `disabled:pointer-events-none` y `disabled:cursor-not-allowed`. HTML ```html
Proyecto Ver detalle
``` Resultado aplicado GROUP · CONTENEDOR + HIJO Pasa el cursor por toda la tarjeta Proyecto residencial Ver detalle → Opciones: `group`, `group-hover:text-primary`, `group-hover:bg-primary`, `group-hover:border-primary` y `group-hover:opacity-75`. HTML ```html ``` Resultado aplicado PEER · HERMANO ANTERIOR Marca la casilla o enfócala con Tab Acepto las condiciones Opciones: `peer`, tres variantes `peer-checked:*`, `peer-focus:ring` y `peer-focus-visible:ring`. Puntero ## Hover para color, fondo, borde y opacidad El prefijo `hover:` aplica la declaración mientras el puntero permanece sobre el propio elemento. `hover:text-*` TEXTO #### Color tipográfico ```html Ver proyecto ``` Resultado Ver proyecto → Cambia el color sin modificar fondo ni borde. `hover:bg-*` FONDO #### Superficie interactiva ```html ``` Resultado `bg-primary` es una superficie clara; texto y borde primarios mantienen el contraste. `hover:border-*` BORDE #### Énfasis de contorno ```html Más información ``` Resultado Más información → Requiere que el elemento ya tenga estructura de borde. `hover:opacity-*` OPACIDAD #### Intensidad visual ```html Proyecto ``` Resultado ![Interior de un proyecto arquitectónico](../templates/album/img/gallery-interior.jpg) También admite `hover:opacity-50` y `hover:opacity-100`. Teclado y formularios ## Focus y focus-visible cumplen funciones distintas `focus:` responde a cualquier foco; `focus-visible:` limita la señal visual a los casos en que el navegador la considera necesaria. | Clase | Efecto | Uso recomendado | | --- | --- | --- | | focus:outline-none | Elimina el outline nativo. | Sólo cuando se proporciona una alternativa visible. | | focus:text-primary | Cambia el color del texto. | Enlaces y controles con etiqueta. | | focus:bg-primary | Cambia el fondo. | Controles que necesitan énfasis adicional. | | focus:border-primary | Cambia el color del borde. | Campos con borde previamente definido. | | focus-visible:ring | Outline de 2px. | Navegación visible con teclado. | | focus-visible:ring-2 | Outline de 3px. | Énfasis reforzado en acciones principales. | No elimines el foco sin reemplazo Si utilizas `focus-visible:outline-none`, combínalo con `focus-visible:ring` o `focus-visible:ring-2`. Respuesta y disponibilidad ## Active y disabled Active comunica la pulsación actual; disabled refleja controles nativos que no pueden ejecutarse. `active:scale-95` ACTIVE #### Escala al 95% Produce una respuesta física breve durante la pulsación. `active:opacity-75` ACTIVE #### Opacidad al 75% Reduce temporalmente la intensidad del control. `active:bg-primary` ACTIVE #### Fondo primario Refuerza el estado presionado con color. `disabled:opacity-50` DISABLED #### Opacidad al 50% Comunica indisponibilidad sin ocultar el control. `disabled:pointer-events-none` DISABLED #### Sin eventos de puntero Evita interacciones del puntero en un control deshabilitado. `disabled:cursor-not-allowed` DISABLED #### Cursor no permitido Añade una pista visual; no reemplaza el atributo HTML `disabled`. Referencia oficial ## Clases disponibles Esta tabla refleja el archivo fuente de la versión 2.0.0-alpha.4. | Familia | Clases disponibles | | --- | --- | | Hover · texto | hover:text-primary , hover:text-secondary , hover:text-success , hover:text-warning , hover:text-danger , hover:text-info , hover:text-muted , hover:text | | Hover · fondo | hover:bg-primary , hover:bg-secondary , hover:bg-success , hover:bg-warning , hover:bg-danger , hover:bg-info , hover:bg-muted | | Hover · borde | hover:border-primary , hover:border-secondary , hover:border-success , hover:border-warning , hover:border-danger , hover:border-info , hover:border-muted | | Hover · opacidad | hover:opacity-50 , hover:opacity-75 , hover:opacity-100 | | Focus | focus:outline-none , focus:text-primary , focus:bg-primary , focus:border-primary | | Focus visible | focus-visible:outline-none , focus-visible:ring , focus-visible:ring-2 | | Active | active:scale-95 , active:opacity-75 , active:bg-primary | | Disabled | disabled:opacity-50 , disabled:opacity-30 , disabled:pointer-events-none , disabled:cursor-not-allowed | | Group hover | group , group-hover:text-primary , group-hover:bg-primary , group-hover:border-primary , group-hover:opacity-75 | | Peer | peer , peer-checked:text-primary , peer-checked:bg-primary , peer-checked:border-primary , peer-focus:ring , peer-focus-visible:ring | Recomendaciones ## Estados comprensibles y accesibles 01 ### No dependas sólo de hover Toda acción debe funcionar también con teclado, tacto y tecnologías de asistencia. 02 ### Conserva el foco Evita eliminar el outline si no añades una señal visible equivalente o superior. 03 ### Usa atributos nativos `disabled:*` necesita el atributo `disabled`; la apariencia no sustituye la semántica. 04 ### Suaviza con intención Combina estados con Transition y respeta siempre `prefers-reduced-motion`. --- # Portafolio fotográfico > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/template-album.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Template 06 Una experiencia visual inmersiva para presentar especialidades, proyectos y perfil de autor. Framework only ✓ ## Sin CSS adicional La página utiliza únicamente HTML semántico, componentes y clases públicas incluidas en QuicklyCSS V2. No contiene estilos embebidos ni clases específicas del template. Aplicación del template ## Un portafolio que pone la imagen primero El template Álbum presenta una portada fotográfica de gran formato, tres especialidades, un mosaico de proyectos y un perfil profesional con indicadores de experiencia. La composición se inspira en los portafolios editoriales clásicos, pero utiliza una jerarquía más limpia y contemporánea. El carrusel, las Cards overlay, la grilla de doce columnas, las barras de progreso, los badges y la navegación colapsable provienen del framework. El paquete integra todos los recursos necesarios para ejecutarse de forma autónoma. ![Vista del template Álbum con portada fotográfica, especialidades y portafolio visual](assets/img/template-album.png) Portafolio fotográfico construido únicamente con QuicklyCSS V2. [Abrir página](../templates/album/index.html) [Descargar template](../dist/templates/quicklycss-template-album.zip) Arquitectura ## Composición del template La plantilla coordina estructura, contenidos, utilidades y componentes sin introducir una capa paralela de estilos. 01 ### Portada inmersiva El carrusel combina fotografías de gran formato, mensajes breves y controles accesibles. 02 ### Mosaico visual La selección de trabajos alterna escalas dentro de una grilla responsive de doce columnas. 03 ### Perfil y journal La trayectoria, las capacidades y las notas editoriales completan el relato del estudio. --- # Journal visual > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/template-blog.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Template 05 Una portada editorial serena con historias destacadas, archivo visual y suscripción. Framework only ✓ ## Sin CSS adicional La página utiliza únicamente HTML semántico, componentes y clases públicas incluidas en QuicklyCSS V2. No contiene estilos embebidos ni clases específicas del template. Aplicación del template ## Una revista visual, sobria y adaptable El template Blog propone una cabecera centrada, una portada asimétrica y un archivo de artículos en tres columnas. La escala de las imágenes, los metadatos compactos y el espacio en blanco construyen una lectura editorial más elegante. La navegación colapsable, las proporciones de imagen, la grilla responsive, el grupo de entrada y todos los estados visuales provienen de QuicklyCSS V2. El paquete funciona de manera autónoma, sin estilos embebidos ni hojas específicas del template. ![Vista del template Blog con cabecera centrada, portada asimétrica, archivo visual y newsletter](assets/img/template-blog.png) Journal visual construido únicamente con QuicklyCSS V2. [Abrir página](../templates/blog/index.html) [Descargar template](../dist/templates/quicklycss-template-blog.zip) Arquitectura ## Composición del template La plantilla coordina estructura, contenidos, utilidades y componentes sin introducir una capa paralela de estilos. 01 ### Portada asimétrica Dos historias de distinta escala construyen una entrada editorial clara. 02 ### Archivo visual Nueve publicaciones se ordenan en una grilla responsive de proporción constante. 03 ### Cierre editorial Temas, navegación y newsletter completan el recorrido sin distraer de la lectura. --- # Empresa comercial > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/template-company.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Template 04 Una tienda editorial de mobiliario con colecciones, categorías, productos, contenido y conversión. Framework only ✓ ## Sin CSS adicional La página utiliza únicamente HTML semántico, componentes y clases públicas incluidas en QuicklyCSS V2. No contiene estilos embebidos ni clases específicas del template. Aplicación del template ## Una tienda de mobiliario sobria y completa El template Empresa transforma la composición corporativa anterior en una experiencia comercial inspirada en catálogos editoriales: portada con carrusel, promociones, beneficios, novedades, categorías y productos destacados. Incluye recursos fotográficos originales, navegación responsive, dos carruseles nativos, tarjetas de producto, contenido editorial, newsletter y footer comercial. Todo el comportamiento proviene del framework y el paquete funciona sin dependencias externas. ![Vista del template Empresa con tienda de mobiliario, carrusel y productos](assets/img/template-company.png) Tienda editorial construida únicamente con QuicklyCSS V2. [Abrir página](../templates/company/index.html)[Descargar template](../dist/templates/quicklycss-template-company.zip) Arquitectura ## Composición del template La plantilla coordina estructura, contenidos, utilidades y componentes sin introducir una capa paralela de estilos. 01 ### Portada comercial Navbar, slider principal y promociones laterales presentan la colección con una jerarquía inmediata. 02 ### Catálogo editorial Novedades, categorías y más vendidos combinan Carousel, Cards, imágenes y utilidades responsive. 03 ### Contenido y conversión Bloques promocionales, historias, newsletter y footer completan una experiencia comercial extensa. --- # Portada corporativa > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/template-cover.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Template 03 Una portada empresarial extensa con slider, presentación comercial, servicios, capacidades, portafolio, caso destacado y cierre corporativo. Framework only ✓ ## Sin CSS adicional La página utiliza únicamente elementos HTML y clases incluidas en QuicklyCSS V2. No contiene estilos embebidos ni clases específicas de la plantilla. Aplicación del template ## Una portada corporativa extensa y modular El template Cover reproduce una secuencia empresarial clásica con franja informativa, navegación detallada, slider, presentación comercial, servicios, franja destacada, capacidades y portafolio. Las imágenes son recursos originales y el contenido fue adaptado para Quickly. El caso editorial, la llamada final y el footer amplio cierran una página pensada para consultoras, agencias y empresas de servicios. Toda la experiencia utiliza utilidades responsive y componentes nativos de QuicklyCSS V2, sin CSS ni JavaScript específico de la plantilla. ![Vista del template Cover corporativo de Quickly con slider, servicios y portafolio](assets/img/template-cover.png) Portada corporativa construida únicamente con QuicklyCSS V2. [Abrir página](../templates/cover/index.html) [Descargar template](../dist/templates/quicklycss-template-cover.zip) Arquitectura ## Composición del template La plantilla coordina estructura, contenidos, utilidades y componentes sin introducir una capa paralela de estilos. 01 ### Presentación comercial Una franja de contacto, navegación con subtítulos y slider editorial presentan la propuesta con una jerarquía inmediata. 02 ### Servicios y portafolio La presentación, los cuatro servicios, las capacidades y una cuadrícula de ocho proyectos desarrollan la historia del estudio. 03 ### Caso y conversión Un caso destacado, la llamada final y el footer corporativo completan el recorrido con un siguiente paso claro. --- # Acceso elegante y seguro > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/template-login.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Template 07 Una experiencia de autenticación minimalista, sobria y completamente adaptable. Framework only ✓ ## Sin CSS adicional La página utiliza únicamente HTML semántico, componentes y clases públicas incluidas en QuicklyCSS V2. No contiene estilos embebidos ni clases específicas del template. Aplicación del template ## Autenticación clara con una presencia editorial El template Inicio de sesión combina una presentación de marca con un formulario compacto. La composición oscura, el contraste medido y los acentos azules llevan la referencia visual a una interfaz de acceso real, sin distracciones ni elementos decorativos innecesarios. Incluye campos accesibles, opción para mantener la sesión, recuperación de contraseña, solicitud de acceso y adaptación automática a pantallas pequeñas. El paquete funciona de forma autónoma y utiliza exclusivamente QuicklyCSS V2. ![Vista del template de inicio de sesión de Quickly con panel de marca y formulario oscuro](assets/img/template-login.png) Inicio de sesión minimalista construido únicamente con QuicklyCSS V2. [Abrir página](../templates/login/index.html) [Descargar template](../dist/templates/quicklycss-template-login.zip) Arquitectura ## Composición del template La plantilla coordina estructura, formulario, utilidades responsive y estados visuales sin introducir una capa paralela de estilos. 01 ### Identidad y contexto Un panel editorial presenta la marca, el propósito del espacio privado y la versión del sistema. 02 ### Acceso enfocado Correo, contraseña, persistencia y recuperación forman un recorrido breve con una acción principal inequívoca. 03 ### Respuesta adaptable La composición de dos paneles se reorganiza en pantallas pequeñas manteniendo contraste, ritmo y legibilidad. --- # Dashboard analítico > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/template-panel.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Template 01 Un centro de control completo con navegación lateral, indicadores, actividad, tablas y visualizaciones de datos. Framework only ✓ ## Sin CSS adicional La página utiliza únicamente elementos HTML y clases incluidas en QuicklyCSS V2. No contiene estilos embebidos ni clases específicas de la plantilla. Aplicación del template ## Una vista completa para tomar decisiones El template Panel reproduce la arquitectura de un dashboard profesional: navegación persistente, cuatro indicadores principales, visión de audiencia, distribución por dispositivo, rankings, actividad y reportes tabulares. La interfaz está construida con el layout, componentes y utilidades públicas de QuicklyCSS V2. Chart.js actúa únicamente como motor para representar los datos dentro de los componentes visuales. ![Vista del dashboard analítico con navegación lateral, indicadores, gráficos, tablas y actividad reciente](assets/img/template-panel.png) Dashboard responsive compuesto con QuicklyCSS V2. [Abrir página](../templates/panel/index.html) [Descargar template](../dist/templates/quicklycss-template-panel.zip) Arquitectura ## Composición del template La plantilla coordina estructura, contenidos, utilidades y componentes sin introducir una capa paralela de estilos. 01 ### Navegación Navbar superior y menú lateral oscuro organizan las áreas del dashboard. 02 ### Indicadores Cards y Badges resumen sesiones, duración, ingresos y conversiones. 03 ### Datos operativos Gráficos, tablas y actividad reciente permiten comparar el rendimiento. --- # Experiencia audiovisual > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/template-video.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Template 02 Un portal de streaming con reproductores de YouTube y múltiples carruseles de contenido. Framework only ✓ ## Sin CSS adicional La página utiliza únicamente elementos HTML y clases incluidas en QuicklyCSS V2. No contiene estilos embebidos ni clases específicas de la plantilla. Aplicación del template ## Una plataforma audiovisual completa El template Video adopta el patrón de una plataforma de streaming moderna: búsqueda, reproductores protagonistas, estrenos y filas navegables de contenido, sin una barra lateral que reduzca el área útil. Incluye tres estrenos en el carrusel principal y catorce videos reproducibles dentro de dos colecciones navegables. Los títulos, categorías y metadatos construyen una experiencia editorial consistente utilizando únicamente clases incluidas en QuicklyCSS V2. ![Vista del template Video con portada editorial, estrenos y colecciones](assets/img/template-video.png) Experiencia audiovisual construida únicamente con QuicklyCSS V2. [Abrir página](../templates/video/index.html) [Descargar template](../dist/templates/quicklycss-template-video.zip) Arquitectura ## Composición del template La plantilla coordina estructura, contenidos, utilidades y componentes sin introducir una capa paralela de estilos. 01 ### Navegación directa Un navbar superior organiza la marca, la búsqueda, las categorías y las acciones sin restar espacio al contenido. 02 ### YouTube protagonista El carrusel principal integra tres producciones en alta resolución con controles nativos y navegación manual. 03 ### Catálogo reproducible Cada tarjeta de las colecciones contiene un reproductor real de YouTube, textos editoriales y metadatos relevantes. --- # Páginas completas con clases del framework > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/templates.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Documentación · Templates Siete referencias reconstruidas desde las plantillas históricas de QuicklyCSS y adaptadas al lenguaje modular de V2. 7 templates i ## Framework only Cada ejemplo funciona sin CSS adicional: utiliza exclusivamente clases disponibles en la compilación oficial. Catálogo ## Selecciona una plantilla Cada plantilla dispone de página documental, vista previa responsive y código completo. 01 ### Panel Panel administrativo con navegación, métricas y estados. [Ver template](template-panel.md) 02 ### Video Portada audiovisual con reproductor y contenido relacionado. [Ver template](template-video.md) 03 ### Portada Hero de producto con mensaje principal y llamadas a la acción. [Ver template](template-cover.md) 04 ### Empresa Tienda editorial con colecciones, productos, categorías y contenido comercial. [Ver template](template-company.md) 05 ### Blog Listado editorial con artículo destacado y publicaciones. [Ver template](template-blog.md) 06 ### Álbum Galería responsive con tarjetas y paginación. [Ver template](template-album.md) 07 ### Inicio de sesión Acceso minimalista con identidad, contraste y formulario responsive. [Ver template](template-login.md) Criterio de construcción ## Composición antes que personalización 01 ### Clases existentes No se crean selectores exclusivos para una plantilla. 02 ### Responsive nativo Grid, contenedores y variantes adaptan cada página. 03 ### Componentes reales Navbar, cards, formularios y paginación conservan su API. --- # Tipography (escala y composición) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/tipography.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Contenidos · Tipografía Construye jerarquías legibles mediante tamaños, pesos, interlineados y espaciados que comparten los tokens tipográficos de QuicklyCSS. v2.0 Aa ## Escala de 11 a 100px Incluye textos pequeños, cuerpo, títulos y displays dentro de una progresión común. 900 ## Nueve pesos Recorre el estándar tipográfico desde thin 100 hasta black 900. ↕ ## Ritmo configurable Controla interlineado, tracking y espacio entre palabras con escalas semánticas. i ## Composición independiente Combina una clase de tamaño como `.font-size-4` con peso, interlineado o tracking según las necesidades del contenido. ✦ ## Responsive y fluida La escala ofrece variantes por breakpoint con `.font-size-{breakpoint}-{nivel}` y seis tamaños fluidos basados en `clamp()`. Código + resultado ## Ejemplos reales de tipografía Selecciona una utilidad para comparar el marcado y su efecto tipográfico real. HTML Resultado aplicado 24px Componente real .font-size-4 aplica 24px y su line-height asociado de 1.4. ```html

Texto de veinticuatro píxeles

``` .font-bold aplica el peso tipográfico 700. ```html

Texto con peso bold

``` .leading-loose aplica un line-height unitless de 2. ```html

El interlineado amplio mejora la separación cuando un texto ocupa varias líneas dentro de un bloque.

``` .tracking-widest aplica letter-spacing: 0.1em y escala con el tamaño del texto. ```html

Letras con tracking amplio

``` .word-wider aplica word-spacing: 0.1em. ```html

Palabras con separación ampliada

``` .italic aplica font-style: italic sin modificar el peso o el tamaño. ```html

Texto en estilo cursivo

``` .font-size-fluid-1 utiliza clamp() para escalar aproximadamente entre 24 y 48px. ```html

Título fluido

``` Vista general ## Escala tipográfica Escala fija completa. Cada clase también establece el interlineado asociado a su tamaño. Aa `.font-size-01 · 11px` Aa `.font-size-1 · 16px` Aa `.font-size-2 · 18px` Aa `.font-size-3 · 20px` Aa `.font-size-4 · 24px` Aa `.font-size-5 · 30px` Aa `.font-size-6 · 36px` Aa `.font-size-7 · 48px` Aa `.font-size-8 · 60px` Aa `.font-size-9 · 72px` Aa `.font-size-10 · 80px` Aa `.font-size-11 · 88px` Aa `.font-size-12 · 96px` Aa `.font-size-13 · 100px` Referencia ## Clases tipográficas Los grupos siguientes corresponden a utilidades existentes y pueden combinarse sobre el mismo elemento. | Clases | Escala | Propiedad | Uso recomendado | | --- | --- | --- | --- | | .font-size-01 | 11px · 1.4 | Font size + line height | Tamaño compacto mínimo para texto auxiliar e iconos. | | .font-size-1 | 16px · 1.5 | Font size + line height | Cuerpo de texto principal. | | .font-size-2 | 18px · 1.48 | Font size + line height | Entradillas y cuerpo destacado. | | .font-size-3 | 20px · 1.45 | Font size + line height | Subtítulos y destacados breves. | | .font-size-4 | 24px · 1.4 | Font size + line height | Títulos de sección compactos. | | .font-size-5 | 30px · 1.35 | Font size + line height | Encabezados secundarios. | | .font-size-6 | 36px · 1.3 | Font size + line height | Encabezados principales. | | .font-size-7 | 48px · 1.25 | Font size + line height | Títulos destacados. | | .font-size-8 | 60px · 1.2 | Font size + line height | Display de página. | | .font-size-9 | 72px · 1.16 | Font size + line height | Hero de alta jerarquía. | | .font-size-10 | 80px · 1.12 | Font size + line height | Display amplio. | | .font-size-11 | 88px · 1.08 | Font size + line height | Titular promocional de gran formato. | | .font-size-12 | 96px · 1.05 | Font size + line height | Display de impacto. | | .font-size-13 | 100px · 1.02 | Font size + line height | Máximo nivel de la escala fija. | | .font-size-fluid-1 | 24px → 48px | clamp() | Título fluido moderado. | | .font-size-fluid-2 | 32px → 64px | clamp() | Encabezado fluido de sección. | | .font-size-fluid-3 | 40px → 80px | clamp() | Titular principal adaptable. | | .font-size-fluid-4 | 48px → 96px | clamp() | Hero amplio adaptable. | | .font-size-fluid-5 | 56px → 112px | clamp() | Display promocional adaptable. | | .font-size-fluid-6 | 64px → 128px | clamp() | Máximo display fluido. | | .font-size-640-{nivel} | ≥640px | Font size responsive | Ajuste desde pantallas pequeñas horizontales. | | .font-size-768-{nivel} | ≥768px | Font size responsive | Ajuste desde tablet. | | .font-size-1024-{nivel} | ≥1024px | Font size responsive | Ajuste desde escritorio pequeño. | | .font-size-1280-{nivel} | ≥1280px | Font size responsive | Ajuste desde escritorio estándar. | | .font-size-1536-{nivel} | ≥1536px | Font size responsive | Ajuste para escritorio amplio. | | .font-size-1920-{nivel} | ≥1920px | Font size responsive | Ajuste para pantallas Full HD. | | .font-size-2560-{nivel} | ≥2560px | Font size responsive | Ajuste para pantallas QHD. | | .font-size-3840-{nivel} | ≥3840px | Font size responsive | Ajuste para pantallas 4K. | | .font-size-6016-{nivel} | ≥6016px | Font size responsive | Ajuste para formatos de muy alta resolución. | | .font-thin | 100 | Font weight | Titulares decorativos muy ligeros. | | .font-extralight | 200 | Font weight | Jerarquía ligera de gran tamaño. | | .font-light | 300 | Font weight | Texto editorial ligero. | | .font-regular | 400 | Font weight | Cuerpo y encabezados regulares. | | .font-medium | 500 | Font weight | Énfasis moderado y controles. | | .font-semibold | 600 | Font weight | Subtítulos y énfasis claro. | | .font-bold | 700 | Font weight | Títulos y acciones destacadas. | | .font-extrabold | 800 | Font weight | Titulares de alto impacto. | | .font-black | 900 | Font weight | Máximo contraste tipográfico. | | .leading-none | 1 | Line height | Displays de una línea. | | .leading-tight | 1.25 | Line height | Títulos grandes de varias líneas. | | .leading-snug | 1.375 | Line height | Subtítulos compactos. | | .leading-normal | 1.5 | Line height | Texto de lectura general. | | .leading-relaxed | 1.625 | Line height | Párrafos de lectura prolongada. | | .leading-loose | 2 | Line height | Bloques con máxima separación vertical. | | .tracking-tighter | -0.05em | Letter spacing | Titulares grandes muy compactos. | | .tracking-tight | -0.025em | Letter spacing | Títulos sutilmente compactos. | | .tracking-normal | 0 | Letter spacing | Espaciado original de la fuente. | | .tracking-wide | 0.025em | Letter spacing | Etiquetas con apertura ligera. | | .tracking-wider | 0.05em | Letter spacing | Eyebrows y texto en mayúsculas. | | .tracking-widest | 0.1em | Letter spacing | Máxima separación entre caracteres. | | .word-tighter | -0.05em | Word spacing | Compactar frases cortas. | | .word-tight | -0.025em | Word spacing | Reducir sutilmente el ritmo horizontal. | | .word-normal | 0 | Word spacing | Espaciado original entre palabras. | | .word-wide | 0.05em | Word spacing | Aumentar ligeramente la separación. | | .word-wider | 0.1em | Word spacing | Texto breve con ritmo abierto. | | .word-widest | 0.2em | Word spacing | Máxima separación entre palabras. | | .italic | Italic | Font style | Énfasis editorial o citas. | | .not-italic | Normal | Font style | Restablecer el estilo regular. | | .uppercase | Uppercase | Text transform | Etiquetas y encabezados breves. | | .lowercase | Lowercase | Text transform | Normalizar visualmente texto en mayúsculas. | | .capitalize | Capitalize | Text transform | Inicial en mayúscula para cada palabra. | | .normal-case | None | Text transform | Restablecer la escritura original. | | .underline | Underline | Text decoration | Enlaces o énfasis subrayado. | | .line-through | Line-through | Text decoration | Contenido eliminado o precio anterior. | | .no-underline | None | Text decoration | Eliminar una decoración heredada. | | .text-left | Left | Text align | Lectura natural en idiomas de izquierda a derecha. | | .text-center | Center | Text align | Títulos cortos, mensajes vacíos y llamadas visuales. | | .text-right | Right | Text align | Valores numéricos o contenido asociado al borde derecho. | | .text-justify | Justify | Text align | Bloques editoriales anchos cuando el espaciado resultante sea legible. | Breakpoints reales 640, 768, 1024, 1280, 1536, 1920, 2560, 3840 y 6016 para la escala de tamaños. Recomendaciones ## Buenas prácticas tipográficas 01 ### Jerarquía limitada Define pocos niveles por vista para que títulos, cuerpo y metadatos sean reconocibles. 02 ### Interlineado legible Usa leading más amplio en párrafos y valores compactos sólo en títulos grandes. 03 ### Pesos disponibles Comprueba que la fuente cargada incluya el peso solicitado para evitar síntesis visual. 04 ### Fluidez con intención Reserva los tamaños fluidos para encabezados que realmente deban responder al viewport. --- # Transition (cambios suaves) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/transition.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Movimiento Combina propiedad, duración, curva y retraso para controlar cómo responde un elemento cuando cambia de estado. v2.0 4 ## Cuatro piezas Propiedad, duración, curva y delay se combinan sin repetir una declaración completa. 13 ## Escala ampliada Duraciones desde 50ms hasta 2000ms para microinteracciones y movimientos largos. ✓ ## Movimiento reducido La hoja respeta `prefers-reduced-motion` y elimina duración y delay. i ## Una transición necesita un cambio Estas clases definen cómo se interpola un estado, pero el cambio debe provenir de `:hover`, `:focus`, una clase de estado o JavaScript. Código + resultado ## Compara propiedades, tiempos y curvas Cambia de pestaña y pasa el cursor sobre el resultado para ejecutar la transición seleccionada. HTML Resultado aplicado Transform · 500ms Pasa el cursor por el panel Transition Hover .trans-transform limita la interpolación a transform; .duration-500 y .ease-out controlan su ritmo. ```html ``` .trans-opacity evita que otros cambios visuales adopten la transición. ```html ``` .trans-colors interpola texto, fondo, borde, fill y stroke. ```html ``` .duration-1500 permite observar una transición prolongada sin modificar la propiedad ni la curva. ```html ``` .delay-700 espera 700ms antes de comenzar; la duración sigue siendo 500ms. ```html ``` .ease-bounce sobrepasa ligeramente el destino antes de estabilizarse. ```html ``` Mapa del sistema ## Construye la transición con cuatro decisiones Cada grupo modifica una parte independiente de la declaración final. 1. ¿Qué cambia? Usa `.trans-*` 2. ¿Cuánto dura? Usa `.duration-*` 3. ¿Cómo avanza? Usa `.ease-*` 4. ¿Cuándo comienza? Usa `.delay-*` ### Propiedades `.trans` Uso rápido #### all Atajo general para cualquier propiedad animable. `.trans-all` Composición #### all Declara de forma explícita una transición general. `.trans-colors` Estados visuales #### color + fondos + bordes Limita el cambio a propiedades de color. `.trans-opacity` Visibilidad #### opacity Controla apariciones y cambios de transparencia. `.trans-transform` Movimiento #### transform Optimiza desplazamientos, escalas y rotaciones. `.trans-shadow` Profundidad #### box-shadow + filter + text-shadow Suaviza elevación, filtros y sombras de texto. `.trans-filter` Filtros #### filter + backdrop-filter Aísla desenfoque, contraste y filtros visuales. `.trans-size` Tamaño #### width + height + límites Anima dimensiones y sus valores mínimos o máximos. `.trans-spacing` Espaciado #### margin + padding + gap Anima separación interior, exterior y entre elementos. `.trans-position` Posición #### top + right + bottom + left + inset Controla cambios de posición en elementos posicionados. `.trans-none` Reset #### none Desactiva cualquier transición aplicada previamente. Escala temporal ## Duraciones y delays combinables La duración controla el recorrido; el delay añade una espera antes de iniciarlo. ### Duración `50` ms .duration-50 `75` ms .duration-75 `100` ms .duration-100 `150` ms .duration-150 `200` ms .duration-200 `250` ms .duration-250 `300` ms .duration-300 `400` ms .duration-400 `500` ms .duration-500 `700` ms .duration-700 `1000` ms .duration-1000 `1500` ms .duration-1500 `2000` ms .duration-2000 ### Delay `0` ms .delay-0 `50` ms .delay-50 `75` ms .delay-75 `100` ms .delay-100 `150` ms .delay-150 `200` ms .delay-200 `300` ms .delay-300 `500` ms .delay-500 `700` ms .delay-700 `1000` ms .delay-1000 Composición `.trans-transform.duration-500.delay-150.ease-out` aplica las cuatro decisiones sin crear una clase nueva. Ritmo ## Ocho curvas de aceleración La curva cambia la percepción del movimiento sin modificar su duración total. `.ease-default` CURVA #### ease Equilibrada para cambios generales. `.ease-linear` CURVA #### linear Mantiene velocidad constante. `.ease-in` CURVA #### cubic-bezier(.4, 0, 1, 1) Comienza lentamente y acelera. `.ease-out` CURVA #### cubic-bezier(0, 0, .2, 1) Comienza rápido y desacelera. `.ease-in-out` CURVA #### cubic-bezier(.4, 0, .2, 1) Suaviza tanto la entrada como la salida. `.ease-smooth` CURVA #### cubic-bezier(.22, 1, .36, 1) Produce una llegada larga y fluida. `.ease-snappy` CURVA #### cubic-bezier(.2, .8, .2, 1) Responde rápido sin perder suavidad. `.ease-bounce` CURVA #### cubic-bezier(.34, 1.56, .64, 1) Sobrepasa ligeramente el destino y regresa. Referencia ## Clases disponibles Combina una clase de cada grupo; si omites un grupo se utiliza su valor predeterminado. | Grupo | Patrón | Opciones | Valor predeterminado | | --- | --- | --- | --- | | Propiedad | .trans-* | all, colors, opacity, transform, shadow, filter, size, spacing, position, none | all | | Duración | .duration-{ms} | 50, 75, 100, 150, 200, 250, 300, 400, 500, 700, 1000, 1500, 2000 | 200ms | | Curva | .ease-* | default, linear, in, out, in-out, smooth, snappy, bounce | ease | | Delay | .delay-{ms} | 0, 50, 75, 100, 150, 200, 300, 500, 700, 1000 | 0ms | Recomendaciones ## Buenas prácticas de transición 01 ### Limita la propiedad Prefiere `.trans-transform` o `.trans-opacity` frente a `.trans-all`. 02 ### Usa tiempos breves Entre 150ms y 300ms suele funcionar bien para controles y respuestas directas. 03 ### Reserva el delay Utilízalo para secuencias intencionales; evita retrasar acciones que esperan respuesta inmediata. 04 ### Respeta al usuario El módulo reduce automáticamente movimiento y retrasos cuando el sistema lo solicita. --- # Visibility (mostrar u ocultar) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/visibility.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Visibilidad Muestra u oculta un elemento sin cambiar el espacio que ocupa, con variantes para interacción, impresión y ocho anchos responsive. v2.0 □ ## Conserva el espacio `visibility: hidden` oculta el contenido, pero su caja continúa reservada en el layout. 8 ## Ocho breakpoints Las variantes responsive se activan hasta el ancho indicado porque utilizan `max-width`. P ## Control de impresión Las clases `*-print` cambian la visibilidad únicamente al imprimir el documento. i ## Visibility no equivale a display `.invisible` deja un espacio vacío donde estaba el elemento. Si necesitas retirar la caja del flujo, utiliza la utilidad de display correspondiente. Código + resultado ## Compara visible e invisible El segundo ejemplo mantiene tres columnas: la central existe y reserva espacio aunque su contenido no se vea. HTML ```html
01 02 03
``` Resultado aplicado VISIBLE · CONSERVA ESPACIO 01 02 03 `.visible` aplica `visibility: visible`; el elemento se dibuja y participa normalmente en el layout. HTML ```html
01 03
``` Resultado aplicado OCULTO · CONSERVA ESPACIO 01 02 03 `.invisible` aplica `visibility: hidden`. El espacio central permanece reservado entre 01 y 03. Mapa del sistema ## Cuatro contextos de aplicación La propiedad siempre es visibility; el nombre de la clase determina cuándo se aplica. BASE `.visible``.invisible` ### Estado permanente Aplica la visibilidad mientras la clase permanezca en el elemento. INTERACCIÓN `.*-hover``.*-focus` ### Estado temporal Cambia la visibilidad únicamente durante `:hover` o `:focus`. RESPONSIVE `.*-{bp}` ### Hasta un ancho Se activa dentro de un media query con `max-width`. PRINT `.*-print` ### Sólo al imprimir No modifica la pantalla; se evalúa dentro de `@media print`. Hover y focus ## Estados disponibles con una limitación importante Las cuatro clases existen en el framework, pero ocultar el mismo elemento que produce el estado puede interrumpir hover o focus. `.visible-hover` ### Visible durante hover Aplica `visibility: visible` cuando el propio elemento recibe el puntero. Un elemento ya oculto no suele poder iniciar ese hover por sí mismo. Pasa el cursor por el área Elemento visible El contenedor conserva `:hover` y muestra al hijo sin parpadeo. `.invisible-hover` ### Invisible durante hover Oculta el elemento al pasar el puntero. Al dejar de participar en hit testing puede perder el estado y producir parpadeo. Pasa el cursor por el área Elemento visible El área mantiene el estado mientras el hijo queda oculto. `.visible-focus` ### Visible durante focus Aplica visibilidad cuando el elemento recibe foco. Si ya está oculto, normalmente no podrá enfocarse directamente. Haz clic o usa Tab Elemento visible El contenedor recibe el foco y muestra al hijo. `.invisible-focus` ### Invisible durante focus Oculta el elemento enfocado y puede provocar la pérdida inmediata del foco. Haz clic o usa Tab Elemento visible El contenedor conserva el foco mientras el hijo se oculta. Uso recomendado Los ejemplos usan un contenedor estable como activador y cambian la visibilidad de su hijo. Las clases del framework actúan sobre el mismo elemento y pueden perder `hover` o `focus` al ocultarlo. Estados generales Para cambiar texto, fondo, borde u opacidad con `hover:`, `focus:` y otras variantes, consulta la [documentación de States](states.md). Variantes responsive ## Ocho límites con max-width Agrega el breakpoint al final. La clase se activa cuando el viewport es igual o menor al valor indicado. 640px `max-width` `.invisible-640` 768px `max-width` `.invisible-768` 1024px `max-width` `.invisible-1024` 1280px `max-width` `.invisible-1280` 1536px `max-width` `.invisible-1536` 2560px `max-width` `.invisible-2560` 3840px `max-width` `.invisible-3840` 6016px `max-width` `.invisible-6016` También disponibles Cada límite incluye `.visible-{bp}`, `.invisible-{bp}`, sus variantes `-hover-{bp}` y `-focus-{bp}`. Impresión ## La pantalla no cambia Estas clases sólo producen efecto al imprimir o al abrir la vista previa de impresión. VISIBLE EN PRINT `.visible-print` ### Muestra al imprimir Aplica `visibility: visible` dentro de `@media print`. INVISIBLE EN PRINT `.invisible-print` ### Oculta al imprimir Aplica `visibility: hidden` sin desmontar la estructura impresa. Referencia ## Clases disponibles La tabla contiene únicamente familias presentes en `visibility.css`. | Clases | Momento | Valor | Comportamiento | | --- | --- | --- | --- | | .visible | Siempre | visibility: visible | Muestra el elemento y conserva su espacio. | | .invisible | Siempre | visibility: hidden | Oculta el elemento y conserva su espacio. | | .visible-hover / .invisible-hover | :hover | visible / hidden | Cambia mientras el propio elemento mantiene hover. | | .visible-focus / .invisible-focus | :focus | visible / hidden | Cambia mientras el propio elemento mantiene focus. | | .visible-print / .invisible-print | Impresión | visible / hidden | Se aplica sólo dentro de @media print . | | .visible-{bp} / .invisible-{bp} | max-width | visible / hidden | Estado responsive hasta el límite indicado. | | .visible-hover-{bp} / .invisible-hover-{bp} | Hover responsive | visible / hidden | Combina el estado hover con max-width . | | .visible-focus-{bp} / .invisible-focus-{bp} | Focus responsive | visible / hidden | Combina el estado focus con max-width . | Recomendaciones ## Buenas prácticas de visibility 01 ### Elige por espacio Usa visibility sólo cuando el hueco del elemento deba permanecer en el layout. 02 ### No ocultes interacción Un control invisible no debería continuar disponible para teclado, lectores o eventos. 03 ### Lee el breakpoint El número es un límite máximo, no el punto desde el cual comienza el estilo. 04 ### Prueba la impresión Comprueba la vista previa: invisible conserva espacio también en el documento impreso. --- # Z-index (orden de capas) > Documentación de QuicklyCSS V2 2.0.0-alpha.4. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/z-index.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Apilamiento Ordena elementos superpuestos mediante una escala pequeña y predecible, sin mezclar posicionamiento, alineación o layout. v2.0 3 ## Tres zonas Valores negativos, orden local y capas altas cubren la mayoría de interfaces sin números arbitrarios. ↥ ## Una responsabilidad Las clases `.z-*` sólo aplican `z-index`; la posición se compone por separado. ◎ ## Contexto local Un valor alto no escapa del contexto de apilamiento creado por su elemento padre. i ## Z-index no posiciona Combínalo con `.position-relative`, `.position-absolute`, `.position-fixed` o `.position-sticky` cuando corresponda. Código + resultado ## Compara el orden de dos elementos La tarjeta violeta cambia de nivel frente a una tarjeta azul fija en `.z-1`. HTML Resultado aplicado Debajo de .z-1 Las cajas comparten el mismo contexto Referencia `.z-1` Elemento activo .z-0 establece una base explícita; la referencia con .z-1 se dibuja por encima. ```html
Referencia
Elemento activo
``` .z-2 supera a .z-1 cuando ambos elementos pertenecen al mismo contexto de apilamiento. ```html
Referencia
Elemento activo
``` .z--1 envía el elemento detrás de las capas no negativas del mismo contexto. ```html
Referencia
Elemento activo
``` .z-50 representa el nivel superior de la escala y se reserva para componentes prioritarios, como modales. ```html
Referencia
Elemento activo
``` .z-auto devuelve el elemento al orden de apilamiento calculado por el navegador. ```html
Referencia
Elemento activo
``` Escala ## Catorce niveles explícitos La referencia azul usa `.z-1`; cada muestra violeta aplica la clase indicada para hacer visible su relación. 1 -3 `.z--3` Detrás 1 -2 `.z--2` Detrás 1 -1 `.z--1` Detrás 1 0 `.z-0` Base 1 1 `.z-1` Local 1 2 `.z-2` Local 1 3 `.z-3` Local 1 4 `.z-4` Local 1 5 `.z-5` Local 1 10 `.z-10` Flotante 1 20 `.z-20` Flotante 1 30 `.z-30` Overlay 1 40 `.z-40` Overlay 1 50 `.z-50` Modal DOM auto `.z-auto` Natural Regla esencial ## Primero el contexto, después el número Los valores sólo se comparan directamente cuando los elementos participan en el mismo contexto de apilamiento. 01 `.position-relative` ### Activa el contexto de posición Úsalo en el contenedor o elemento que debe servir como referencia para hijos absolutos. 02 `.z-10` ### Ordena dentro del contexto Un número mayor se dibuja por encima de uno menor únicamente dentro de la jerarquía comparable. 03 `.z-auto` ### Restablece el orden natural Elimina la prioridad explícita sin cambiar la propiedad `position` del elemento. HTML ```html
``` El botón se ordena dentro del panel. Un `.z-50` anidado no puede superar automáticamente a otro contexto padre que ya está por encima. Referencia ## Clases disponibles Todas las clases modifican exclusivamente la propiedad `z-index`. | Clases | Valores | Uso recomendado | Ejemplo | | --- | --- | --- | --- | | .z-auto | auto | Restablecer el orden calculado por el navegador. | .z-auto | | .z--{1…3} | -1, -2, -3 | Decoración o contenido detrás de la capa base. | .z--1 | | .z-{0…5} | 0, 1, 2, 3, 4, 5 | Orden local entre elementos de un componente. | .z-4 | | .z-{10…50} | 10, 20, 30, 40, 50 | Elementos flotantes, overlays y modales. | .z-40 | Alias heredados `.z-a1…3` y `.z-b1…3` conservan únicamente el valor de `z-index`; ya no agregan `position: relative`. Para código nuevo usa `.z-*` junto con una utilidad `.position-*` cuando sea necesaria. Recomendaciones ## Buenas prácticas de apilamiento 01 ### Usa la escala Evita valores arbitrarios como 9999; expresan urgencia, no una jerarquía mantenible. 02 ### Empieza local Usa 0 a 5 dentro de componentes y reserva 10 a 50 para capas de interfaz compartidas. 03 ### Revisa el padre Si un elemento no sube de capa, inspecciona primero el contexto creado por sus antecesores. 04 ### Compón posición Define el posicionamiento con su módulo correspondiente y el orden con `.z-*`. # Procedimientos oficiales para agentes --- # Skill: quicklycss-install Fuente: https://quicklycss.cl/skills/quicklycss-install/SKILL.md # Instalar QuicklyCSS V2 1. Lee `https://quicklycss.cl/AI_USAGE.md` y confirma la versión publicada en `https://quicklycss.cl/quicklycss-api.json`. 2. Para una integración simple carga `https://quicklycss.cl/dist/quicklycss_v2.min.css`. 3. Añade `https://quicklycss.cl/dist/quicklycss_v2_components.js` con `defer` solo si la página utiliza componentes interactivos o atributos `data-qy-*`. 4. No combines el bundle completo con bundles modulares en la misma página. 5. Entrega HTML semántico mínimo, explica los archivos cargados y marca la versión como preliminar cuando corresponda. ## Comprobación - Verifica que cada clase usada exista en `quicklycss-api.json`. - Comprueba que las rutas respondan y que no existan errores de consola. - Conserva `viewport`, idioma del documento, título y foco accesible. --- # Skill: quicklycss-build-page Fuente: https://quicklycss.cl/skills/quicklycss-build-page/SKILL.md # Construir una página con QuicklyCSS V2 1. Consulta `https://quicklycss.cl/llms.txt` y selecciona las páginas Markdown relacionadas con la solicitud. 2. Lee `https://quicklycss.cl/AI_USAGE.md` antes de escribir código. 3. Diseña primero la estructura semántica, el orden de lectura y los estados de interacción. 4. Implementa la página únicamente con clases presentes en `https://quicklycss.cl/quicklycss-api.json`. 5. Si falta una capacidad, usa CSS propio claramente separado; no inventes una clase QuicklyCSS. 6. Incluye el JavaScript oficial solo si se requieren componentes `data-qy-*`. ## Entrega - Devuelve un HTML completo listo para probar. - Enumera los bundles y las clases principales utilizados. - Señala cualquier requisito que no tenga una clase oficial. - Verifica responsive, teclado, foco visible, contraste y `prefers-reduced-motion`. --- # Skill: quicklycss-responsive-layout Fuente: https://quicklycss.cl/skills/quicklycss-responsive-layout/SKILL.md # Layout responsive con QuicklyCSS V2 1. Obtén los breakpoints reales y las clases disponibles desde `https://quicklycss.cl/quicklycss-api.json`. 2. Consulta en `https://quicklycss.cl/llms.txt` las guías de Containers, Grid, Flex, Display, Gap, Spacing, Sizes y Overflow que correspondan. 3. Empieza por el viewport móvil y añade cambios progresivos solo con variantes verificadas. 4. Aplica `min-width: 0` o scroll interno mediante CSS propio únicamente cuando el contenido lo requiera y el catálogo no ofrezca una utilidad equivalente. 5. No ocultes un error de ancho desactivando el zoom o recortando contenido esencial. ## Comprobación - Revisa al menos 375, 768, 1024 y 1440 px. - Confirma que el documento no tenga scroll horizontal inesperado. - Asegura acceso completo a tablas, navegación y bloques de código mediante scroll cuando sea necesario. - Verifica que texto, controles y objetivos táctiles sigan siendo legibles y operables. --- # Skill: quicklycss-component Fuente: https://quicklycss.cl/skills/quicklycss-component/SKILL.md # Componentes QuicklyCSS V2 1. Localiza el componente en `https://quicklycss.cl/llms.txt` y lee su página Markdown completa. 2. Verifica clases, atributos `data-qy-*` y dependencias en `https://quicklycss.cl/quicklycss-api.json`. 3. Conserva la anatomía HTML, roles, nombres accesibles y relaciones ARIA del ejemplo oficial. 4. Carga `quicklycss_v2_components.js` cuando el componente tenga comportamiento interactivo. 5. Para contenido insertado dinámicamente usa `QuicklyComponents.init(root)`; antes de retirarlo usa `QuicklyComponents.destroy(root)`. ## Comprobación - Prueba teclado, `Escape`, foco visible y devolución de foco cuando aplique. - Confirma los estados abierto, cerrado, activo, deshabilitado y error relevantes. - Prueba móvil y `prefers-reduced-motion`. - No mezcles markup ni clases de componentes de otros frameworks. --- # Skill: quicklycss-color-system Fuente: https://quicklycss.cl/skills/quicklycss-color-system/SKILL.md # Sistema de color QuicklyCSS V2 1. Lee `https://quicklycss.cl/docs/colors.md` y consulta los tokens y clases en `https://quicklycss.cl/quicklycss-api.json`. 2. Prioriza colores semánticos para acciones y estados: primary, secondary, success, warning, danger, info y muted. 3. Para escalas cromáticas usa solo tonos existentes entre 50 y 950 y confirma cada clase de fondo, texto o borde en el catálogo. 4. Mantén coherencia entre estado, contraste, borde, texto y foco. 5. No comuniques significado únicamente mediante color. ## Comprobación - Evalúa contraste en texto normal, texto grande, controles y estados de foco. - Verifica hover, active, disabled y focus-visible. - Documenta cualquier color propio y evita presentarlo como token oficial. --- # Skill: quicklycss-audit-classes Fuente: https://quicklycss.cl/skills/quicklycss-audit-classes/SKILL.md # Auditar una implementación QuicklyCSS V2 1. Registra la versión declarada y los bundles cargados. 2. Extrae todas las clases del HTML y valida cada candidata de QuicklyCSS contra `https://quicklycss.cl/quicklycss-api.json`. 3. Distingue clases oficiales, clases propias y clases desconocidas. No rechaces una clase propia solo por no aparecer en el catálogo. 4. Comprueba atributos `data-qy-*`, dependencias JavaScript y estructuras documentadas. 5. Busca mezcla con QuicklyCSS V1 u otros frameworks, conflictos de especificidad, declaraciones duplicadas y CSS muerto. 6. Revisa responsive, teclado, nombres accesibles, foco, contraste y movimiento reducido. ## Informe - Emite resultado `APROBADO`, `APROBADO CON OBSERVACIONES` o `RECHAZADO`. - Ordena incidencias por bloqueante, alta, media y baja. - Incluye evidencia, ubicación, impacto y corrección verificable. - No modifiques el código salvo que la solicitud autorice corregirlo. --- # Skill: quicklycss-v1-v2-migration Fuente: https://quicklycss.cl/skills/quicklycss-v1-v2-migration/SKILL.md # Migrar QuicklyCSS V1 a V2 1. Lee `https://quicklycss.cl/MIGRATION_V1_V2.md` antes de proponer cambios. 2. Inventaría bundles, clases, JavaScript, atributos y componentes de la implementación V1. 3. Consulta `https://quicklycss.cl/llms.txt` y valida todo reemplazo en `https://quicklycss.cl/quicklycss-api.json`. 4. Migra por capas: estructura, contenidos, utilidades, componentes y templates. 5. No conviertas nombres por semejanza ni mezcles V1 y V2 durante la entrega final. 6. Si no existe equivalencia, conserva el comportamiento mediante CSS o JavaScript propio claramente identificado. ## Entrega - Presenta una tabla con origen V1, destino V2, estado y evidencia. - Separa reemplazos directos, rediseños y elementos sin equivalencia. - Prueba visual, responsive, interacción y accesibilidad antes de retirar los archivos V1.