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--><!--Inicializa chef una vez éste haya cargado-->
NPM
npm install -D chef-layout
;Chef;Chef;
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
.column
contenedor al 100% del largo que apila su contenido solo de forma vertical
.inline
contenedor que resetea el largo a automatico y modifica la propiedad display flex por inline-flex
Clases de modificación
.row.top
permite apilar el contenido en la parte superior del contenedor
.column.top
permite apilar el contenido en la parte superior del contenedor
.row.right
permite apilar el contenido en la parte derecha del contenedor
.column.right
permite apilar el contenido en la parte derecha del contenedor
.row.bottom
permite apilar el contenido en la parte inferior del contenedor
.column.bottom
permite apilar el contenido en la parte inferior del contenedor
.row.left
permite ampliar el contenido en la parte izquierda del contenedor
.column.left
permite ampliar el contenido en la parte izquierda del contenedor
.row.middle
permite apilar el contenido al centro del en el eje Y
.column.middle
permite apilar el contenido al centro del en el eje Y
.row.center
permite apilar el contenido al centro del en el eje X
.column.center
permite apilar el contenido al centro del en el eje X
.centered
permite apilar todo el contenido al centro
Clases de propiedad
.split
otorga la propiedad de ancho autoajustable
.auto
resetea la propiedad autoajustable
Configuracion opcional
Chef.cache
Permite cachear el css preprocesado con localstorage
Chefcache = true;
Chef.prefix
Permite añadir prefijo a los nombres de clases asignados a chef
Chefprefix = 'chef-';
Chef.columns(length,margin)
Permite generar x cantidad de flex-basis