Config

Customize flexi by editing your config/flexi.js

Default Settings

{
 // the number of columns for the grid
 columns: 12,

 // optional, used for column classes: `${colPrefix}-${breakpointPrefix}-${columnNumber}`
 columnPrefix: 'col',

 // if false, @media css is not included
 includeMediaCSS: true,

 // if false, default element styles are not included
 includeElementCSS: true,

 // if true, will convert layout attributes on non-flexi elements to classes as well
 transformAllElementLayoutAttributes: false,

 // grid and layout element gutters
 gutterPadding: '.5rem',

 // if false, no styles are included (trumps `includeMediaCSS` and `includeElementCSS`)
 includeCSS: true,

 // an array of [breakpoints](doc:media-css) to use in your app
 breakpoints: [
   { name: 'mobile', prefix: 'xs', begin: 0 },
   { name: 'tablet', prefix: 'sm', begin: 768 },
   { name: 'desktop', prefix: 'md', begin: 992 },
   { name: 'huge', prefix: 'lg', begin: 1200 }
 ]
}

config.columns

The total number of columns you want Flexi to generate or your CSS framework provides. This is used by Flexi when generating the grid, and used when validating the values of layout attributes discovered at build time.

config.columnPrefix

This setting allows you to configure the structure of the generated grid class names.

By default, flexi generates a grid identical to bootstrap's to make converting or interop seamless. See Alternative CSS to work with your CSS framework or grid of choice.

config.includeMediaCSS

If false, @media based responsive utilities and grid classes will not be generated. @container based utilities and grid classes will still be generated.

config.includeElementCSS

If you have no desire to use flexi elements, set this to false.

If false, default element styles will not be included, this includes the styles for . Since all layout elements are entirely implemented via CSS, this will cause all layout elements to cease functioning unless new CSS is provided for them.

You will want to replicate the CSS for or rely entirely on the flexi/mixins/container mixin for implementing @container support.

config.transformAllElementLayoutAttributes

By default, only layout attributes present on elements provided by flexi will be processed at build time and converted to classes. Set this to true to have all elements in your templates be processed.

config.gutterPadding

Grid columns will have half of this padding applied to left and right respectively.

config.includeCSS

Set to false if you want absolutely no styles to be included in your app from Flexi. This trumps other CSS settings, and results in layout elements and responsive layout attributes not working unless alternative CSS is provided.

config.breakpoints

Your config must have a breakpoints array. This array determines viewport-specific template names, @media CSS/@container CSS, layout service properties, and breakpoint attribute names.

// The default breakpoints
[
  { name: 'mobile', prefix: 'xs', begin: 0 },
  { name: 'tablet', prefix: 'sm', begin: 768 },
  { name: 'desktop', prefix: 'md', begin: 992 },
  { name: 'huge', prefix: 'lg', begin: 1200 }
]


`javascript breakpoint.name`	The name of the breakpoint's viewport specific template. Is made available as an `is<Name>` boolean on the device/layout service
`javascript breakpoint.prefix`	The attribute prefix, and as a postfix in the responsive utility classes.
`javascript breakpoint.begin`	The pixel value at which the breakpoint becomes valid if equal to or larger than.

Breakpoints span from their begin up to the begin of the next largest breakpoint. Attributes applied to a breakpoint will apply to all larger breakpoints unless the attribute is overridden by a larger breakpoint.