Foundation

To get our breakpoints aligned with the default Foundation ones, and to get our class names generating correctly, we need to make some tweaks to config/flexi.js.

First, let's define the breakpoints:

JavaScript

breakpoints: [
    { name: 'small', prefix: 'small', begin: 0 },
    { name: 'medium', prefix: 'medium', begin: 640 },
    { name: 'large', prefix: 'large', begin: 1024 },
    { name: 'xlarge', prefix: 'xlarge', begin: 1200 },
    { name: 'xxlarge', prefix: 'xxlarge', begin: 1440 }
  ]

Second, we'll need to remove the col- prefix, so set:

JavaScript

columnPrefix: null

Lastly, we need to add the columns class. In flexi 1.2.0, you will also have to manually add the columns class, but we will be adding a columnSuffix to handle this as well.

If we want to rely fully on the Foundation CSS, we can also tell flexi not to include any of its CSS by setting:

JavaScript

includeCSS: false

Note that if you do this, you will have to include Foundation CSS yourself, and that flexi elements and attributes will no longer be styled.