Problem/Motivation

Breakpoint entities were introduced to core in #1734642: Move breakpoint module into core.

Breakpoints are only available to module developers through code. The intent of introducing breakpoints to core was to also provide a UI for establishing breakpoints for modules and themes to leverage.

Proposed resolution

Breakpoints are best established at the point where content no longer fits well within the available screen real estate. Site builders should be able to establish breakpoints through a view of their content, in the context of a theme.

Remaining tasks

  1. Discuss approach
  2. Discuss design
  3. Clean up code

User interface changes

Introduction of a theme preview within the context of configured breakpoints.

API changes

None.

CommentFileSizeAuthor
#8 1880606_breakpoint-theme-ui_8.patch31.26 KBjessebeach
#5 layout-device-selector.png41.31 KBjessebeach
#5 1880606_breakpoint-theme-ui_5.patch33.58 KBjessebeach
#3 1880606_breakpoint-theme-ui_3.patch27.23 KBjessebeach
#3 interdiff.txt13.2 KBjessebeach
#2 Screenshot_1_4_13_8_17_PM.png15.87 KBjessebeach
#2 layout-preview-northstar-design.png81.42 KBjessebeach
#2 1880606_breakpoint-theme-ui_2.patch25.63 KBjessebeach

Comments

jessebeach’s picture

jessebeach commented
Component: contextual.module » breakpoint.module
jessebeach’s picture

jessebeach commented
StatusFileSize
new 1880606_breakpoint-theme-ui_2.patch25.63 KB
new layout-preview-northstar-design.png81.42 KB
new Screenshot_1_4_13_8_17_PM.png15.87 KB

This patch is a kind of in-progress prototype of tkoleary's north star design of a breakpoint preview / configuration UI. Here's the image I'm working from.

layout-preview-northstar-design.png

There are many more aspects of this design than fall into the scope of this development effort. Mostly I'm focused on the ruler and the page resizing.

You can see a short video of the code in action rather than applying the patch: http://screencast.com/t/CRk9i4sA

The mockup above lacks a treatment of configured breakpoints so I took it upon myself to suggest a UI. Most likely what I've coded will change significantly, but for the moment it at least exposes a theme's breakpoints. I attempted to expose the configured breakpoints of the Bartik theme across the ruler as a series of darkening regions - the wider the breakpoint, the darker the background.

Screenshot_1_4_13_8_17_PM.png

The mockup is not meant to suggest a final design proposal. Many details are just rough guesses at how we might built the UI components. For instance, the placement of the button to launch this preview/configuration UI. Also, we'll want to be able to manipulate breakpoints as full media queries rather than just single numerical values. All in good time.

The code in this patch is a first draft. A lot of it I wrote in one go or with rough edits as I layered in functionality. It's meant to build some momentum behind this UI and give us something to talk about.

jessebeach’s picture

jessebeach commented
StatusFileSize
new interdiff.txt13.2 KB
new 1880606_breakpoint-theme-ui_3.patch27.23 KB

I'd meant to add comments and clean up the code a little before I signed off yesterday, but couldn't get to it in time. This patch fills out missing comments and unifies some of the competing patterns that had grow into place as I was coding. No behavior changes introduced in this patch.

webchick’s picture

webchick
she/they
Primary language English
Location Vancouver 🇨🇦
commented
Issue tags: +Spark

Tagging.

jessebeach’s picture

jessebeach commented
StatusFileSize
new 1880606_breakpoint-theme-ui_5.patch33.58 KB
new layout-device-selector.png41.31 KB

So, I went a little ahead of design here and put in place a way to preview the site according to the dimensions of popular devices, like the iPhone or an Android device. The device dimensions are represented in configuration.

devices:
  iphone:
    label: iPhone
    dimensions:
      width: 320
      height: 480
  android:
    label: Android
    dimensions:
      width: 540
      height: 960

The presentation of the selection, along with the rest of the UI, is still very rough, as I move ahead with features while visual design is still in the queue to be addressed.

Screenshot of the site preview bar with the device select box activated. It shows a list of 4 popular devices that can be selected to constrain the size of the preview

webchick’s picture

webchick
she/they
Primary language English
Location Vancouver 🇨🇦
commented
Status: Active » Needs review
Issue tags: +Usability

Tagging, marking needs review.

jessebeach’s picture

jessebeach commented
Status: Needs review » Postponed

I'm postponing this issue until #1741498: Add a responsive preview bar to Drupal core is resolved. That issue will be the MVP of a theme breakpoint configuration UI.

jessebeach’s picture

jessebeach commented
StatusFileSize
new 1880606_breakpoint-theme-ui_8.patch31.26 KB

I need a place to dump an intermediary patch for a build now that #1847198: Update the structure returned by hook_toolbar() is committed.

webchick’s picture

webchick
she/they
Primary language English
Location Vancouver 🇨🇦
commented
Version: 8.x-dev » 9.x-dev

I don't really see this happening in D8 core anymore, unfortunately.

catch’s picture

catch
he/him
Primary language English
commented
Version: 9.x-dev » 8.1.x-dev
Issue summary: View changes

It might be possible to do this in a minor release, so moving back to 8.x for now.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.0-beta1 was released on March 2, 2016, which means new developments and disruptive changes should now be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

quietone’s picture

quietone commented
Status: Postponed » Closed (won't fix)

This issue was postponed 11 years ago on an issue that is won't fix. Therefor, I am also closing this as won't fix.

Thank you to everyone who worked on this issue.