Decisiones y controles básicos
Tokens semánticos, tema, botones, campos, checkbox, radio, switch, range y archivos.
Explorar contenidos →Construye interfaces claras sin pelear con tu CSS.
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ómicaQuicklyCSS v2 organiza cada pieza por nivel, dependencia y responsabilidad sin perder la flexibilidad de sus utilidades.
- 67
- módulos compilados
- 6
- niveles atómicos
- 7
- templates base
AI READY
Documentación legible por máquinas
01
<article class="p-24 rounded shadow-2 text-ac">02
<img src="assets/img/Logo-Quickly.png"03
alt="QuicklyCSS" class="img-fluid">04
<h2>Construye más. Corrige menos.</h2>05
<p>CSS claro, modular y predecible.</p>06
</article>
RESULTADO
Construye más. Corrige menos.CSS claro, modular y predecible.
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.
Patrones que colaboran
Breadcrumb, tooltip y popover se combinan con navegación, formularios, tablas y capas interactivas.
Explorar componentes →Composiciones listas para crecer
Panel, video, portada, empresa, blog, álbum e inicio de sesión como páginas reales que verifican su integración.
Explorar templates →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.
- CSSquicklycss_v2.min.cssEstructura, contenidos, utilidades, componentes y templates.
- JSquicklycss_v2_components.jsInteracción para los componentes que la requieren.
ZIPCSS + JavaScript
Descargar QuicklyCSS V2 ↓
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.
- 01Crea el archivoGuárdalo como
index.htmlen la raíz. - 02Copia la plantillaMantén el CSS y añade el JavaScript cuando uses componentes interactivos.
- 03Compón tu interfazCombina estructura, contenido y utilidades responsive.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="assets/img/ico.png">
<link rel="stylesheet" href="css/quicklycss_v2.min.css">
<title>Mi proyecto con Quickly V2</title>
</head>
<body>
<main class="qy-cont-8 qy-cont-768-10 p-24">
<h1>Construye con Quickly V2</h1>
<button class="btn btn-primary" type="button">Comenzar</button>
</main>
<script src="js/quicklycss_v2_components.js" defer></script>
</body>
</html>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.
Arquitectura modular
Carga una base unificada y navega familias separadas para estructura, contenido y utilidades.
EstructuraContenidoUtilidad
.qy-cont-8 + .grid + .p-24
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
Ejemplos verificables
La documentación une el HTML con su resultado aplicado para mostrar el comportamiento real.
<button class="btn-primary">→Guardar
Mapa del framework
Tres áreas, un mismo lenguaje
Empieza por el tipo de decisión que necesitas tomar y entra directamente a su documentación.
Define el esqueleto
Contenedores, display, columnas y spans para organizar el layout antes de decorar.
Abrir estructura →Da forma a la información
Tipografía, color, botones, imágenes, listas e iconos con opciones listas para componer.
Abrir contenidos →Ajusta comportamiento y detalle
Alineación, espaciado, estados, transiciones y efectos para refinar cada interfaz.
Abrir utilidades →Lo esencial de v2
Más control con menos ambigüedad
La nueva versión refuerza nombres explícitos, escalas consistentes y ejemplos que conectan la clase con su efecto.
01
Alineación por contextoTexto, flex y grid separados por responsabilidad.
Alignment →
02Espaciado por direcciónPadding y margin con lados, ejes, escala y variantes responsive.
Spacing →
03Movimiento componiblePropiedad, duración, curva y delay como piezas independientes.
Transition →
04Responsive explícitoEscalas y límites de pantalla legibles para adaptar cada composición.
Responsive →
Componentes oficiales
Interfaces completas, construidas con Quickly.
La colección inicial utiliza exclusivamente el nuevo core V2. No agrega otro sistema de estilos: compone estructura, contenidos, utilidades, estados y movimiento del propio framework.
01–03 · Contenido y estados
Card · Alert · Badge
Superficies, mensajes y estados listos para combinar.
Explorar familia →
04–06 · Navegación
Navbar · Dropdown · Tabs
Navegación, selección y foco visibles en cada estado.
Explorar familia →
07–09 · Interacción
Accordion · Modal · Toast
Capas y mensajes con comportamiento accesible.
Explorar familia →
10–12 · Entrada y datos
Form · Table · Pagination
Captura, organización y navegación entre datos.
Explorar familia →
13–16 · Avance y carga
Progress · Loading · Carousel
Retroalimentación visual y contenido navegable.
Explorar familia →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
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
ÁREA VISIBLE
RUN
Entrada
Se activa al ingresar.
RUN BACK
Entrada + salida
Se activa y también revierte.
Documentación v2