Acquia Site Studio Site Builder cheat sheet

Site Studio is a low-code site building toolset for Drupal; its core artifacts (components, templates, style guides) are stored as Drupal config entities, so they are exportable and deployable via config management.

A component is a reusable UI building block defined once and placed many times; a template is a page-level layout that defines regions where components are dropped.

Site Studio requires the Drupal core module and the Site Studio module enabled; the UI is accessed from the Drupal admin toolbar via the Site Studio menu.

Content authors edit layouts in the Site Studio UI (in-place editing) while developers define components, element structure, and styling rules in the Site Studio builder.

Base unit and responsive breakpoint settings are global Site Studio configuration; breakpoints defined there drive the responsive options available on every element and component.

Site Studio packages are exported as a package file (or config) and imported into another environment; the package contains components, templates, style guides, and configuration.

Rebuilding the Site Studio output (compiling CSS/JS and markup) is required after changing components, templates, or styles for changes to appear in the rendered site.

Site Studio uses a style guide to centralize design tokens (colors, typography, spacing) so components reference shared values rather than hard-coded ones.

A component is composed of elements arranged in a tree; each element has a type (container, text, image, link, etc.) and configurable properties.

Element properties can be exposed to content authors as editable fields; unexposed properties are fixed by the component builder and not editable in layout.

Components support slots/regions so other components can be nested inside them, enabling composition of complex layouts from smaller parts.

A component can be marked as a layout/template component or a standard component; standard components are placed into template regions.

Reusable component instances share one definition: editing the component definition updates every instance, while per-instance field values remain independent.

Components can be duplicated to create variants; the duplicate retains element structure and styling but is a separate definition thereafter.

Deleting a component that is in use affects every layout where it is placed, so dependency checks must precede deletion.

Component field values can be populated by content (e.g., entity fields) via the Site Studio content integration, so a component placed in a template can render node-specific data.

A template defines the page structure (header, main, footer regions) and is assigned to content types or paths; the assigned template controls how that page renders.

Templates are built from regions; each region holds components, and region markup is defined by the template's element tree.

Template assignment can be scoped by content type, by path, or as a default fallback when no more specific template matches.

Content templates wrap node content: the node's fields render inside the template's designated content region rather than through the default Drupal field rendering.

Layout canvas editing lets builders drag components into regions and reorder them; nesting is limited by which components expose slots.

A master template can be used as a base so multiple page templates share a common header/footer without duplicating those components.

Previewing a template shows the layout with sample or existing content; the rendered result depends on the content context selected.

Changes to a template apply to all pages assigned to it; per-page differences require either a different template or per-instance component values.

The style guide stores design tokens such as colors, font families, font sizes, and spacing; components and elements reference these tokens instead of literal values.

Element styles are set in the Site Studio style editor per element and per breakpoint; base styles apply everywhere and breakpoint styles override at that width.

Responsive breakpoints are defined globally; each element can carry different style values per breakpoint, and the cascade resolves to the narrowest matching breakpoint.

Custom CSS can be added at the style guide or component level; scoping matters because global CSS affects all pages using that style guide.

Site Studio compiles its own CSS/JS assets; after style or component changes the compiled assets must be rebuilt for the front end to reflect them.

Site Studio UI kit / custom theme integration: a Drupal theme can provide base templates and CSS, and Site Studio output is layered on top of the theme.

Configuration is exportable via Drupal config; environment promotion of Site Studio changes uses package export/import or config sync, not manual recreation.

Access control for Site Studio is permission-based (e.g., administer Site Studio, build layouts); roles determine who can edit components versus content.