The canvas
Learn how to work with the live canvas — select, move, nest, and edit elements in real time.
Canvas overview
What the canvas chapter covers: selecting and navigating elements, and designing across screen widths.
Selecting elements
Click an element on the canvas to select it, then make any change you need to it.
Indicator hover bar
The floating bar above a hovered element gives you its parent list and quick actions without leaving the canvas.
Focus viewer
Adjust the drop zone line indicator and use the focus viewer to select deeply nested elements with ease.
Element navigator
The bar at the bottom of the canvas moves you between parents and children, and shows the classes and IDs in play.
Viewport slider
Drag the width slider to view your design at any screen width and decide where the layout needs to change.
Breakpoints
The triangles above the slider mark where your layout changes. Learn to read them, activate them, and add your own.
Mobile first vs desktop down
Your framework decides which direction you design in. Here is what changes, and where to park the slider.
Design changes at a breakpoint
Where responsive design actually happens: shifting, stacking, and resizing content as the slider moves.
The zoom tool
Zoom out to design for large screens from a laptop and reach breakpoints hidden behind the panes.
Device icons
The phone, tablet, and desktop icons under the breakpoint buttons are a reference point, not a design target.