Responsiveness

The Bartik theme that we talked about in breakpoints. The breakpoints are designed for the desktop (wide), tablet (standard), and mobile (narrow) browser widths.

Let's test that out now.

With the tray still visible, gradually resize your browser and you will see two things happen. At the first breakpoint, you will see the Main menu change shape. Try it now.

At the second breakpoint, you'll see two more significant changes.

The Search and Tools blocks both clear so that they fit nicely within a portrait smartphone screen and the items within the Tray itself also clear and reposition themselves on the left-hand side of the screen.

Administration theme

As we mentioned earlier in visit any administration type page on your site (any path beginning with /admin/), Drupal switches to the standard profile admin theme, Seven.

From the home screen, click on Manage and then click on the Content link.

You will be taken to the content page, which displays in the Seven admin theme. To get back to the main site, click on the Back to site link in the top left-hand corner of the screen.

Now that we have those two key ideas covered, we can take a quick tour of the main administration pages of a standard Drupal 8 install.

Contextual links

Drupal's contextual links provide you with immediate access to edit content and configuration without having to go and visit a backend admin screen.

The Contextual link trigger icons appear whenever you hover your mouse pointer over an item of content to which you have the rights to perform any kind of action such as configuring a block or editing content.

Try this:

1. Hover your mouse pointer over the Search block, and you'll see a contextual trigger.
2. Click on the trigger (pencil) icon, and you'll see the only relevant contextual link which is shown is one to configure that block.
   

You can place the whole session into edit mode by clicking on the pencil (3) at the right-hand end of the toolbar as shown in the following screenshot.

This will reveal all the contextual link triggers (4) across the whole page showing exactly which parts you have in-line control over: