Investigate how to be consistent across components with responsive breakpoints

[material-components]

Investigate how to be consistent across components with responsive breakpoints

[pablobender]

Hi @Dotmagic, I'm not an expert... but I made some experiments about this.

You can overwrite mdc breakpoints map declaration (of course, using sass).

Breakpoints map is assigned to $mdc-layout-grid-breakpoints variable on file packages/mdc-layout-grid/_variables.scss with !default flag. So this assignment will only take effect if it's not declared yet.

To use custom breakpoints you may declare your custom $mdc-layout-grid-breakpointsthis map before @importing the mdc stylesheet. In this way mixins will use your declaration instead de default one.

Take a look at the packages/mdc-layout-grid/_variables.scss and you'll find:

$mdc-layout-grid-breakpoints: (
  desktop: 840px,
  tablet: 480px,
  phone: 0px
) !default;

If you want use a bootstrap like breakpoints, just declare $mdc-layout-grid-breakpoints before the @import 'material-components-web/material-components-web' or @import '@material/mdc-layout-grid'

$mdc-layout-grid-breakpoints: (
  largedesktop: 1200px,
  desktop: 992px,
  tablet: 768px,
  largephone: 576px,
  phone: 0px
);

@import 'material-components-web/material-components-web';

@media (min-width: mdc-layout-grid-breakpoint-min(desktop)) { //992px
  ...
}

[Garbee]

Direct classes to hide things aren't exactly the style for MCW. Perhaps the grid will have them, but there are still other places where these helpers are useful. Which is why we want a component to provide these internally via Sass to be easily re-used everywhere in a MCW project.

Providing hidden-xs type classes "like Bootstrap" is not a focus point for the library. MCW is not trying to be a framework to do everything for developers. That's a "utility only" type class which doesn't fit with what is trying to be provided.

The goal isn't to be a framework and do a lot of little functions for developers. It's simply to provide the Material Design Specification's components to the web in a re-usable way. That's it. Anything that is beyond that goes beyond the scope of what the project is trying to achieve.

@Garbee But If i take a look at https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints there's much more. It just can't be enough to build a UI for large screens and the largest breakpoint ist 840px. Imagine someone likes to build a app for a TV, nowadays 42-55" screens with 4K become quite common. And using device names.... its just a bad idea

[adamsproul]

We implemented our own version of this for mdc-layout-grid specifically, based on other suggestions in this issue and others:

@use "sass:map";
@use "@material/layout-grid/mdc-layout-grid";
@use "@material/layout-grid/variables" as grid-variables;
@use "@material/layout-grid/mixins" as grid-mixins;

@each $size in map.keys(grid-variables.$columns) {
    @include grid-mixins.media-query_($size) {
        .mdc-layout-grid__cell--span-0-#{$size} {
            display: none;
        }
    }
}

You can then use:

mdc-layout-grid__cell-span-0-phone
mdc-layout-grid__cell-span-0-tablet
mdc-layout-grid__cell-span-0-desktop

[meyerzinn]

Any update on this? Very important for material-components-web to be a viable library.

[Garbee]

What's the core team up to in the contributing guide explains how to see what is being worked on in more detail. In this case, the pivotal issue is assigned to the early-January 2018 sprint. So it isn't even being looked at until around the time this sprint will start unless it gets moved up.

If someone from the community wants to jump in and work on this sooner then they are more then welcome to. All you need to do is follow the contributing guide on building components.

Thank you.

[berets76]

What do you exactly mean with "SASS/style helpers for responsive breakpoints" ?
Why a global library instead a suggested mdc-layout-grid__cell--phone-hide or like the bootstrap hidden-xs ?

[berets76]

I well know MCW isn't trying to be a framework, if I would a framework I would know where to look, but, since in guidelines there isn't the concept of hide, for example, grid cells on breakpoints, so what kind of SASS/style library are you thinking ?

I don't understand in what other places you could get benefit hiding things: any other component should be, by guidelines, into a (layout) grid.

Moreover, hide things in a web page it's never a great solution in complex layouts, because components still remain into DOM though hidden; so my opinion is that a "simple & quick" useful way could be allow/demand layout grid to do the job.

[Garbee]

A way to re-use breakpoints across components without redefining the breakpoints in each one. Such as by using custom media queries. This way all packages are uniformly using the same breakpoints and as things are updated keeping consistent between packages is much easier.

It isn't necessarily to only hide/show things (although css hidden is just fine in most cases when needed) but simply to set breakpoints needed for different component actions.

[pablobender]

Instead hidden-?? utility, I miss more breakpoints for mdc-layout-grid
The problem with custom media query to hide/show some element we can solve importing layout-grid/_mixins.scss to reuse the existing mdc breakpoints (of course, using sass).

@import 'node_modules/@material/layout-grid/variables';
@import 'node_modules/@material/layout-grid/mixins';

@media (min-width: mdc-layout-grid-breakpoint-min(desktop)) {
  ...
}

But I think that existing three breakpoints are few, particularly in relation to desktop. 12-columns is ok, but 840px for desktop I think it's small. For example: I would like different columns qty/spans above 1200px.

Best,
Pablo

@pablobender I'm using mdc-layout-grid-breakpoint-min too. But just 3 breakpoints isn't enough. Tablet starts already at 480px, I'm doing anything wrong?

@pablobender Thanks. In the meantime I've found out just the same, its a configurable sass map.

However. I still dislike the default names for breakpoints! We've learned its bad practice to create media queries for DEVICES. I always tried to build websites for various screen sizes supporting all kind of input devices. I think this is the preferred approach. Of course, it's still possible to build such a site with material, but it would be much more nice to have breakpoint names like: xsmall, small, medium, large, xlarge

[Garbee]

The names come directly from the material design specification. Hence why they are used. It allows someone to look at the implementation compared the spec and easily see changes.

[devxpy]

The 3 breakpoints completely suffice for a grid system, since it only needs to set the number of columns.
(The number of columns only have 3 variants, viz 4, 8 and 12. )

For fine tuning though, we definitely need all the breakpoints in the spec.

[haskelcurry]

While @adamsproul's solution works, are there any updates on this? It's 2023