# Construye interfaces claras sin pelear con tu CSS.
> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.
- Página canónica: https://quicklycss.cl/
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt
Un framework modular basado en Atomic Design para componer fundamentos, átomos, componentes, templates y páginas con clases legibles y una documentación orientada a resultados.
Arquitectura atómica QuicklyCSS v2 organiza cada pieza por nivel, dependencia y responsabilidad sin perder la flexibilidad de sus utilidades.
[Explorar documentación →](docs/containers.md)
Conocer el sistema
67
módulos compilados
6
niveles atómicos
7
templates base
[AI · READY Documentación legible por máquinas](AI_USAGE.md)
Quickly V2.
01 ` `
02 `
03 ` alt= "QuicklyCSS" class= "img-fluid" >`
04 `
## Construye más. Corrige menos.
`
05 ` CSS claro, modular y predecible.
`
06 `
`
RESULTADO
 Construye más. Corrige menos. CSS claro, modular y predecible.
Atomic Design
## De un token a una página, sin saltos de responsabilidad.
La arquitectura declara qué resuelve cada pieza, de qué depende y cómo se combina. Los templates aportan estructura sin imponer contenido de producto.
01–02 Foundations + Atoms
### Decisiones y controles básicos
Tokens semánticos, tema, botones, campos, checkbox, radio, switch, range y archivos.
[Selección](docs/selection.md)[Activación](docs/activation.md)[Rango y archivo](docs/range-file.md)
[Explorar contenidos →](docs/selection.md)
03–04 Molecules + Organisms
### Patrones que colaboran
Breadcrumb, tooltip y popover se combinan con navegación, formularios, tablas y capas interactivas.
[Breadcrumb](docs/component-breadcrumb.md)[Tooltip](docs/component-tooltip.md)[Popover](docs/component-popover.md)
[Explorar componentes →](docs/components.md)
05–06 Templates + Pages
### Composiciones listas para crecer
Panel, video, portada, empresa, blog, álbum e inicio de sesión como páginas reales que verifican su integración.
[Panel](docs/template-panel.md)[Portada](docs/template-cover.md)[Acceso](docs/template-login.md)
[Explorar templates →](docs/templates.md)
Instalación · QuicklyCSS v2
## Un paquete listo para descargar y construir.
La distribución preliminar se entrega como un único archivo ZIP. Descárgalo, descomprímelo dentro de tu proyecto y enlaza únicamente los dos archivos incluidos.
Versión preliminar
QuicklyCSS 2.0.0-alpha.2 está en desarrollo. Sus clases y comportamientos pueden cambiar antes de la publicación estable.
↓
Distribución oficial
### QuicklyCSS 2.0.0-alpha.2
Un paquete compacto con el framework completo y el comportamiento de sus componentes.
- CSS quicklycss_v2.min.css Estructura, contenidos, utilidades, componentes y templates.
- JS quicklycss_v2_components.js Interacción para los componentes que la requieren.
ZIP CSS + JavaScript
[Descargar QuicklyCSS V2 ↓](dist/quicklycss-v2.0.0-alpha.2.zip)
Inicio rápido
## Una página completa. Lista para comenzar.
Crea un archivo `index.html`, copia esta base y reemplaza el contenido. El CSS contiene el framework completo y el JavaScript añade el comportamiento de los componentes interactivos.
COPIA · PEGA · CONSTRUYE
### Tu proyecto empieza con una estructura legible.
La plantilla incluye metadatos, Quickly V2, el módulo de componentes y una composición responsive mínima.
- 01 Crea el archivo Guárdalo como `index.html` en la raíz.
- 02 Copia la plantilla Mantén el CSS y añade el JavaScript cuando uses componentes interactivos.
- 03 Compón tu interfaz Combina estructura, contenido y utilidades responsive.
CSS completo JS de componentes Responsive incluido
HTML · INDEX
```html
Mi proyecto con Quickly V2
Construye con Quickly V2
```
Diseñado para avanzar
## Una base coherente desde la primera clase
QuicklyCSS v2 organiza cada decisión por contexto. El nombre de una utilidad explica qué modifica, dónde actúa y cómo responde.
01
### Arquitectura modular
Carga una base unificada y navega familias separadas para estructura, contenido y utilidades.
Estructura Contenido Utilidad
`.qy-cont-8 + .grid + .p-24`
02
### Responsive legible
Las variantes mantienen la clase reconocible y añaden el límite de pantalla al final.
→
`.grid-col-3 · .grid-col-768-1`
03
### Ejemplos verificables
La documentación une el HTML con su resultado aplicado para mostrar el comportamiento real.
`
Templates oficiales
## Páginas completas para comprobar el sistema.
Cada template combina estructura, contenidos, utilidades y componentes públicos de QuicklyCSS V2 en un caso de uso real.
[Ver los siete templates →](docs/templates.md)
Template 04 · Empresa Catálogo comercial 04 / 07
[Explorar →](docs/template-company.md)
[Ver colección](docs/templates.md)
Movimiento vinculado al viewport
## Run entra. Run Back también sabe volver.
Activa una composición cuando el elemento cruza el área visible. `.run` ejecuta la entrada; `.run-back` además revierte el efecto cuando el elemento sale.
`.run.fade-up``.run-back.zoom-in`
[Explorar Run / Run Back →](docs/run.md)
VIEWPORT Entrada y salida controladas
ÁREA VISIBLE
RUN
→
Entrada
Se activa al ingresar.
RUN BACK
↔
Entrada + salida
Se activa y también revierte.
Documentación v2
## Encuentra la clase, entiende el efecto y sigue construyendo.
[Entrar a la documentación →](docs/containers.md)