Simplifica tu Diseño con Contenedores en Quickly

Descubre el Poder de los Contenedores, desata su Potencial para Organizar, Rellenar y Alinear tu Contenido con Facilidad, Precisión y Eficacia. Simplifica la Organización, el Relleno y la Alineación de tu Contenido para Crear Diseños Impresionantes y Funcionales.

Que son los contenedores?

Los contenedores permite crear diseños adaptativos con facilidad, garantizando una presentación completa y envolvente en pantalla. Además, estas clases de contenedor dejan márgenes laterales para una presentación más estilizada y equilibrada. Ya sea que busques un diseño expansivo y completo o prefieras un enfoque más centrado y contenido, nuestras opciones de contenedor te brindan la flexibilidad necesaria para adaptar tu diseño a cualquier necesidad o preferencia. Simplifica tu proceso de diseño y crea interfaces atractivas y funcionales con los contenedores.

Tamaños de contenedores

El sistema de contenedores de Quickly se adapta tanto a puntos de interrupción predeterminados como personalizados. Con nuestras clases de contenedores, tienes un control total sobre los elementos en versiones móviles, permitiéndote asignar anchos específicos según el tipo de dispositivo. Esto asegura que tu diseño se ajuste de manera óptima a diferentes tamaños de pantalla.

Tipo Clase Descripción
Normal .cont-n° > 992px | Para televisores, computadores de escritorio y tablets.
Mediano .cont-m-n° < 992px | Para teléfonos móviles o tabletas en orientación vertical.
Pequeño .cont-s-n° < 576px | Para teléfonos móviles en modo vertical.

Cuantos tipos tenemos?

Hay cinco tipos de contenedores, todos ellos fluidos y diseñados con un ancho específico para una distribución óptima en la pantalla. Además, si necesitas ajustar el ancho para la versión móvil, puedes hacerlo con las clases correspondientes para dispositivos móviles.

Clase normal Clase móvil s Clase móvil m Descripción
.cont-100 .cont-s-100 .cont-m-100 Container-100. Ocupa el 100% de la pantalla
.cont-90 .cont-s-90 .cont-m-90 Container-90. Ocupa el 90% de la pantalla, deja márgenes laterales.
.cont-80 .cont-s-80 .cont-m-80 Container-80. Ocupa el 80% de la pantalla, deja márgenes laterales.
.cont-70 .cont-s-70 .cont-m-70 Container-70. Ocupa el 70% de la pantalla, deja márgenes laterales.
.cont-60 .cont-s-60 .cont-m-60 Container-60. Ocupa el 60% de la pantalla, deja márgenes laterales.
.cont-50 .cont-s-50 .cont-m-50 Container-50. Ocupa el 50% de la pantalla, deja márgenes laterales.

Atrévete a explorar y experimentar con los contenedores. Permítete desafiar los límites establecidos y aventurarte en nuevas posibilidades.

Contenedor predeterminado

El contenedor al 100% de ancho abarca toda la pantalla sin generar márgenes laterales.

Contenedores ejemplos
100%
90%
80%
70%
60%
50% 

    <body>   
        <div class="cont-100 cont-m-90">   
            <!-- Contenido Aquí -->
        </div>
        <div class="cont-90 cont-m-100">   
            <!-- Contenido Aquí -->
        </div>
        <div class="cont-80 cont-m-100">   
            <!-- Contenido Aquí -->
        </div>
        <div class="cont-70 cont-m-100">   
            <!-- Contenido Aquí -->
        </div>
        <div class="cont-60 cont-m-100">   
            <!-- Contenido Aquí -->
        </div>
        <div class="cont-50 cont-m-100">   
            <!-- Contenido Aquí -->
        </div>
    </body>

¿Es posible utilizar contenedores anidados, como dos o más container, en un mismo proyecto?

¡Por supuesto! Puedes emplear los contenedores que requieras en tu proyecto. Aquí te presento un ejemplo de cómo hacerlo. En este caso, el contenedor se ajustará al 80% del ancho, centrado en la página y con márgenes a la izquierda de un 10% y derecha un 10%.

Ancho de contenedores en la pantalla
100%
90%
80%
70%
60%
50%
HTML 

    <body>   
        <div class="cont-100">   
            <div class="cont-80"> 
                <!-- Contenido Aquí -->
            </div>
        </div>
    </body>