Framework comparison

Choosing a CSS framework is the first decision you make in a new project, and it shapes everything after it: how you build layouts, what you can name your classes, which direction you design in, and how much CSS your visitors download.

When you first start the app, you’re prompted to choose a template using the framework you want to build with — you can save that preference for future projects too. Whichever you pick is reflected in the top-left corner of the app, so you can tell at a glance which one an open project is using.

Site Designer gives you four options — the frameworkless route, plus Foundation 6, Bootstrap 4 and Materialize.

At a glance

How to choose

Read this list top to bottom and stop at the first line that describes you.

• Someone told you which framework to use — a client, a team convention, an existing codebase. Use that one. The rest of this page is context, not a decision.
• You already know Foundation, Bootstrap or Materialize. Use the one you know. Familiarity with the class names beats every other consideration here.
• You need Material Design specifically — the elevation, the ripple, the Google/Android look. Pick Materialize; it is the only one that gives you that out of the box.
• None of the above. Go frameworkless. This is where most new users land.

Going frameworkless

Select No framework under Project Settings → Framework when you create the project.

Beyond the reasons in the tip above, frameworkless is also the better fit when:

• Your design is strongly custom, and framework class names would only add overrides to fight.
• Page weight is a priority — no framework means no extra CSS or JS payload before your own styles.
• You are comfortable building layouts with CSS Grid and Flexbox, which Site Designer gives you visual controls for either way.
• The project has a long life ahead and you would rather not track someone else’s release schedule.

The trade-off is real and worth stating plainly: you build your components once, yourself. A framework hands you a navbar, a modal and a card on day one. Frameworkless hands you an empty canvas and no reserved names.

When a framework earns its place

Choose Foundation, Bootstrap or Materialize when you already know it or specifically need it — to reuse existing components, match a team’s conventions, or adopt Material Design. In those cases the pre-built grid and components save real time.

Just be clear about what comes with it: all three are mobile-first only. Whichever you pick, you will be starting your design at the narrowest screen and working up.

This choice is permanent

Each framework’s own documentation

For anything beyond what Site Designer’s visual controls expose, each framework’s own docs are the authority:

• Foundation 6 documentation
• Bootstrap 4 documentation
• Materialize documentation