Material: layout: support creating custom breakpoints

[usarskyy]

As you know current version of Angular Material offers four breakpoints:

$layout-breakpoint-xs:     600px !default;
$layout-breakpoint-sm:     960px !default;
$layout-breakpoint-md:     1280px !default;
$layout-breakpoint-lg:     1920px !default;

Unfortunately four breakpoint do not give good enough granularity to create responsive design.
For example, there are lots of devices that have screen resolution between 320px and 600px. With current set of breakpoints I can't cut off old Android phones (below 480px) and work only with newer phones that are still able to show my website.
Also, gap between 1280px and 1920px is too wide and design created for 1280px screen looks pretty ugly on 1920px screens.

One of the solutions would be to add one or two additional breakpoints to get better granularity. Two, I think, is already too much but one is still acceptable.
Then it would be possible to adjust breakpoint values to get more or less precise split between designs.
As an example:

$layout-breakpoint-xxs:     480px !default;
$layout-breakpoint-xs:     600px !default;
$layout-breakpoint-sm:     960px !default;
$layout-breakpoint-md:     1280px !default;
$layout-breakpoint-lg:     1600px !default;

or

$layout-breakpoint-xs:     600px !default;
$layout-breakpoint-sm:     960px !default;
$layout-breakpoint-md:     1280px !default;
$layout-breakpoint-lg:     1600px !default;
$layout-breakpoint-xl:     1920px !default;

I am not sure whether "xxs" or "xl" breakpoint should be added but at the end it does not make any difference.

[EladBezalel]

The current breakpoints are aligned with the material spec, there's no support for Handset / Tablet yet.

[usarskyy]

I don't say that current breakpoints are not properly defined, I am saying that there are too less of them.
Material specifications defines seven breakpoints:

For optimal user experience, material design user interfaces should adapt layouts for the following breakpoint widths: 480, 600, 840, 960, 1280, 1440, and 1600dp.

Your implementation defines only four breakpoints. I guess you agree that seven breakpoints provides better flexibility than just four :)

You can easily change "lg" to 1600px and add "xl=1920px" breakpoint.

[ram-you]

@usarskyy is right.
From Google Material specifications:
https://www.google.com/design/spec/layout/responsive-ui.html#

For optimal user experience, material design user interfaces should adapt layouts for the following breakpoint widths: 480, 600, 840, 960, 1280, 1440, and 1600dp.

[vhdirk]

In case anyone needs it; I've implemented an xxs breakpoint at width 480px
https://github.com/vhdirk/material/commit/64e204e5343f8a5c8f843addffc06f54d5126903

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.

[simeyla]

Does anybody actually find these default 'spec-based' breakpoints to be of any use?

Yes my tone is a little facetious, but it's a serious question. The excuse of "It's in the spec" is a poor one when you're trying to develop for different mobile devices for which this API is utterly useless in it's initial form.

A single breakpoint of 600px encompasses all phone viewport sizes, and another one of 900px for all tablet sizes. It's impossible to develop with this. I also have a big problem with the names 'sm', 'md' and there needs to be an easy way to change these.

Perhaps some kind of code generator for custom breakpoints to create me my own custom directives?

[Splaktar]

@simeyla yes the default breakpoints are useful. They have been used in tens of thousands of production applications around the world.

It's quite easy to extend/copy/modify AngularJS Material's layout SCSS or CSS to meet your needs.

If you wanted to go farther, the AngularJS Material Tools repo has some tools that can be used to build bundles of AngularJS Material w/o the layout so that you can use your own custom layout CSS.

As far as creating custom breakpoints, this is supported in Angular and Angular Material with the Angular Flex-Layout Library. We have no plans to add this feature for AngularJS Material.