Marco de diseño mínimo CSS basado en Flexbox-FLEXY
| Autor: | vladocar |
|---|---|
| Views Total: | 802 |
| Sitio oficial: | Ir a la web |
| Actualizado: | May 30, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Sin embargo, otro marco CSS para crear una cuadrícula sensible, justificada/fluida de elementos utilizando CSS Flexbox. Sólo pesas en 0.3 KB (minificado) y súper flexible.
También cuenta con ancho principal personalizable, canalón, columnas anidadas y más.
Funcionamiento
Instale & descargar la FLEXY.
# NPM $ npm install @vladocar/flexy --save
Importe el FLEXY en su proyecto o incluya directamente el FLEXY. CSS en la página HTML.
<link rel="stylesheet" href="flexy.css">
El HTML de ejemplo para crear un diseño de cuadrícula.
<div class="dp100">100%</div> <div class="dp50">50%</div> <div class="dp50">50%</div> <div class="dp33">33,3%</div> <div class="dp33">33,3%</div> <div class="dp33">33,3%</div> <div class="dp25">25%</div> <div class="dp25">25%</div> <div class="dp25">25%</div> <div class="dp25">25%</div> <div class="dp20">20%</div> <div class="dp20">20%</div> <div class="dp20">20%</div> <div class="dp20">20%</div> <div class="dp20">20%</div> <div class="dp17">16,66%</div> <div class="dp17">16,66%</div> <div class="dp17">16,66%</div> <div class="dp17">16,66%</div> <div class="dp17">16,66%</div> <div class="dp17">16,66%</div> <div class="clear"></div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="clear"></div> <div class="dp12">12,5%</div> <div class="dp12">12,5%</div> <div class="fluid">Fluid</div> <div class="dp12">12,5%</div> <div class="fluid">Fluid</div> <div class="clear"></div> <div class="fluid">Fluid</div> <div class="dp25">25%</div> <div class="fluid">Fluid</div> <div class="clear"></div> <div class="fluid">Fluid</div> <div class="dp25">25%</div> <div class="dp25">25%</div> <div class="fluid">Fluid</div> <div class="clear"></div> <div class="dp25">25%</div> <div class="dp25">25%</div> <div class="fluid">Fluid</div> <div class="clear"></div> <div class="dp25">25%</div> <div class="fluid">Fluid</div> <div class="dp17">17%</div> <div class="clear"></div>
