Quickly es el marco de trabajo CSS Grid

Un framework de desarrollo web de código abierto que facilita la creación de sitios y aplicaciones web. Construido con HTML , CSS Grid y JavaScript.

Ligero y rápido 🕊️

Ligero como un pájaro y sorprendentemente rápido, Quickly es tu nuevo framework CSS GRID. Perfecto para desarrollar diseños ágilmente sin sacrificar rendimiento. Dale a tus proyectos la velocidad y flexibilidad que merecen con Quickly.

🌟💨¡Transforma tu desarrollo web hoy!

DOCUMENTACIÓN

🪶Solamente 204kb

Quickly ofrece una implementación increíblemente compacta. Diseñado para que tu desarrollo web sea rápido y eficiente sin comprometer la calidad. Dale a tus proyectos la potencia y agilidad que necesitan.

¡Empieza a crear con rapidez y ligereza hoy mismo!

Instalación

Puedes incluir Quickly en tu proyecto mediante un CDN o descargar los archivos del framework directamente desde la sección de instalación manual.

🚀 Inicia con CDN jsdelivr

CDN CSS General

CDN JS Componentes

CDN JS Formulario

Instalación manual 😊

CSS General

JS Componentes

JS Formulario

DESCARGAR

Inicio rápido

Enfócate en lo que realmente importa, desarrolla tu aplicación de manera eficiente y sin complicaciones para alcanzar tus objetivos.

📝 Copia y pega el código para un inicio rápido de tu proyecto.

Para comenzar, crea un nuevo archivo index.html en la carpeta raíz de tu proyecto. Copia y pega este HTML inicial, el cual incluye todos los elementos necesarios para comenzar tu proyecto con Quickly.

                  
    <!DOCTYPE html>
    <html lang="es">
        <head>
            <meta charset="UTF-8">
            <!-- Coloca aquí tu ICO -->
            <link rel="icon" href="<!-- Aquí -->">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <!-- Normalize -->
            <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
            <!-- CDN Quickly -->
            <!-- Llamada para CSS -->
            <link href="https://cdn.jsdelivr.net/gh/QuicklyCSS/Quickly@main/dist/v-1/css/quickly.min.css" rel="stylesheet">
            <!-- Llamada para Javascript de componentes -->
            <script src="https://cdn.jsdelivr.net/gh/QuicklyCSS/Quickly@main/dist/v-1/js/quicklyComp.min.js"></script>
            <!-- Llamada para Javascript de Formularios solo si es necesario -->
            <script src="https://cdn.jsdelivr.net/gh/QuicklyCSS/Quickly@main/dist/v-1/js/quicklyForm.min.js"></script>
            <!-- Coloca aquí tu CSS personalizado -->
            <link href="<!-- Aquí -->" rel="stylesheet">
            <title>Quickly Demo</title>
        </head>
        <body>   
            <h1>Hola, mundo :)!</h1>
        </body>
    </html>

Algunas características de Quickly CSS Grid

<article class="card-h card-hr-50 bg-white-2 rounded card-h card-hr-50 bg-white-2" data-Qy-rb = " fade-left " > <div class="card-h-cont card-h card-hr-50 bg-white-2 rounded"> <div class="text-al">Title </div> </div> </article>

Animaciones Run & Run Back

Las animaciones de entrada RUN & RUN BACK te permiten agregar dinamismo a tus elementos de manera fluida y controlada. Con RUN, los objetos se activan cuando alcanzan un 10% de visibilidad en el viewport, mientras que RUN BACK te ofrece la posibilidad de revertir la animación, creando un efecto de ida y vuelta perfecto para captar la atención del usuario y mejorar la experiencia visual en tu sitio web. 😲

Soporte para video
16/9 y 9/16.

😎 Compatibilidad completa con videos en formatos 16:9 y 9:16, permitiendo una experiencia fluida tanto en videos horizontales como en verticales, ideal para integrar contenido similar a los cortos de YouTube.

.video .video-h.video-v

@import url ('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap'); @import url ('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap'); @import url ('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap'); @import url ('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap') ;

Listo para implementar hasta 4 tipos de fuentes.

Con Quickly, puedes implementar hasta 4 fuentes tipográficas diferentes y personalizar tu diseño con facilidad gracias al uso de variables flexibles. ¡Transforma tu desarrollo web con rapidez y flexibilidad hoy mismo! 😊

Control total sobre versiones móviles.

😃 Quickly es extremadamente versátil cuando se trata de controlar versiones móviles de tu proyecto. Con sus clases personalizadas para dispositivos móviles y un enfoque flexible en CSS, te permite tener el control total sobre el diseño en cualquier momento. Ajusta y optimiza cada aspecto para garantizar que tu sitio se vea perfecto en todos los tamaños de pantalla.

.cont-m .gym-2.hide-s .unsticky-m .text-cut-m-80 .item-m-5 .unfixed-m --font-size-0: 12px !important; .item-s-11 .cont-s-50 .show-s .cont-m-90 .gm-1 .item-m-2 .cont-m-80 .item-m-11 .gm-4 .cont-m-70 .gxm-0 .cont-m-60 .gxm-2 .cont-m-50 .cont-s-100 .cont-s-90 .cont-s-80 .cont-s-60 .cont-s-50 .cont-m .gym-2 .hide-s .unsticky-m .text-cut-m-80 .item-m-5 .unfixed-m .item-s-11 .cont-s-50 .show-s .cont-m-90

--color-purple: #312782; --font-1: "Open Sans", --color-green: #00b500; --weight-7: 700; sans-serif !important; --font-1: "Open Sans", sans-serif !important; --height-233: 233px; --md-32: 32px; --color-green-lime-7: #e4ffbb; --thickness-2: 2px; --height-8: 8px; --bg-white-4: #f5f5f5;

CSS Variables.

😉 Quickly utiliza múltiples variables en su hoja de estilo CSS para ofrecerte una flexibilidad total en el diseño. Cambiarlas es muy fácil, lo que te permite ajustar tipografías, altos, radios, anchos y más, para que los estilos se adapten perfectamente a tus necesidades.

+300 clases
de colores.

😎 Más de 300 colores para aplicar en fondos y textos. La amplia paleta permite elegir y aplicar colores con facilidad, asegurando que tu diseño esté perfectamente alineado con tu visión.

.bg-brilliant-rose-6 .bg-indigo-3 .bg-spring-bud-5 .color-apple-red-9 .bg-midnight-blue-1 .bg-apple-red-7 .bg-lemon-yellow-6 .bg-dark-tangerine-4 .color-bright-green-9 .bg-burnt-sienna-6 .color-dark-tangerine-8 .color-midnight-blue-2 .bg-bright-green-8 .bg-royal-blue-2 .bg-indigo-5 .bg-midnight-blue-5 .bg-aqua-7 .color-electric-purple-1 .bg-sea-green-10 .color-sea-green-9 .color-electric-purple-5

Ejemplos de Quickly

🗂️ Puedes comenzar tu proyecto de inmediato utilizando cualquiera de nuestros ejemplos, que incluyen componentes y diseños totalmente personalizados.

Tecnologías

{

}

Quickly es el marco de trabajo CSS Grid

Ligero y rápido 🕊️

🪶Solamente 204kb

Instalación

🚀 Inicia con CDN jsdelivr

Instalación manual 😊

Inicio rápido

📝 Copia y pega el código para un inicio rápido de tu proyecto.

Algunas características de Quickly CSS Grid

Animaciones Run & Run Back

Soporte para video
16/9 y 9/16.

Listo para implementar hasta 4 tipos de fuentes.

Control total sobre versiones móviles.

CSS Variables.

+300 clases
de colores.

Ejemplos de Quickly

Panel

Video

Portada

Empresa

Blog

Álbum

Inicio Sesión

Quickly es el marco de trabajo CSS Grid

Ligero y rápido 🕊️

🪶Solamente 204kb

Instalación

🚀 Inicia con CDN jsdelivr

Instalación manual 😊

Inicio rápido

📝 Copia y pega el código para un inicio rápido de tu proyecto.

Algunas características de Quickly CSS Grid

Animaciones Run & Run Back

Soporte para video 16/9 y 9/16.

Listo para implementar hasta 4 tipos de fuentes.

Control total sobre versiones móviles.

CSS Variables.

+300 clases de colores.

Ejemplos de Quickly

Panel

Video

Portada

Empresa

Blog

Álbum

Inicio Sesión

Soporte para video
16/9 y 9/16.

+300 clases
de colores.