CoffeeCup Site Designer (formerly CoffeeCup Visual Site Designer) allows you to design visually with the Bootstrap and Foundation frameworks. No code. Build faster. Design better.
This CoffeeCup program features a width slider and custom breakpoints for creating device-agnostic websites. It also presents a familiar front-end workflow with custom classes and IDs.
Furthermore, CoffeeCup Site Designer offers full layout and design capabilities with Flexbox and intuitive CSS3 controls. With a Components Library of pre-built items, plus Symbols for making global content edits.
The intuitive controls give access to all the design power CSS has to offer. Without tedious code editing, creating and experimenting comes naturally. Select, click, point, pick and scroll to create websites and pages that are out of this world.
Working directly in the browser not only creates the unique live design experience, it also allows the code to be semantic and clean. No (confusing) code generation is needed, the CSS3 is written directly to a real stylesheet, resulting in clean and easy to interpret rules.
Specify the default styles for each element. Then use your own classes to create design variations. Change the properties across the site for every element type, class, or ID with a single edit. The multi-class system has your back, resulting in design creativity and productivity you can’t experience elsewhere.
Use CSS3 properties such as translate, rotate and skew to create powerful visual effects. On any element and without graphics editor.
Soar to new levels with CoffeeCup Site Designer
This massive update provides a Visual Interface for the powerful Bootstrap 3 (and 4) and Foundation 6 front-end frameworks. We also added the already highly praised Components Library – easily ad your own and reuse them across projects. Or even better, select from a big bag of uber-cool prebuilt components such as responsive navigations, galleries, video backgrounds, framework components and more.
New in CoffeeCup Site Designer 3 are also Symbols for Content Syncing, Awesome Animations (that are easy to make), Image Filters and Blends, Payment Buttons, plus a plethora of new, impressive Design Controls.
CoffeeCup Responsive Site Designer Features:
Create and Design
- Drag-n-drop content elements like headers, images, buttons, icons and more – Up to 21 (+ 33 variations)
- Organize images and other assets in the Project Resource Library
- Smooth and familiar front-end design workflow using custom selectors – Target types, (multiple) classes or IDs
- Design for interaction with hover, active and pressed state controls. Create powerful 3D effects that will make the site come alive…
- Add special widgets or custom scripts with the HTML Element
- Plethora of typographical design functions, including Google Font integration. Font Family, Size, Weight, Color, Style, Line-height, Text Align, Transform, Decoration, Wrapping, Spacing (indent, Letter, Word), Text Shadow, Superscript, Subscript
- Write, paste, or edit text in place with an intuitive, powerful, text editor
- All the design power CSS3 has to offer without writing a single line of code. Padding, Margin, Floats, Display, Position, Overflow, Border (radius), Background (image), Width (min, max), Height (min, max), Scale, Translate, Rotate, Skew, Opacity, Box Shadow, Transitions and a few more…
- Integrated web inspector with spacing outliner, DOM tree and live CSS preview
- Unlimited website projects with up to 50 (for now) pages each
Responsive Tools and Elements
- Full range viewport slider – view and work on the design at any possible width right in the app.
- Adapt the layout or tweak the design at any display width using custom breakpoints
- Responsive images: use the new HTML picture element to show different images at different widths
- Focus the viewer’s attention on a specific area of the image with the focal point function
- Mobile-first and desktop down workflows with corresponding media queries
Adaptable Layout Creation and Management
- Fluid grid systems with configurable columns, gutter and widths – Choose pixels or…ems!
- Rows can be constrained to certain widths or full-width for appealing visual (background) effects
- Sublime column management: span, offset, push and pull with simple drop downs and change these at any breakpoint for an optimal viewing experience on any device!
- Subgrids and container elements give unique granular control over the layout at any width
- Fix rows or place elements outside of the flow with comprehensive positioning controls
- Use the tag switcher to create the most semantic HTML
- Add meta data and other head (or footer) code for SEO or plugins
- Publish directly to the CoffeeCup servers and share the link for feedback and collaboration
- Export clean, semantic, HTML and CSS that you can upload to any server (Includes any added plugins)
Changes in CoffeeCup Site Designer 5.0 Build 3528:
- This build gained a new skill. You can now smoothly import custom font files and style them on canvas without using extra CSS classes.
Changes in CoffeeCup Site Designer 5.0 Build 3508:
- Added the Page Manager to the top toolbar to help improve the workflow. This makes it more convenient when you need to quickly access all your pages to apply settings and SEO configurations.
- Corrected an issue where Google Analytics was not saved when added using the “Paste Google Analytics” action.
- Reviewed and changed the default cursor position when opening Code Editor. Previously, when the code editor was opened, the cursor would go to the last column of the last line. This has been adjusted so that it now appears in the first column of the first line.
- You now have the ability to open Site Designer Developer Edition project files within Site Designer. This way you can take advantage of the new controls that have been added over the last year such as Lazy Loading for images.
- An HTML code indicator has been added to the Canvas, Element pane and Inspector pane. This allows you to identify elements that have custom code applied. Clicking the icon will take you directly to the custom code section.
- Added the “data” file extension to the page manager list. You can allow to set a custom extension per page.
- The root folder cannot be removed within Resource. To avoid confusion, we disabled the ‘Remove Folder’ button and ‘Action’.
- Allow HTML 5 Video/Video Platform/Audio elements to activate Element Panel from Canvas.
- Made tweaks to the app verification dialog box to make it easier to see which email address is being used for validation.
- Miscellaneous Page Manager dialog tweaks.
- Updated info displayed when a project saving action fails. This way there is extra details about why the failure occurred.
Changes in CoffeeCup Site Designer 5.0 Build 3499:
- You can now generate Sitemap.xml and Robots.txt files automatically from Site Designer Preferences.
- You may set file extension per page upon Export.
- Ability to paste PHP in code replacer controls.
- Ability to create PHP files from the Resources Dialog.
- PHP file management.
- Set focus to web view once a project is loaded.
- There is now a code icon that is displayed in the Elements Tree to indicate that code is applied on the canvas.
Changes in CoffeeCup Site Designer 5.0 Build 3490:
- Added a ‘Disable Preview’ checkbox to the Resource Dialog to help speed up the loading of files in the selection window.
- In the Resource Dialog you’ll find we added optimized default icons for file resources.
- Under the Resource Dialog sorting control, you may now choose to sort by “File Extension.”
- Fresh tips included in the Resource Dialog.
- From the Page Manager, you may now inject your Google Analytics scripts.
- Use your keyboard arrow keys to activate pages in the Page Manager.
- Fixed an issue with the Video Element that had disabled the ability to set a Poster from “none image” state.
- Corrected a syntax error when creating an HTML file within the Resource Dialog.
Homepage – https://www.coffeecup.com/designer/
Supported Operating Systems:
- Windows 7, 8, 8.1, 10, 11.
- macOS 10.13 or higher
Size: 173 MB