Framework comparison
Choosing the right CSS framework shapes how you build layouts, style components, and ship responsive designs. Site Designer supports three frameworks — Foundation 6, Bootstrap 4, and Materialize — plus a frameworkless option for full custom control.
At a glance
| Foundation 6 | Bootstrap 4 | Materialize | No framework | |
|---|---|---|---|---|
| Grid system | Flexbox grid-x / cell | Flexbox container / row / col-* | CSS float-based row / col | Your own CSS Grid or Flexbox |
| Component library | Extensive (buttons, callouts, menus, reveal, orbit) | Very extensive (cards, modals, badges, navbars) | Material Design-aligned (cards, FABs, chips, sidenavs) | None — build from scratch |
| Design style | Neutral, minimal — easy to customize | Neutral, slightly opinionated — very customizable | Google’s Material Design (elevation, ripple, specific color palette) | |
| JS dependency | Optional — only needed for interactive components (reveal, accordion, orbit) | jQuery required for interactive components | Custom JS required for most components | |
| Bundle size | ~140 KB CSS + ~80 KB JS (minified) | ~155 KB CSS + ~59 KB JS (without jQuery) | ~175 KB CSS + ~65 KB JS | |
| Best for | Flexible editorial and marketing sites | General-purpose projects; large team familiarity | Apps and dashboards with a Material Design aesthetic |
When to go frameworkless
None of the three frameworks is required. Removing a framework entirely makes sense when:
- Your design system is strongly custom and framework class names would just add overrides.
- Bundle size is a priority — no framework means no ~140 KB CSS payload.
- You are comfortable writing CSS Grid and Flexbox layouts by hand.
- The project has a long lifespan and you don’t want to track a third-party release schedule.
In Site Designer, select No framework in Project Settings → Framework at project creation.
Migration warning
Quick decision guide
- Pick Foundation if you want a neutral foundation (pun intended) that stays out of your way and you need flexible layout tools without committing to a specific look.
- Pick Bootstrap if your team already knows Bootstrap classes, or if you need the widest possible browser support including IE11.
- Pick Materialize if you’re building a product or dashboard that should look and feel like a Google/Android app.
- Pick No framework if design fidelity and bundle size matter most and you’re comfortable with vanilla CSS.
