chef-layout

chef-layout

Es una pequeña librería flexbox de estilos autogenerativos, esta posee la capacidad de replicar estilos para un determinado grupo de media query a continuación se enseña un ejemplo de lo simple que es replicar estilos con chef

Beneficio

Uno de los mayores beneficio de chef el peso, ya que con tan solo 1.38 kbs gzip es capaz de generar más 20 kbs de css

salida	Kbs
normal	6.37
min	3.53
gzip	1.38

Instalación

HTML

Se recomienda este proceso de instalacion ya que la carga del css generativo por chef, queda independiente del bundle

<!--
Carga chef de forma asíncrona
-->
<script async
        onload="mainChef()"
        src="https://cdn.jsdelivr.net/npm/chef-layout@0.0.8/iife.min.js"></script>  
<!--
Inicializa chef una vez éste haya cargado
-->
<script>
function mainChef(){
    Chef.default();
    Chef.columns(20);
}
</script>

NPM

npm install -D chef-layout

import Chef from 'chef-layout';
    Chef.default();
    Chef.columns(20);

Layout Flex-Box

por defecto chef se creo para trabajar replicando estilos flex-box, por lo que incorpora esta pila por defecto.

Clases de contención

Antes de comenzar se alerta que el concepto de columna y fila es distinto al de otros framework css, ya que este se orienta no en el modelo tradicional de tablas, chef vee el contenedor como algo independiente de una tabla por lo que una fila (.row) apila el contenido solo de forma horizontal y una columna(.column) apila el contenido de forma vertical.

.row

contenedor al 100% del largo que apila su contenido de forma horizontal y en cascada

.row{
   width: 100%;
   height: auto;
   display: flex;
   box-sizing: border-box;
   flex-flow: row wrap;
}

.column

contenedor al 100% del largo que apila su contenido solo de forma vertical

.column{
   width: 100%;
   height: auto;
   display: flex;
   box-sizing: border-box;
   flex-flow: column nowrap;
}

.inline

contenedor que resetea el largo a automatico y modifica la propiedad display flex por inline-flex

.inline{
   width: auto;
   display:inline-flex;
}

Clases de modificación

.row.top

permite apilar el contenido en la parte superior del contenedor

.row.top{
   align-items:flex-start
}

.column.top

permite apilar el contenido en la parte superior del contenedor

.column.top{
   justify-content:flex-start
}

.row.right

permite apilar el contenido en la parte derecha del contenedor

.row.right{
   justify-content:flex-end
}

.column.right

permite apilar el contenido en la parte derecha del contenedor

.column.right{
   align-items:flex-end
}

.row.bottom

permite apilar el contenido en la parte inferior del contenedor

.row.bottom{
   align-items:flex-end
}

.column.bottom

permite apilar el contenido en la parte inferior del contenedor

.column.bottom{
   justify-content:flex-end
}

.row.left

permite ampliar el contenido en la parte izquierda del contenedor

.row.left{
   justify-content:flex-start
}

.column.left

permite ampliar el contenido en la parte izquierda del contenedor

.column.left{
   align-items:flex-start
}

.row.middle

permite apilar el contenido al centro del en el eje Y

.row.middle{
   align-items:center
}

.column.middle

permite apilar el contenido al centro del en el eje Y

.column.middle{
   justify-content:center
}

.row.center

permite apilar el contenido al centro del en el eje X

.row.center{
   justify-content:center
}

.column.center

permite apilar el contenido al centro del en el eje X

.row.center{
   align-items:center
}

.centered

permite apilar todo el contenido al centro

.centered{
   justify-content:center;
   align-items:center;
}

Clases de propiedad

.split

otorga la propiedad de ancho autoajustable

.split{
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 0%;
}

.auto

resetea la propiedad autoajustable

.auto{
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
}

Configuracion opcional

Chef.cache

Permite cachear el css preprocesado con localstorage

Chef.cache = true;

Chef.prefix

Permite añadir prefijo a los nombres de clases asignados a chef

Chef.prefix = 'chef-';

Chef.columns(length,margin)

Permite generar x cantidad de flex-basis