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
- Discuss approach
- Discuss design
- Clean up code
User interface changes
Introduction of a theme preview within the context of configured breakpoints.
API changes
None.
Comment | File | Size | Author |
---|---|---|---|
#8 | 1880606_breakpoint-theme-ui_8.patch | 31.26 KB | jessebeach |
#5 | layout-device-selector.png | 41.31 KB | jessebeach |
#5 | 1880606_breakpoint-theme-ui_5.patch | 33.58 KB | jessebeach |
#3 | 1880606_breakpoint-theme-ui_3.patch | 27.23 KB | jessebeach |
#3 | interdiff.txt | 13.2 KB | jessebeach |
Comments
Comment #1
jessebeach CreditAttribution: jessebeach commentedComment #2
jessebeach CreditAttribution: jessebeach commentedThis 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.
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.
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.
Comment #3
jessebeach CreditAttribution: jessebeach commentedI'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.
Comment #4
webchickTagging.
Comment #5
jessebeach CreditAttribution: jessebeach commentedSo, 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.
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.
Comment #6
webchickTagging, marking needs review.
Comment #7
jessebeach CreditAttribution: jessebeach commentedI'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.
Comment #8
jessebeach CreditAttribution: jessebeach commentedI need a place to dump an intermediary patch for a build now that #1847198: Update the structure returned by hook_toolbar() is committed.
Comment #9
webchickI don't really see this happening in D8 core anymore, unfortunately.
Comment #10
catchIt might be possible to do this in a minor release, so moving back to 8.x for now.
Comment #26
quietone CreditAttribution: quietone at PreviousNext commentedThis 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.