Menu icon Foundation
Upgrade existing site from F5 to F6 - good idea?

I have an existing Foundation 5 site that is updated very regularly, so I am considering to upgrade it to F6.

I will backup first, and understand about having to adapt some paths to JS and CSS in the new Foundation, and I will probably be able to find and change all that.

But are there any other things that I have to take into account, to prevent any nasty surprises? E.g. will I have to change the breakpoints (which are currently default)?

The site is currently using these Foundation elements:
- grid
- forms
- type
- visibility
- type

I made some changes in settings.scss, but most of my own css code is added in an extra include at the end of the app.scss

upgradingupdatingF5F6

I have an existing Foundation 5 site that is updated very regularly, so I am considering to upgrade it to F6.

I will backup first, and understand about having to adapt some paths to JS and CSS in the new Foundation, and I will probably be able to find and change all that.

But are there any other things that I have to take into account, to prevent any nasty surprises? E.g. will I have to change the breakpoints (which are currently default)?

The site is currently using these Foundation elements:
- grid
- forms
- type
- visibility
- type

I made some changes in settings.scss, but most of my own css code is added in an extra include at the end of the app.scss

Brandon Arnold almost 4 years ago

We're upgrading a few sites, right now but not all of them. Out of those components, i wouldn't worry too much about the upgrade.

Seems to me the only two areas you'd need to be concerned about is we've changed the way post-fix and prefix works with forms, so you'd need to adjust that. Then for the grid we chnaged blockgrid to be parent level sizing, so if you had something that looked like this

<div class="row">
  <div class="small-12 columns">
    <ul="small-block-grid-2 medium-block-grid-4">
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
    </ul>
  </div>
</div>

You'd change it to work like this

<div class="row small-up-2 medium-up-4">
  <div class="column">Stuff</div>
  <div class="column">Stuff</div>
  <div class="column">Stuff</div>
  <div class="column">Stuff</div>
</div>

Hope that helps

Evert Albers almost 4 years ago

Thanks Brandon, since I'm not even using the blockgrid but only the normal grid, this means that you can't see problems ahead.

Of course that's no guarantee, I may still run into stuff, but I'm mentally prepared for that, by the look of my avatar.