Page MenuHomePhabricator

Revisit CSS breakpoints
Open, MediumPublic

Description

When Content translation dashboard became responsive with T157212, three CSS widths were defined:

  • narrow (below 700px)
  • medium (between 700px and 1200px)
  • wide (more than 1200px)

Chosen values were good approximate at that time, when many things weren't responsive. As more UI elements were getting responsiveness support, new variables for breakpoints were added.
First, dashboard width was limited to 1500px in T175004. After that, T178669 needed new breakpoint to be introduced:

  • very narrow (below 500px)

In further development of mobile responsiveness, I have unofficially decided that smallest screen size we want to support is 320px wide screen. That isn't any new CSS breakpoint, just reminder for me to check how things look at 320px-480px screen size.
When personal header was restyled in T160918, new ad-hoc breakpoints were added, 380px and 1000px. Below 380px screen width, "+ New translation" button hides text and only "+" is displayed. I think we can allow some small number of ad-hoc breakpoints, which are used only once, for specific purpose. But, we need to keep the number of adhoc breakpoint as low as possible.
1000px breakpoint was used to determine when CX tool name (like "Content translation statistics" or "Translate page") should be displayed. Comment T186871#3985539 explains how that breakpoint plays the roll in determining which wordmark and tool name combination should be displayed.

variables.less file in core defines following breakpoint values:

  • width-breakpoint-mobile: 320px;
  • width-breakpoint-tablet: 720px;
  • width-breakpoint-desktop: 1000px;

Not sure how much these are used, since they're introduced relatively recently.
At some point in the future, we should revisit defined breakpoints. Some of the current breakpoints are rooted into some decisions like T187700 and such limitations should also be taken into account when deciding whether we want to change breakpoints, introduce new ones or remove some of the existing.

Event Timeline

As part of T242006: Technical exploration to support Section Translation workflow on mobile and desktop, I did some research and I have a proposal when we redefine the framework.

Do not define the breakpoints for a special page or feature usecase, but define based on widely used conventions and refer popular modern web frameworks.

Some references:

  1. https://material.io/design/layout/responsive-layout-grid.html#breakpoints
  2. https://vuetifyjs.com/en/components/grids
  3. https://getbootstrap.com/docs/4.0/layout/grid/

There is no real agreement on exact range of screen resolution, may be that is not really important. But in general breakpoints are defined for 5 ranges.

  1. Extra small(mobiles).
  2. Small(tablets),
  3. Medium(large tablets, laptops),
  4. Large(desktops),
  5. Extra large(HD monitors)