Customization

Every aspect of flexocss is controlled via SCSS variables. Override them before importing the framework to tailor the grid, spacing, breakpoints, and transitions to your project.

How to override

Use the SCSS @use ... with syntax to override any default variable. Only specify the variables you want to change:

SCSS

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

Grid

Control the number of columns, container width, and box padding:

Variable	Default	Description
`$box`	16	Number of grid columns
`$containerBlock`	1420px	Container and row max-width
`$containerBlockLM`	1460px	Max-width at the largest breakpoint
`$flBoxPadding`	0	Default padding for .fl-box
`$flBoxPaddingIn`	8px 8px	Default padding for .fl-box-in

Breakpoints

Define breakpoint names and their corresponding min-width values:

Variable	Default	Description
`$bp`	sm,md,lg,sp,mg,ut	Comma-separated breakpoint names
`$mediaQuery`	576px,768px,1024px,1420px,1860px	Min-width values (one less than $bp)
`$mediaQueryMAX`	5000px	Upper bound for media queries

The first breakpoint (sm) is the base and has no media query. $mediaQuery must have exactly one fewer value than $bp.

Gap & spacing

Control the generated gap, padding, and area utility classes:

Variable	Default	Description
`$gapStep`	8	Increment in px between gap classes
`$gapNumber`	10	Number of gap steps to generate
`$gapStepArea`	16	Increment for area (vertical padding) classes
`$gapNumberArea`	10	Number of area steps
`$paddingStep`	8	Increment for padding classes
`$paddingNumber`	12	Number of padding steps
`$paddingArea`	8px,24px,48px,64px,88px,112px	Default vertical padding per breakpoint

The maximum generated value equals step × number. For example, with $gapStep: 8 and $gapNumber: 10, gap classes go from 0 to 80px.

Order

Variable	Default	Description
`$orderMin`	-10	Minimum order value
`$orderMax`	10	Maximum order value

Transitions

Flexocss applies CSS transitions to div elements for smooth responsive changes:

Variable	Default	Description
`$transition`	true	Enable/disable transitions globally
`$transitionTime`	400ms	Transition duration
`$transitionEasing`	ease-in-out	Easing function

Font weights

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

Miscellaneous

Variable	Default	Description
`$env`	'dev'	Environment: 'dev' enables wireframe, 'prod' disables it
`$containerOverflowXHidden`	1	Add overflow-x: hidden on .container
`$zIndex`	0,10	Z-index range (start, end)

Full example

A complete configuration example for a 12-column grid with tighter spacing:

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";

← Previous Wireframe

Next → Scaffold Example