The CoffeeCup Guide to

Responsive Website Design



  • Author
    Bob Visser CoffeeCup Guru
  • Design
    Mateo Carrasco Master of Art
  • Edits
    Suzanne Norvell Tutorial Jedi
  • Document Version
    Version 4.0 July 31, 2019
  • Production Rights
    CoffeeCup Inc. Fresh software, warm people.

The Element Pane

This pane is very similar to the web inspectors found in browsers such as Chrome and Firefox. Access a DOM tree of all the page elements, view CSS configurations, and configure special properties of elements such as image or link sources.

Toggler Menu

The top half of the Element pane shows the DOM tree; a list of the page elements and their nesting. Mousing over an element highlights the element and shows its selector and dimensions on the canvas. The element itself is highlighted with the blue / gray color, and margins are displayed using the rose colored area.

Toggler Menu

The CSS highlights when using Inspector.

Elements can also be selected and moved to other positions. When selected, the canvas scrolls automatically to the element position. Double-clicking the element will bring up the Styles pane for that element.

To move and element or element group, simply click and drag. While dragging, a gray indicator bar will represent where the element will be placed when dropped.

Element Tree

All the duplicate and copy and paste functions work when an element is selected in the tree. For example, the keyboard shortcut CMD/CTRL+C will copy it. Then select the element where you wish to place it and use CMD/CTRL+V to paste it (or use the right-click menu).

Element groups — containers and link containers — can be collapsed by clicking on the arrow to the left of the element title. You can also choose to Collapse or Expand all the nodes at once.

Nodes

The orange dot next to an element signifies that it acts as a symbol — updates to a symbol will trigger down to all instances of the 'symbol element group.'

Symbols

Locate a class or element fast by keying in the term into the search. The app will bring up all the items that are a match and will highlight them on the canvas.

Search

STYLING AND EDITING HIDDEN ELEMENTS

Elements or element groups are not always visible to the visitor and therefore also not always visible on the canvas. Examples include mobile menus that slide into view, accordions of which only one container is visible at a time, modal dialogs...up to simple dropdown.

The strike through eye icon next to an element in the tree indicates whether it is hidden on the canvas at the current breakpoint or state.

To show a hidden element — so it can be styled — just click on the icon. It will change to an eye and the app will override the styles that hide the item. You can also do that for all elements on a page by clicking the 'Show x hidden item' toggle at the bottom of the pane.

Toggler Menu

A mobile menu for which the visibility is toggled on and off.

Please note that under certain circumstances this may currently override applied positioning styles such as flexbox. This happens only when the eye 'forces' the visibility and will not happen for the published or exported site.

CSS Preview

The CSS that is applied to the selected element is visible in the bottom half of the inspector pane. By providing the CSS applied to the selected element at all breakpoints, the inspector gives you a sense of exactly what is going on "under the hood".

Control Panes

View all of the CSS styles applied.

Read-only or editable? We do have plans to add the ability to edit the CSS live. To help us prioritize our development work, please let us know how important you find this by leaving us a note in the forums. Or just hit us up on Facebook or Twitter!

Element Properties

Elements that require special configurations will display their corresponding controls here. This includes applying the source for Link, Picture and Video elements. Insert custom markup into the HTML element, or configure interactive elements.

Element Properties

Connect your social media buttons to your accounts. Framework attributes can also be assigned to elements from this control panel.

Data Attributes

The data attributes play an important part in adding interactivity to a design. See them as ‘hooks’ that tie an element to Javascript and clarifying can be used to as and to specify additional information about the element.

Interactive elements add a touch of professionalism and a dash of fun to any website (who doesn’t like a nav menu that transforms into a hamburger icon on small devices?). But these types of features require communication with JavaScript, which means building sites without this app you’d have to mess with pulling those codes in yourself. This hard work is eliminated for you using the Foundation and Bootstrap CSS frameworks as the JavaScripts are built right into the framework and can be pulled in by using Attributes.

Depending on which framework you are using, there are many different options to build using attributes. You will also find Aria attributes within this section allowing you to set Aria based roles for elements in your design.

The attribute name can vary depending on the framework you are using. Foundation, Materialize and Bootstrap offer some great documentation (links below) on the creation of components with the right combo of classes & attributes.

Attributes tutorial: Build Responsive Menu

Using Foundation, learn how to create a multi-level responsive navigation menu. The menu transforms into a mobile menu icon that triggers the menu for small screens.

Video Recap:

The full breakdown for this video, including screenshots and class names can be found in this knowledgebase article.

Attributes Tutorial: Show/Hide Items with Toggler

In the video demonstration, the webpage is built with Foundation. So the Class names and Attributes are assigned by that framework. The goal is for a button to show a hidden section of the page.

The Button will be the Toggle, and the pricing Container is the Toggler.

Video Recap:

1. The Data Toggle attribute is applied to the trigger element (in this case the button) on the Element pane. The attribute value Price. This value is the ID name of the content that is being called to appear.

2. Next, select the element or the group you want triggered to show/hide when the button is clicked. In the video, the parent container holding the pricing info is selected. On the Styles pane, the ID name Price is applied to that it matches the value entered to the Data Toggle.

3. The triggered element is given the Class Name is-hidden

4. On the Element pane, the triggered element is given the attribute Data Toggler with the value is-hidden.

Attributes Tutorial: Build A Video Modal

In the video demonstration, the webpage is built with Bootstrap. So the Class names and Attributes are assigned by that framework. Using Bootstrap's names, we are going to make a button trigger a full scren video modal to pop over the webpage.

The Button will be the Toggle, and the Container with Video Element is the Target.

Video Recap:

1. A Container element with a Video Platform element are added to the design. The Container element is assigned a unique ID name (in this example the ID is video-demo) so that it can be targeted to display by the the button.

2. Next, The Container element is assigned the Class name modal. This causes the container with its children content to disappear.

3. The Button will be the item to trigger the display action. From the Element pane > Properties > Attributes the attribute Data Toggle with a value Modal.

4. A second attribute is also added to the button, Data Target with a value #video-demo. The value must match the ID name you have set on your modal.

In the video tutorial, learn how to build a picture carousel - slideshow - using the Bootstrap framework. While this tutorial uses the Picture element within the carousel, it would work for any design such as applying the image to the background of the Containers and layering text on top.

The basic structure is made up of two Container elements. One will serve as the main carousel wrapper, the second designated as the inner-wrapper. Nested inside the second Container will hold the desired content. In this example, the inner wrapper will hold three additional containers, each the parent of the individual images for the slideshow.

Video Recap:

1. The first parent Container element is added to the canvas. On the Styles pane the ID name is assosciated with the slider. In the example, the ID carousel-example is given. Next the Class names carousel and slide are applied.

The data attribute data-ride with value carousel is applied on the Element Pane.

2. Next, a second Container element is nested inside the first Container by dragging and dropping it onto the canvas. You can also use the Element pane to move the second container into the first. The Class name carousel-inner is assigned.

3. With the base structure of the slider in place, the children Containers can be added. These will serve as the gallery slides. In this example we have three slides. So three Container elements are nested into the carousel-inner Container.

Each of the three slide containers will get assigned the Class name carousel-item. The slide you want to designate as the first will get a second class name active.

Use the eye icon on the Element pane to show/hide any element that may be hidden on the screen such as the additional slides in the gallery. The eye icon allows you to style the otherwise hidden slide.

4. Within each carousel-item Container will hold a Picture element. The Picture elements will all have the same two class names: d-block and w-100.

Style the Picture elements how you would like them to appear. The image resource is assigned on the Element Pane. The layout is also tweaked, making the images have a Max-Width: None.

Bonus: Add Slide Controls

5. Add two Button Link elements to the parent Container (carousel).

6. The left-side button is given the class name carousel-control-prev. This button also get three Attributes: role=button   data-slide=prev  and  aria-hidden=true

7. The right-side button is given the class name carousel-control-next. This button also get three Attributes: role=button   data-slide=next  and  aria-hidden=true

8. Finally, both buttons need to be linked to the parent Container's ID name. In this case, the ID #carousel-example is entered on the Element pane in the HREF box.