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
| Frameworkless | Foundation 6 | Bootstrap 4 | Materialize | |
|---|---|---|---|---|
| Responsive strategy | Desktop-down or mobile-first | Mobile-first only | Mobile-first only | Mobile-first only |
| Class naming | Your own names, no conflicts | Reserved framework classes | Reserved framework classes | Reserved framework classes |
| Grid system | Your own CSS Grid or Flexbox | Flexbox grid-x / cell | Flexbox container / row / col-* | CSS float-based row / col |
| Component library | None — build from scratch | Extensive (buttons, callouts, menus, reveal, orbit) | Very extensive (cards, modals, badges, navbars) | Material Design-aligned (cards, FABs, chips, sidenavs) |
| Design style | Fully custom | Neutral, minimal — easy to customize | Neutral, slightly opinionated — very customizable | Google’s Material Design (elevation, ripple, specific palette) |
| JS dependency | None | Optional — only for interactive components | jQuery required for interactive components | Custom JS required for most components |
| Bundle size | ~0 KB | ~140 KB CSS + ~80 KB JS | ~155 KB CSS + ~59 KB JS (no jQuery) | ~175 KB CSS + ~65 KB JS |
| Best for | New users; custom designs; desktop-down | Flexible editorial and marketing sites | General-purpose projects; team familiarity | Material Design apps and dashboards |
Why frameworkless is the default recommendation
For anyone new to Site Designer, frameworkless is the recommended starting point. Two advantages stand out:
- Desktop-down design. Frameworkless is the only option that supports the desktop-down workflow. The three frameworks are mobile-first only. Designing from the full desktop canvas — the layout you actually see in front of you — is far more intuitive, and you make full use of all the available canvas space. See mobile-first vs. desktop-down.
- Conflict-free class names. With no framework stylesheet loaded, you name your classes whatever you want. There are no reserved framework class names to collide with, so your styling stays predictable.
On top of that, going frameworkless also 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.
When to pick a framework instead
Choose Foundation, Bootstrap, or Materialize when you already know that framework or you specifically need it — for example, to reuse existing components, match a team’s conventions, or adopt Material Design. In those cases the framework’s pre-built grid and components save real time. Just remember they commit you to a mobile-first workflow.
Migration warning
Quick decision guide
- Pick No framework (frameworkless) if you’re new to Site Designer, want the desktop-down workflow, want to name your own classes without conflicts, or care most about design fidelity and bundle size. This is the default recommendation.
- Pick Foundation if you already know it and want a neutral framework that stays out of your way with flexible layout tools.
- Pick Bootstrap if your team already knows Bootstrap classes, or 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.