Site Designer Guide
framework switching migration workflow

Switching frameworks mid-project

Switching frameworks after you’ve built content is one of the most disruptive changes you can make to a Site Designer project. This article explains exactly what changes, what stays the same, and how to make the switch as safely as possible.

What changes when you switch

When you select a different framework in Project Settings, Site Designer replaces the framework’s CSS file. That means:

  • All framework utility classes tied to the old framework become invalid. A Bootstrap col-md-6 is meaningless to Foundation; a Foundation grid-x is meaningless to Bootstrap. Any element styled only with framework classes will lose its layout.
  • Framework-specific JavaScript components stop working. Bootstrap modals rely on Bootstrap’s JS; Foundation reveals rely on Foundation’s JS. Switching replaces the JS bundle too.
  • Component defaults change visually. Font sizes, button styles, margin resets — all of these differ between frameworks. Expect visual differences across the board.

What does NOT change

  • Your custom classes are safe. Any class you created in the Style pane (not sourced from the framework) survives the switch.
  • The HTML structure is preserved. Element nesting, IDs, and data-* attributes you added manually are untouched.
  • Your content — text, images, links — remains exactly as-is.

Steps to switch safely

  1. Document all framework classes in use

    Before switching, go through your project page by page. In the Outline pane, click each element and note every framework class applied to it. Export this list to a text file. You’ll use it to manually re-apply the equivalent classes from the new framework.

  2. Export a full backup

    Use Settings → Export to save a complete copy of the project, and also save the .rsd project file to a safe location. If the switch goes wrong, you can restore from this backup.

  3. Switch the framework

    Go to Project Settings → Framework, select the new framework, and confirm. Site Designer replaces the framework files immediately.

  4. Re-apply affected classes

    Work through your documentation list from Step 1. For each element that had framework classes, open the Content pane, remove the old class names, and add the equivalent classes from the new framework. Use the framework class quick reference to find equivalents side by side.

  5. Test every page in Live Preview

    Open Live Preview and test each page. Pay particular attention to navigation, grid layouts, interactive components (modals, accordions, tabs), and responsive behavior at mobile widths.

When to start fresh instead

Starting fresh is the right call when:

  • The project has more than 10 pages and extensive framework-class layouts.
  • The visual design needs to change anyway (a redesign is underway).
  • The old framework’s interactive components are deeply integrated throughout (many modals, accordions, carousels).

If you’re starting fresh, export all content text and images first so you can paste them into the new project.

Recommendation

Don’t switch frameworks unless you have a clear, necessary reason. The switching cost is high. Before starting a new project, invest time in the framework comparison to pick the right tool from the beginning.