Anchos y Altos

Con Quickly, puedes asignar alturas y anchos predefinidos a los elementos según tus preferencias o diseño. Además, disponemos de clases especiales para la versión móvil, lo que permite un mejor control del diseño.

Anchos en px

Asigna anchos exactos a tus diseños utilizando las clases "w".

Clase normal Clase móvil Descripción
.w-4 .wm-4 Establece un ancho fijo de 4px para el elemento.
.w-8 .wm-8 Establece un ancho fijo de 8px para el elemento.
.w-16 .wm-16 Establece un ancho fijo de 16px para el elemento.
.w-24 .wm-24 Establece un ancho fijo de 24px para el elemento.
.w-32 .wm-32 Establece un ancho fijo de 32px para el elemento.
.w-40 .wm-40 Establece un ancho fijo de 40px para el elemento.
.w-48 .wm-48 Establece un ancho fijo de 48px para el elemento.
.w-56 .wm-56 Establece un ancho fijo de 56px para el elemento.
.w-64 .wm-64 Establece un ancho fijo de 64px para el elemento.
.w-72 .wm-72 Establece un ancho fijo de 72px para el elemento.
.w-80 .wm-80 Establece un ancho fijo de 80px para el elemento.
.w-100 .wm-100 Establece un ancho fijo de 100px para el elemento.
.w-150 .wm-150 Establece un ancho fijo de 150px para el elemento.
.w-200 .wm-200 Establece un ancho fijo de 200px para el elemento.
.w-250 .wm-250 Establece un ancho fijo de 250px para el elemento.
.w-300 .wm-300 Establece un ancho fijo de 300px para el elemento.
.w-350 .wm-350 Establece un ancho fijo de 350px para el elemento.
.w-400 .wm-400 Establece un ancho fijo de 400px para el elemento.
.w-500 .wm-500 Establece un ancho fijo de 500px para el elemento.
.w-550 .wm-550 Establece un ancho fijo de 550px para el elemento.
.w-600 .wm-600 Establece un ancho fijo de 600px para el elemento.
.w-700 .wm-700 Establece un ancho fijo de 700px para el elemento.
.w-800 .wm-800 Establece un ancho fijo de 800px para el elemento.
.w-900 .wm-900 Establece un ancho fijo de 900px para el elemento.
.w-1000 .wm-1000 Establece un ancho fijo de 1000px para el elemento.
.w-auto .wm-auto El ancho se ajustará para que coincida con el ancho de su contenido.

Tamaños aplicados

.w-100
.w-150
.w-200
.w-250
.w-300
.w-350
.w-400
.w-450
.w-500
.w-550
.w-600
.w-auto
HTML 
                                    
    <div class="w-100">.w-100</div>   
    <div class="w-100">.w-150</div>
    <div class="w-100">.w-200</div>  
    <div class="w-100">.w-250</div>  
    <div class="w-100">.w-300</div>  
    <div class="w-100">.w-350</div>  
    <div class="w-100">.w-400</div> 
    <div class="w-100">.w-450</div> 
    <div class="w-100">.w-500</div> 
    <div class="w-100">.w-550</div> 
    <div class="w-100">.w-600</div> 
    <div class="w-auto">.w-auto</div>

Altos en px

Asigna alto exactos a tus diseños utilizando las clases "h".

Clase normal Descripción
.h-100 Establece un alto fijo de 100px para el elemento.
.h-150 Establece un alto fijo de 150px para el elemento.
.h-200 Establece un alto fijo de 200px para el elemento.
.h-250 Establece un alto fijo de 250px para el elemento.
.h-300 Establece un alto fijo de 300px para el elemento.
.h-350 Establece un alto fijo de 350px para el elemento.
.h-400 Establece un alto fijo de 400px para el elemento.
.h-500 Establece un alto fijo de 500px para el elemento.
.h-550 Establece un alto fijo de 550px para el elemento.
.h-600 Establece un alto fijo de 600px para el elemento.
.h-auto El alto se ajustará automáticamente para que coincida con el alto de su contenido.

Tamaños aplicados

.h-100
.h-150
.h-200
.h-250
.h-300
.h-350
.h-400
.h-450
.h-500
.h-550
.h-600
.h-auto
HTML 
                                    
    <div class="h-100">.h-100</div>   
    <div class="h-100">.h-150</div>
    <div class="h-100">.h-200</div>  
    <div class="h-100">.h-250</div>  
    <div class="h-100">.h-300</div>  
    <div class="h-100">.h-350</div>  
    <div class="h-100">.h-400</div> 
    <div class="h-100">.h-450</div> 
    <div class="h-100">.h-500</div> 
    <div class="h-100">.h-550</div> 
    <div class="h-100">.h-600</div> 
    <div class="h-auto">.h-auto</div>

Secuencia Fibonachi

Elige definir alturas y anchos preestablecidos para los elementos utilizando la secuencia de Fibonacci, si así lo prefieres.

Anchos en px

Clase Descripción
.w-f-1 El ancho incia en 8px.
.w-f-2 El ancho se establece en 13px.
.w-f-3 El ancho se establece en 21px.
.w-f-4 El ancho se establece en 34px.
.w-f-5 El ancho se establece en 55px.
.w-f-6 El ancho se establece en 89px.
.w-f-7 El ancho se establece en 144px.
.w-f-8 El ancho se establece en 233px.
.w-f-9 El ancho se establece en 377px.
.w-f-10 El ancho se establece en 610px.

Altos en px

Clase Descripción
.h-f-1 El altos incia en 8px
.h-f-2 El alto se establece en 13px.
.h-f-3 El alto se establece en 21px.
.h-f-4 El alto se establece en 34px.
.h-f-5 El alto se establece en 55px.
.h-f-6 El alto se establece en 89px.
.h-f-7 El alto se establece en 144px.
.h-f-8 El alto se establece en 233px.
.h-f-9 El alto se establece en 377px.
.h-f-10 El alto se establece en 610px.

Ancho y alto de la ventana gráfica.

Puedes optar por asignar altos y anchos predefinidos a los elementos en base a porcentajes de la ventana gráfica si lo prefieres

Anchos

Clase Descripción
.vw-10 ViewportWidth-10. El elemento tendrá un ancho que ocupa el 10% del ancho visible del navegador.
.vw-20 ViewportWidth-20. El elemento tendrá un ancho que ocupa el 20% del ancho visible del navegador.
.vw-30 ViewportWidth-30. El elemento tendrá un ancho que ocupa el 30% del ancho visible del navegador.
.vw-40 ViewportWidth-40. El elemento tendrá un ancho que ocupa el 40% del ancho visible del navegador.
.vw-50 ViewportWidth-50. El elemento tendrá un ancho que ocupa el 50% del ancho visible del navegador.
.vw-60 ViewportWidth-60. El elemento tendrá un ancho que ocupa el 60% del ancho visible del navegador.
.vw-70 ViewportWidth-70. El elemento tendrá un ancho que ocupa el 70% del ancho visible del navegador.
.vw-80 ViewportWidth-80. El elemento tendrá un ancho que ocupa el 80% del ancho visible del navegador.
.vw-90 ViewportWidth-90. El elemento tendrá un ancho que ocupa el 90% del ancho visible del navegador.
.vw-100 ViewportWidth-100. El elemento tendrá un ancho que ocupa el 100% del ancho visible del navegador.

Altos

Clase Descripción
.vh-10 ViewportHeight-10. El elemento tendrá un alto que ocupa el 10% del alto visible del navegador.
.vh-20 ViewportHeight-20. El elemento tendrá un alto que ocupa el 20% del alto visible del navegador.
.vh-30 ViewportHeight-30. El elemento tendrá un alto que ocupa el 30% del alto visible del navegador.
.vh-40 ViewportHeight-40. El elemento tendrá un alto que ocupa el 40% del alto visible del navegador.
.vh-50 ViewportHeight-50. El elemento tendrá un alto que ocupa el 50% del alto visible del navegador.
.vh-60 ViewportHeight-60. El elemento tendrá un alto que ocupa el 60% del alto visible del navegador.
.vh-70 ViewportHeight-70. El elemento tendrá un alto que ocupa el 70% del alto visible del navegador.
.vh-80 ViewportHeight-80. El elemento tendrá un alto que ocupa el 80% del alto visible del navegador.
.vh-90 ViewportHeight-90. El elemento tendrá un alto que ocupa el 90% del alto visible del navegador.
.vh-100 ViewportHeight-100. El elemento tendrá un alto que ocupa el 100% del alto visible del navegador.

Ancho y Alto en Porcentajes %.

Puedes asignar alturas y anchos predefinidos a los elementos utilizando porcentajes. Además, puedes gestionar y adaptar mejor el diseño para las versiones móviles, donde las clases específicas para dispositivos móviles tienen prioridad sobre las clases normales, las cuales se desactivan.

Anchos

Clase normal Clase móvil Descripción
.wp-10 .wmp-10 WidthPercentage-10. El ancho será el 10% del ancho del contenedor padre.
.wp-20 .wmp-20 WidthPercentage-20. El ancho será el 20% del ancho del contenedor padre.
.wp-30 .wmp-30 WidthPercentage-30. El ancho será el 30% del ancho del contenedor padre.
.wp-40 .wmp-40 WidthPercentage-40. El ancho será el 40% del ancho del contenedor padre.
.wp-50 .wmp-50 WidthPercentage-50. El ancho será el 50% del ancho del contenedor padre.
.wp-60 .wmp-60 WidthPercentage-60. El ancho será el 60% del ancho del contenedor padre.
.wp-70 .wmp-70 WidthPercentage-70. El ancho será el 70% del ancho del contenedor padre.
.wp-80 .wmp-80 WidthPercentage-80. El ancho será el 80% del ancho del contenedor padre.
.wp-90 .wmp-90 WidthPercentage-90. El ancho será el 90% del ancho del contenedor padre.
.wp-100 .wmp-100 WidthPercentage-100. El ancho será el 100% del ancho del contenedor padrer.

Tamaños aplicados

.wp-10
.wp-20
.wp-30
.wp-40
.wp-50
.wp-60
.wp-70
.wp-80
.wp-90
.wp-100
HTML 
                                    
    <div class="wp-10">.wp-10</div>   
    <div class="wp-20">.wp-20</div>
    <div class="wp-30">.wp-30</div>  
    <div class="wp-40">.wp-40</div>  
    <div class="wp-50">.wp-50</div>  
    <div class="wp-60">.wp-60</div>  
    <div class="wp-70">.wp-70</div> 
    <div class="wp-80">.wp-80</div> 
    <div class="wp-90">.wp-90</div> 
    <div class="wp-100">.wp-100</div>

Altos

Clase normal Clase móvil Descripción
.hp-10 .hmp-10 HeightPercentage-10. El alto será el 10% del alto del contenedor padre.
.hp-20 .hmp-20 HeightPercentage-20. El alto será el 20% del alto del contenedor padre.
.hp-30 .hmp-30 HeightPercentage-30. El alto será el 30% del alto del contenedor padre.
.hp-40 .hmp-40 HeightPercentage-40. El alto será el 40% del alto del contenedor padre.
.hp-50 .hmp-50 HeightPercentage-50. El alto será el 50% del alto del contenedor padre.
.hp-60 .hmp-60 HeightPercentage-60. El alto será el 60% del alto del contenedor padre.
.hp-70 .hmp-70 HeightPercentage-70. El alto será el 70% del alto del contenedor padre.
.hp-80 .hmp-80 HeightPercentage-80. El alto será el 80% del alto del contenedor padre.
.hp-90 .hmp-90 HeightPercentage-90. El alto será el 90% del alto del contenedor padre.
.hp-100 .hmp-100 HeightPercentage-100. El alto será el 100% del alto del contenedor padrer.

Tamaños aplicados

.hp-10
.hp-20
.hp-30
.hp-40
.hp-50
.hp-60
.hp-70
.hp-80
.hp-90
.hp-100
HTML 
                                    
    <div class="hp-10">.hp-10</div>   
    <div class="hp-20">.hp-20</div>
    <div class="hp-30">.hp-30</div>  
    <div class="hp-40">.hp-40</div>  
    <div class="hp-50">.hp-50</div>  
    <div class="hp-60">.hp-60</div>  
    <div class="hp-70">.hp-70</div> 
    <div class="hp-80">.hp-80</div> 
    <div class="hp-90">.hp-90</div> 
    <div class="hp-100">.hp-100</div>

Dimensiones cuadradas: Ancho y Alto iguales

Si así lo prefieres, tienes la opción de asignar dimensiones uniformes tanto en altura como en anchura a tus elementos.

Anchos y Altos

Clase Descripción
.wh-8 WidthHeight-8. Se le asignará un tamaño de 8 píxeles tanto en ancho como en altura.
.wh-16 WidthHeight-16. Se le asignará un tamaño de 16 píxeles tanto en ancho como en altura.
.wh-24 WidthHeight-24. Se le asignará un tamaño de 24 píxeles tanto en ancho como en altura.
.wh-32 WidthHeight-32. Se le asignará un tamaño de 32 píxeles tanto en ancho como en altura.
.wh-40 WidthHeight-40. Se le asignará un tamaño de 40 píxeles tanto en ancho como en altura.
.wh-48 WidthHeight-48. Se le asignará un tamaño de 48 píxeles tanto en ancho como en altura.
.wh-56 WidthHeight-56. Se le asignará un tamaño de 56 píxeles tanto en ancho como en altura.
.wh-64 WidthHeight-64. Se le asignará un tamaño de 64 píxeles tanto en ancho como en altura.
.wh-72 WidthHeight-72. Se le asignará un tamaño de 72 píxeles tanto en ancho como en altura.
.wh-80 WidthHeight-80. Se le asignará un tamaño de 80 píxeles tanto en ancho como en altura.
.wh-100 WidthHeight-100. Se le asignará un tamaño de 100 píxeles tanto en ancho como en altura.
.wh-150 WidthHeight-150. Se le asignará un tamaño de 150 píxeles tanto en ancho como en altura.
.wh-200 WidthHeight-200. Se le asignará un tamaño de 200 píxeles tanto en ancho como en altura.
.wh-250 WidthHeight-250. Se le asignará un tamaño de 250 píxeles tanto en ancho como en altura.
.wh-300 WidthHeight-300. Se le asignará un tamaño de 300 píxeles tanto en ancho como en altura.

Tamaños aplicados

8
16
32
40
48
56
64
72
80
100
150
200
250
300
HTML 
                                    
    <div class="wh-8">8</div>   
    <div class="wh-16">16</div>
    <div class="wh-24">24</div>  
    <div class="wh-32">32</div>  
    <div class="wh-40">40</div>  
    <div class="wh-48">48</div>  
    <div class="wh-56">56</div> 
    <div class="wh-64">64</div> 
    <div class="wh-72">72</div> 
    <div class="wh-80">80</div> 
    <div class="wh-100">100</div> 
    <div class="wh-150">150</div>   
    <div class="wh-200">200</div>
    <div class="wh-250">250</div>  
    <div class="wh-300">300</div>