Your support is key to the evolution of QuicklyCSS Grid 🚀

💙 Your contribution makes a difference. If this project has been useful to you, consider making a donation today and help me improve QuicklyCSS even further.

Boost Your Development with QuicklyCSS Grid

Discover QuicklyCSS Grid, the integrated framework system that transforms the way you build websites and applications. Designed with HTML, CSS Grid, and JavaScript, it provides a solid and flexible foundation so your creativity knows no limits. With regular updates that add new features and improvements without disrupting your workflow, QuicklyCSS Grid stays ahead of the curve.

Try it now and take your projects to the next level!

Go to the Documentation

Installation

You can include Quickly in your project via a CDN or download the framework files directly from the manual installation section.

🚀 Get Started with jsDelivr CDN

CDN CSS General

CDN JS Components

CDN JS Form

Manual installation 😊

CSS General

JS Components

JS Form

Download

Installation through the package manager npm 😃

Installation with NPM

npm install quicklycss-official

Import css

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

JS files and animations (optional)

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';

Quick start

Focus on what really matters, develop your application efficiently and without complications to achieve your goals.

📝 Copy and paste the code for a quick start of your project.

To get started, create a new index.html file in the root folder of your project. Copy and paste this initial HTML, which includes all the necessary elements to start your project with Quickly.

                  
        <!DOCTYPE html>
        <html lang="es">
            <head>
                <meta charset="UTF-8">
                <!-- Place your ICO here -->
                <link rel="icon" href="<!-- Here -->">
                <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 -->
                <!-- CSS call -->
                <link href="https://cdn.jsdelivr.net/gh/QuicklyCSS/Quickly@main/dist/v-1/css/quickly.min.css" rel="stylesheet">
                <!-- JavaScript call for components -->
                <script src="https://cdn.jsdelivr.net/gh/QuicklyCSS/Quickly@main/dist/v-1/js/quicklyComp.min.js"></script>
                <!-- JavaScript call for Forms only if necessary -->
                <script src="https://cdn.jsdelivr.net/gh/QuicklyCSS/Quickly@main/dist/v-1/js/quicklyForm.min.js"></script>
                <!-- Place your custom CSS here -->
                <link href="<!-- Aquí -->" rel="stylesheet">
                <title>Quickly Demo</title>
            </head>
            <body>   
                <h1>Hello, world :)!</h1>
            </body>
        </html>

Features that make the difference

<div class="text-cut-60c"> Quickly allows you to precisely adjust the quantity of visible text in each block, which is especially useful when you are working. </div>

New

Clarity and dynamism in each word, cuts the unnecessary, highlights the important Text Cut

Optimize the presentation of your text with text, the new function that cuts long and elegantly.Improves readability, maintains clean design and guarantees an agile and professional navigation experience for your users.Make each word count!👌

Dynamic menus in WordPress.

😃 Revolutionize your website's navigation with the Quickly Dynamic Menus for WordPress. Easy to configure and designed to integrate perfectly with your theme, the menus improve the user experience by guiding your visitors intuitively. Don't settle for the basics; transform your WordPress and offer exceptional navigation.

<?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>

Run & Run Back Animations.

The RUN & RUN BACK input animations allow you to add dynamism to your elements in a fluid and controlled way. With RUN, objects are activated when they reach 10% visibility in the viewport, while RUN BACK offers you the possibility of reversing the animation, creating a perfect round-trip effect to capture the user's attention and improve the visual experience on your website. 😲

Video support
16/9 and 9/16.

😎 Full compatibility with videos in 16:9 and 9:16 formats, allowing a smooth experience in both horizontal and vertical videos, ideal for integrating content similar to YouTube shorts.

.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

Full control over mobile versions.

😃 Quickly is extremely versatile when it comes to controlling mobile versions of your project. With its custom classes for mobile devices and a flexible approach to CSS, it allows you to have full control over the design at any time. Adjust and optimize every aspect to ensure your site looks perfect across all screen sizes.

+300 kinds of colors.

😎 More than 300 colors to apply in backgrounds and texts. The wide palette allows you to choose and apply colors with ease, ensuring that your design is perfectly aligned with your vision.

.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

Examples of Quickly

🗂️ You can start your project immediately using any of our examples, which include totally customized components and designs.

Dashboard

New Control panel, ideal for managing and monitoring your project efficiently.

Download

Video

New Functional video template, perfect to integrate into your project with ease.

Download

Cover

Designed to create simple and attractive home pages.

Download

Company

Company page with a detailed grid-based layout.

Download

Blog

Template that includes everything you need to implement quickly.

Download

Album

Photo galleries, portfolios and other similar uses.

Download

Login

Simple and minimalist login to implement in your project.

Download

Quickly Tools🔧

✨ Discover our new design tools! Now you can unleash your creativity with the Gradient Border Generator, create unique shapes with Clip Path, add visual dynamism with Custom Waves, and give depth to your elements with Stunning Shadows. Everything you need to make your site stand out is just a click away.

Start creating now and surprise your users with innovative and attractive designs!