Personalización

Cada aspecto de flexocss se controla mediante variables SCSS. Sobreescríbelas antes de importar el framework para adaptar la grilla, espaciado, breakpoints y transiciones a tu proyecto.

Cómo sobreescribir

Usa la sintaxis SCSS @use ... with para sobreescribir cualquier variable por defecto. Solo especifica las variables que quieras cambiar:

SCSS

@use "@daveaki/flexocss/scss/config" with (
  $box: 12,
  $gapStep: 4,
  $containerBlock: 1200px
);
@use "@daveaki/flexocss/scss/flexo";

Grilla

Controla el número de columnas, el ancho del container y el padding de los boxes:

Variable	Default	Descripción
`$box`	16	Número de columnas de la grilla
`$containerBlock`	1420px	Max-width de container y row
`$containerBlockLM`	1460px	Max-width en el breakpoint más grande
`$flBoxPadding`	0	Padding por defecto para .fl-box
`$flBoxPaddingIn`	8px 8px	Padding por defecto para .fl-box-in

Breakpoints

Define los nombres de los breakpoints y sus valores min-width correspondientes:

Variable	Default	Descripción
`$bp`	sm,md,lg,sp,mg,ut	Nombres de breakpoints separados por coma
`$mediaQuery`	576px,768px,1024px,1420px,1860px	Valores min-width (uno menos que $bp)
`$mediaQueryMAX`	5000px	Límite superior para media queries

El primer breakpoint (sm) es la base y no tiene media query. $mediaQuery debe tener exactamente un valor menos que $bp.

Gap & espaciado

Controla las clases gap, padding y area generadas:

Variable	Default	Descripción
`$gapStep`	8	Incremento en px entre clases gap
`$gapNumber`	10	Número de pasos gap a generar
`$gapStepArea`	16	Incremento para clases area (padding vertical)
`$gapNumberArea`	10	Número de pasos area
`$paddingStep`	8	Incremento para clases padding
`$paddingNumber`	12	Número de pasos padding
`$paddingArea`	8px,24px,48px,64px,88px,112px	Padding vertical por defecto por breakpoint

El valor máximo generado es step × number. Por ejemplo, con $gapStep: 8 y $gapNumber: 10, las clases gap van de 0 a 80px.

Orden

Variable	Default	Descripción
`$orderMin`	-10	Valor mínimo de order
`$orderMax`	10	Valor máximo de order

Transiciones

Flexocss aplica transiciones CSS a los elementos div para cambios responsive fluidos:

Variable	Default	Descripción
`$transition`	true	Habilitar/deshabilitar transiciones globalmente
`$transitionTime`	400ms	Duración de la transición
`$transitionEasing`	ease-in-out	Función de easing

Pesos de fuente

Variable	Default
`$fontWeightLight`	200
`$fontWeightRegular`	400
`$fontWeightBold`	600
`$fontWeightBlack`	800

Varios

Variable	Default	Descripción
`$env`	'dev'	Entorno: 'dev' habilita el wireframe, 'prod' lo deshabilita
`$containerOverflowXHidden`	1	Agrega overflow-x: hidden en .container
`$zIndex`	0,10	Rango z-index (inicio, fin)

Ejemplo completo

Un ejemplo de configuración completo para una grilla de 12 columnas con espaciado más ajustado:

SCSS

@use "@daveaki/flexocss/scss/config" with (
  $env: 'prod',
  $box: 12,
  $gapStep: 4,
  $gapNumber: 16,
  $containerBlock: 1200px,
  $containerBlockLM: 1400px,
  $transition: true,
  $transitionTime: 300ms,
  $transitionEasing: ease
);
@use "@daveaki/flexocss/scss/flexo";

← Anterior Wireframe

Siguiente → Ejemplo Scaffold