Predefined framework classes
When you build with a CSS framework in Site Designer, you have access to hundreds of predefined classes — ready-made styles for buttons, grids, alerts, cards, and more. You do not write these classes yourself; they live in the framework’s own stylesheet and load automatically with your project.
What predefined classes are
Framework classes are class names defined inside the framework’s CSS file. When you apply one to an element, the browser matches it to those pre-written rules and applies the styles. You are not creating new CSS — you are activating styles that already exist.
In Site Designer’s class field, framework classes appear with a gray color indicator (see The color-coded selector system) to distinguish them from classes you have written yourself.
Foundation classes
Foundation provides a large library of component and utility classes. Common examples:
| Class | What it does |
|---|---|
.grid-x | Starts a horizontal flexbox grid row |
.cell | Defines a grid column inside .grid-x |
.small-12.medium-6 | Full width on small, half width on medium+ |
.callout | A bordered notice/alert box |
.button | Styles an anchor or button as a clickable button |
.card | A padded, shadowed card container |
.menu | A horizontal or vertical navigation list |
Bootstrap classes
Bootstrap uses a 12-column grid and a comprehensive set of utility classes:
| Class | What it does |
|---|---|
.container | Centers content with responsive max-width |
.row | Grid row (flexbox) |
.col-md-6 | 6-column-wide cell on medium+ screens |
.btn | Base button style |
.btn-primary | Primary-colored button |
.alert | Notification box |
.d-flex | Sets display: flex |
.text-center | Centers text |
Materialize classes
Materialize implements Material Design with its own class system:
| Class | What it does |
|---|---|
.card | Material Design card surface |
.waves-effect | Adds ripple animation on click |
.modal | Modal dialog container |
.btn | Material-styled button |
.collection | A vertical list of items |
.chip | Small tag/label element |
Applying framework classes in Site Designer
Type the class name directly into the class field on the Design pane’s Element tab. As you type, the autocomplete dropdown shows matching framework class names so you can confirm the spelling before committing.
Overriding framework styles with your own classes
Framework classes are a starting point. You will almost always want to customize them — change a button color, adjust padding on a card, or override a heading size.
The correct way to do this is to add your own class alongside the framework class. For example, apply both .button (Foundation) and .cta-button (your class) to the same element, then style .cta-button in the Style pane to override whatever you need.
When specificity is equal (both are single-class selectors), the rule that appears later in the stylesheet wins. Your custom CSS is loaded after the framework stylesheet, so your classes naturally win ties.
