Glossary of terms

A plain-language reference for the terms you’ll encounter in the Site Designer interface and this documentation.

B

Breakpoint A specific viewport width at which your layout changes. Site Designer uses the width slider to define breakpoints, and you switch into “breakpoint mode” to edit styles that apply only below that width.

C

Canvas The central editing area in Site Designer. The canvas renders in a real browser engine — what you see is what visitors see.

Class A CSS identifier you assign to one or more elements so they share the same styles. In Site Designer, classes are shown in the Design → Element pane. Editing a class’s styles affects all elements using that class.

Component A pre-built, reusable block of HTML and CSS. Site Designer includes Foundation, Bootstrap, and Materialize components in the toolbar. You can also save your own components for reuse across pages.

Container The most common structural element. A <div> used to wrap, group, and control the layout of child elements.

Control panes The right-side panel in Site Designer, containing five tabs: Content, Design, Effects, Outline, and CSS.

D

Design pane One of the five control pane tabs. Contains two sub-tabs: Element (class/ID selectors) and Style (all visual CSS controls).

E

Element Any HTML tag you place on the canvas — a heading, paragraph, image, container, button, grid, form field, etc.

Export Generating a set of static HTML, CSS, and JS files from your project that you can host anywhere. Site Designer always exports clean, W3C-compliant code.

F

Framework A CSS library (Foundation, Bootstrap, or Materialize) you can optionally include in your project. Frameworks provide a grid system, pre-built UI components, and utility classes.

Frameworkless Building without any CSS framework. You write (or let Site Designer generate) all styles yourself. Produces the lightest possible output.

G

Grid (CSS Grid) A two-dimensional CSS layout system. Site Designer’s Master Grid panel provides a visual interface for creating CSS Grid layouts.

I

ID A unique CSS identifier that can be assigned to one element per page. Used for deep linking (URL anchors) and, in Site Designer, for element-specific style overrides.

Inline editing Double-clicking a text element on the canvas enters inline editing mode, where you type directly on the canvas just like a word processor.

L

Layout element An element whose primary purpose is organizing child elements — Grid, Flex container, Columns, etc.

M

Master Grid Site Designer’s visual CSS Grid editor. Open it from the toolbar to configure rows, columns, and grid areas without writing code.

O

Outline pane One of the five control pane tabs. Shows a hierarchical tree of all elements on the page. You can drag rows in the Outline to restructure the DOM without touching the canvas.

P

Page Manager The toolbar tool that lists all pages in your project. Use it to add, rename, duplicate, reorder, and delete pages.

Pseudo-class A CSS keyword added to a selector to style an element in a particular state. Examples: :hover, :focus, :active, :first-child. Site Designer exposes pseudo-classes in the state dropdown of the selector field.

Publish Sending your site live to CoffeeCup’s S-Drive hosting (or a custom FTP server) directly from Site Designer with one click.

R

Responsifier Site Designer’s colloquial name for the width slider + breakpoint system. It’s the set of tools you use to make your design responsive.

.rsd file The native Site Designer project file format. All project data — HTML structure, styles, assets, pages — is stored in a single .rsd file.

S

S-Drive CoffeeCup’s included hosting platform. Publish your project to S-Drive and get a live URL instantly. Custom domains are supported.

Selector The part of a CSS rule that identifies which elements to style. In Site Designer, the selector field shows the class or ID currently being edited, along with any pseudo-class state.

Symbol A globally synced component. Editing a Symbol updates every instance of it across all pages in your project simultaneously.

T

Template A pre-built page design included with Site Designer. Choose a template when creating a new project or applying to an existing page. Templates are fully editable.

Toolbar The horizontal bar at the top of the Site Designer window. Gives access to the Page Manager, Resources, Templates, Components, Preview, and Settings.

W

Width slider The horizontal control at the bottom of the canvas. Drag it to preview your design at any viewport width. Dashed lines mark your breakpoints.