Canvas overview

In this chapter you will learn how to select and navigate through your elements. Not only that but also see how they will display on different widths for all the devices out there. Learn how to change page styles and layout for different screen sizes using the powerful Viewport Slider and Breakpoints Bar.

Selecting and navigating

For selecting elements to style or position, you just need to click on them on the canvas. You will see a thin line around them showing you that it has been selected. Along the bottom bar you will see how the element selected changes and you can go to any of its parents by clicking on that node of the bar.

Designing across screen widths

The Viewport Width Slider and Breakpoint controls are used for previewing and managing the page at different screen sizes.

The built-in width slider helps to test the layout, design and usability of the content at all possible screen widths. The page elements proportionally grow and shrink depending on the available space for displaying it. However, at some point layout or design changes are needed to prevent elements and content to become too small or otherwise unusable.

This is where the breakpoints come in. Anytime you feel a style or layout change is needed for a certain screen size, add a breakpoint, then customize the design as needed. The browser your viewer is using will see these breakpoints and will display the appropriate version of the design to the viewer.

In this chapter