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
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 |
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/[email protected]/iife.min.js"></script>
<!--
Inicializa chef una vez 茅ste haya cargado
-->
<script>
function mainChef(){
Chef.default();
Chef.columns(20);
}
</script>
npm install -D chef-layout
import Chef from 'chef-layout';
Chef.default();
Chef.columns(20);
por defecto chef se creo para trabajar replicando estilos flex-box, por lo que incorpora esta pila por defecto.
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.
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;
}
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;
}
contenedor que resetea el largo a automatico y modifica la propiedad display flex por inline-flex
.inline{
width: auto;
display:inline-flex;
}
permite apilar el contenido en la parte superior del contenedor
.row.top{
align-items:flex-start
}
permite apilar el contenido en la parte superior del contenedor
.column.top{
justify-content:flex-start
}
permite apilar el contenido en la parte derecha del contenedor
.row.right{
justify-content:flex-end
}
permite apilar el contenido en la parte derecha del contenedor
.column.right{
align-items:flex-end
}
permite apilar el contenido en la parte inferior del contenedor
.row.bottom{
align-items:flex-end
}
permite apilar el contenido en la parte inferior del contenedor
.column.bottom{
justify-content:flex-end
}
permite ampliar el contenido en la parte izquierda del contenedor
.row.left{
justify-content:flex-start
}
permite ampliar el contenido en la parte izquierda del contenedor
.column.left{
align-items:flex-start
}
permite apilar el contenido al centro del en el eje Y
.row.middle{
align-items:center
}
permite apilar el contenido al centro del en el eje Y
.column.middle{
justify-content:center
}
permite apilar el contenido al centro del en el eje X
.row.center{
justify-content:center
}
permite apilar el contenido al centro del en el eje X
.row.center{
align-items:center
}
permite apilar todo el contenido al centro
.centered{
justify-content:center;
align-items:center;
}
otorga la propiedad de ancho autoajustable
.split{
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
resetea la propiedad autoajustable
.auto{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
Permite cachear el css preprocesado con localstorage
Chef.cache = true;
Permite a帽adir prefijo a los nombres de clases asignados a chef
Chef.prefix = 'chef-';
Permite generar x cantidad de flex-basis