CoffeeCup Responsive Site Designer (formerly CoffeeCup VisualSite Designer) allows yu 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 Responsive 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 Responsive 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 Responsive 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 can be uploaded to any server (Includes any added plugins)
Homepage – https://www.coffeecup.com/designer/
Size: 168 MB