---
agentTools:
  projectIndex: https://flexi.readme.io/llms.txt
---

# 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.