Using the Breakpoint module
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 Breakpoint module provides a method for creating media query breakpoint definitions within Drupal. These can be used by other components, such as the responsive image and toolbar modules, to make Drupal responsive.
Breakpoints are a type of plugin that can be defined in a module's or theme's breakpoints.yml in its directory. In this recipe, we will define three different breakpoints under a custom group.
Ensure that the Breakpoint module is enabled. If you have used the standard Drupal installation, the module is enabled.
This recipe assumes that you have a custom module created. When you see mymodule, use the machine name of the module that you created.
- Create
mymodule.breakpoints.ymlin your module's base directory. This file will hold the breakpoint configurations. - Firstly, we will add a standard mobile breakpoint that does not have a media query, following mobile first practices:
mymodule.mobile: label: Mobile mediaQuery: '' weight: 0
- Secondly, we will create a standard breakpoint that will run on a larger viewport:
mymodule.standard: label: Standard mediaQuery: 'only screen and (min-width: 60em)' weight: 1
- Thirdly, we will create a wide breakpoint for devices that have a large viewport:
mymodule.wide: label: Wide mediaQuery: 'only screen and (min-width: 70em)' weight: 2
- Go to the Configuration tab and then to Development to rebuild Drupal's cache and make the system aware of the new breakpoints.
The Breakpoint module defines the breakpoint configuration entity. Breakpoints do not have any specific form of direct functionalities beyond providing a way to save media queries and grouping them.
The Breakpoint module provides a default manager service. This service is used by other modules to discover breakpoint groups and then all of the breakpoints within a group.
Themes have the ability to provide breakpoints; however, they cannot be automatically discovered if new ones are added once they have been installed. Drupal only reads breakpoints provided by themes when a theme is either installed or uninstalled.
Inside breakpoint.manager, there are two hooks: one for the theme install and one for the theme uninstall. Each hook retrieves the breakpoint manager service and rebuilds the breakpoint definitions. Without any extra deployment steps, new breakpoints added to a theme will not be discovered unless these hooks are fired.
Breakpoints are utility configurations for other modules. Breakpoints can be loaded by using the breakpoint manager service and specifying a group. For example, the following code returns all breakpoints used by the Toolbar module:
Drupal::service('breakpoint.manager') getBreakpointsByGroup('toolbar');This code invokes the Drupal container to return the service to manage breakpoints, which, by default, is DrupalreakpointBreakpointManager. The getBreakpointsByGroup method returns all breakpoints within a group, which are initiated as the DrupalreakpointBreakpointInterface objects.
The Toolbar element class utilizes this workflow to push the breakpoint media query values as JavaScript settings for the JavaScript model to interact with.
The multipliers value is used to support pixel resolution multipliers. This multiplier is used in coordination with retina displays. It is a measure of the viewport's device resolution as a ratio of the device's physical size and independent pixel size. The following is an example of standard multipliers:
- 1x is normal
- 1.5x supports Android
- 2x supports Mac retina devices
- To work with breakpoints in Drupal 8, refer to the community documentation at https://www.drupal.org/documentation/modules/breakpoint
-
No Comment