Tu apoyo es clave para la evolución de QuicklyCSS Grid 🚀

💙 Tu aporte hace la diferencia. Si este proyecto te ha sido útil, haz tu donación hoy y ayúdame a mejorar QuicklyCSS aún más.

Potencia tu desarrollo con QuicklyCSS Grid

Descubre Quickly CSS Grid, el sistema integrado de marco de trabajo que transforma la forma en que construyes sitios y aplicaciones.
Diseñado con HTML, CSS Grid y JavaScript, te brinda una base sólida y flexible para que tu creatividad no tenga límites.
Además, con actualizaciones periódicas que incorporan nuevas funciones y mejoras sin interrumpir tu flujo de trabajo, Quickly CSS Grid se mantiene siempre a la vanguardia.

¡Pruébalo ahora y lleva tus proyectos al siguiente nivel!

IR A LA DOCUMENTACIÓN

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

Instalación mediante el gestor de paquetes npm

Instalación vía NPM

npm install quicklycss-official

Importar CSS

import 'quicklycss-official/dist/v-1/css/quickly.min.css';

Archivos JS y animaciones (opcional)

import 'quicklycss-official/dist/v-1/css/quicklyAnimation.min.css';

import 'quicklycss-official/dist/v-1/js/quicklyAnimation.min.js';

import 'quicklycss-official/dist/v-1/js/quicklyComp.min.js';

import 'quicklycss-official/dist/v-1/js/quicklyForm.min.js';

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>

Características que hacen la diferencia

<div class="text-cut-60c"> Quickly te permite ajustar con precisión la cantidad de texto visible en cada bloque, lo que es especialmente útil cuando estás trabajando. </div>

Nuevo

Claridad y dinamismo en cada palabra, Corta lo innecesario, destaca lo importante Text Cut

Optimiza la presentación de tu contenido con Text Cut, la nueva función que recorta textos largos de forma automática y elegante. Mejora la legibilidad, mantiene el diseño limpio y garantiza una experiencia de navegación ágil y profesional para tus usuarios. ¡Haz que cada palabra cuente!👌

Menús dinámicos en WordPress.

😃 Revoluciona la navegación de tu sitio web con los Menús Dinámicos Quickly para WordPress. Fácil de configurar y diseñado para integrarse perfectamente con tu tema, los menús mejoran la experiencia del usuario al guiar a tus visitantes de manera intuitiva. No te conformes con lo básico; transforma tu WordPress y ofrece una navegación excepcional.

<?php wp_nav_menu( array( 'theme_location' => 'menu-header', 'walker' => new Quickly_Nav_Walker(), 'container' => false, 'menu_class' => 'navbar-nav', 'items_wrap' => '<ul class="%2$s">%3$s </ul>', ) ); ?>

<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

.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

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.

+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.

Panel

Nuevo Panel de control, ideal para gestionar y monitorear tu proyecto de manera eficiente.

Descargar

Video

Nuevo Funcional template de video, perfecto para integrar en tu proyecto con facilidad.

Descargar

Portada

Diseñada para crear de manera sencilla y atractiva páginas de inicio.

Descargar

Empresa

Página de empresa con un diseño detallado basado en cuadrículas.

Descargar

Blog

Plantilla que incluye lo necesario para implementar de forma rápida.

Descargar

Álbum

Galerías de fotos, portafolios y otros usos similares.

Descargar

Inicio Sesión

Sensillo y minimalista inicio de sesión para implementar en tu proyecto.

Descargar

Herramientas Quickly 🔧

✨ Descubre nuestras nuevas herramientas de diseño! Ahora puedes dar rienda suelta a tu creatividad con el Generador de Bordes Degradados, crear formas únicas con Clip Path, agregar dinamismo visual con Ondas personalizadas, y darle profundidad a tus elementos con Sombras impresionantes. Todo lo que necesitas para hacer que tu sitio destaque está a solo un clic.

¡Empieza a crear ahora y sorprende a tus usuarios con diseños innovadores y atractivos!