CoffeeCup Site Designer is a desktop application for building responsive websites visually on Windows and macOS. A browser-rendered canvas combines page structure, CSS styling and interactive elements. The application produces HTML, CSS, JavaScript and associated website assets.
Page construction
Projects start from a blank design, a template or an existing Site Designer project. The canvas accepts headings, paragraphs, pictures, videos and containers. Rearranging elements or nesting them within containers establishes the page structure.
Text can be edited directly within the page. A tree view exposes nested elements when a container is difficult to select on the canvas. The selected element's properties connect it to resources such as an image or video.
Pages and project resources
The Page Manager adds, duplicates and orders project pages. The resource library organizes images, documents and scripts into folders. This resource folder structure carries through to the exported website, preserving the project's arrangement in its hosting files.
Responsive layouts and breakpoints
A project can use Bootstrap, Foundation or Materialize, each supplying framework styles and interactive components. These approaches use a mobile-first workflow. Designs begin with smaller screens, with adjustments for wider screens added as the layout develops.
Frameworkless projects start without predefined styles or breakpoints. They support either mobile-first or desktop-down design, so the starting layout can suit either approach. Interactive features in a frameworkless project need their own scripts.
The viewport slider changes the canvas width continuously to show where the layout needs adjustment. Custom breakpoints apply different styles or content arrangements at selected widths. These changes become CSS media queries in the website.
CSS Grid divides containers into rows and columns and controls element spans. Flexbox arranges elements along a layout direction and manages alignment and order. It also determines whether elements grow, shrink or wrap as space changes.
Device View provides preset screen dimensions and accepts custom width and height values. Browser preview opens the design in an installed browser. Responsive pictures supply image variations for viewport sizes; a focal-point control identifies the area to keep in view.
CSS styling and element states in CoffeeCup Site Designer
The Styles pane separates layout controls from visual design and effects. Spacing and dimensions determine an element's place within the page. Typography, colors, backgrounds and borders control its appearance, while transforms, filters and blend modes affect its rendering.
CSS filters and blend modes can also affect pictures within the page. Styles can be applied to default, hover, active or focus states. A button or navigation item can therefore change appearance in response to interaction.
Typography controls include Google Fonts, line height, weight and spacing. Global text appearance belongs in the Styles pane. The inline editor handles variations within a passage, such as emphasizing selected words or adding a link, independently of shared text styles.
CSS classes share styling across matching elements. Changing a class updates their appearance while their text and other content remain separate. The element inspector displays the CSS rules applied to a selection, connecting its visual result to its styling.
Reusable components
Components save groups of elements, such as a navigation menu, gallery or accordion, for insertion into a project. Library items can be customized after insertion. The component library presents items for the chosen framework, with free and premium offerings.
You can also save your own selection as a component, including a full page. These saved designs can be reused in other projects, carrying a group of elements into another website for further editing.
Synchronized symbols
Symbols keep repeated content synchronized within a site. Editing a linked header, footer or other symbol instance updates every linked instance across the project's pages. This allows shared content to be maintained from any of its linked placements.
An instance must be unlinked before it can differ from the others. A shared footer can stay synchronized while a particular page uses an independently edited copy. Symbols cannot contain other symbols, which limits how linked groups can be nested.
Custom HTML and scripts
Custom HTML can be placed through an HTML element. Head and footer code allow additional markup or scripts to accompany the visual design. CSS stylesheets and JavaScript files remain editable within the project's resources.
A selected element or container can be opened in CodePen to inspect, modify or copy its HTML and CSS. This provides access to a particular part of the design without exporting the entire site.
Page metadata and sitemap files
Page properties include metadata, and a structured-data workflow adds annotations to content. Site Designer can also generate sitemap and robots.txt files for the project.
The generated sitemap uses placeholder server paths for its page links. Those placeholders need the final website address before the links point to hosted pages, matching the exported sitemap to the site's publishing destination.
Website export and publishing
Full export creates a local folder containing pages, stylesheets, scripts, images and other resources. Those files can be uploaded to your chosen hosting service with an upload utility, retaining the resource folder structure from the project.
The built-in Publish option sends the project to CoffeeCup S-Drive through a CoffeeCup account. Export remains the route for preparing files to upload to another hosting service, separating local file output from direct S-Drive publishing.
Site Designer is paid software with a free trial and a perpetual license. Purchasing includes a year of upgrades, and the application remains usable afterward.
