Responsiveness
by Chaz Chumley, Matt Glaman, Richard Jones, Nick Abbott
Drupal 8: Enterprise Web Development
- Drupal 8: Enterprise Web Development
- Table of Contents
- Drupal 8: Enterprise Web Development
- Credits
- Preface
- 1. Module 1
- 1. Introduction
- 2. Installation
- 3. Basic Concepts
- 4. Getting Started with the UI
- 5. Basic Content
- 6. Structure
- 7. Advanced Content
- 8. Configuration
- 9. Users and Access Control
- 10. Optional Features
- 11. Reports
- 12. Extending Drupal
- 13. Theming Drupal
- 14. Getting Support
- 2. Module 2
- 1. Up and Running with Drupal 8
- 2. The Content Authoring Experience
- 3. Displaying Content through Views
- 4. Extending Drupal
- 5. Frontend for the Win
- 6. Creating Forms with the Form API
- 7. Plug and Play with Plugins
- 8. Multilingual and Internationalization
- 9. Configuration Management – Deploying in Drupal 8
- 10. The Entity API
- 11. Off the Drupalicon Island
- 12. Web Services
- 13. The Drupal CLI
- 3. Module 3
- 1. Setting Up Our Development Environment
- 2. Theme Administration
- 3. Dissecting a Theme
- Setting up a local development environment
- Default themes versus custom themes
- Folder structure and naming conventions
- Managing configuration in Drupal 8
- Reviewing the new info.yml file
- The role of templates in Drupal
- Creating our first basic theme
- Introducing Twig
- Template variables
- The role of the theme file in Drupal
- Summary
- 4. Getting Started – Creating Themes
- 5. Prepping Our Project
- 6. Theming Our Homepage
- Creating our HTML wrapper
- Creating our homepage
- Implementing our Header Top region
- Implementing our Header region
- Adding a logo
- Enabling Site branding
- Printing our Header region
- Creating Block templates
- Implementing our search form block
- Placing our search form block
- Creating a search form block template
- Adding custom JavaScript
- Creating an input element template
- Working with menus
- Creating a menu template
- Creating System Menu block template
- Creating a sticky header
- Implementing our Headline Region
- Implementing our Before Content region
- Implementing the footer
- Summary
- 7. Theming Our Interior Page
- 8. Theming Our Blog Listing Page
- Reviewing the Blog Listing mockup
- Creating our blog listing
- Creating a Post Listing view
- Managing our Post Listing block
- Implementing our Node template
- Adding CSS classes to Twig
- Working with content variables
- Using the without filter
- Creating our post image slider
- Working with field templates
- Adding the Owl Carousel library
- Using Twig filters for dates
- Printing title and teaser
- Creating our post metadata
- Field templates and taxonomy
- Handling comments in Drupal 8
- Creating a theme file
- Creating a Categories block
- Managing our Categories block
- Implementing responsive sidebars
- Theming a Block template
- Drupal Views and Twig templates
- Managing popular versus recent content
- Adding the About Us block
- Summary
- 9. Theming Our Blog Detail Page
- Reviewing the Blog detail mockup
- Previewing our Blog detail page
- Creating a Post Full template
- Working with comments
- Implementing social sharing capabilities
- Summary
- 10. Theming Our Contact Page
- 11. Theming Our Search Results
- 12. Tips, Tricks, and Where to Go from Here
- A. Biblography
- Index
The Bartik theme that we talked about in Chapter 3, Basic Concepts, like all modern Drupal 8 themes, is designed to be responsive and so reacts to the size of the browser viewing the page using
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.
As we mentioned earlier in Chapter 3, Basic Concepts , when you 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.
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:
- Hover your mouse pointer over the Search block, and you'll see a contextual trigger.
- 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:
-
No Comment