feat(layout): directives for `lesser then x`

[AdriVanHoudt]

Actual Behavior:

• What is the issue? *
  There are currently layout directives for layout-gt-sm but not layout-ls-sm
  I tried searching the issues but could not find anything about it (github's search not helping).

Right not I have to do something like <div layout-sm="column" layout-xs="column"> to achieve the desired behaviour of layout-column below 960px.
Am I missing something?

Also the docs at https://material.angularjs.org/latest/layout/options are missing the layout-align-gt-x directives but maybe that is a different issue.

• What is the expected behavior?

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
• Details:

Angular Versions: *

• Angular Version:
• Angular Material Version:

Additional Information:

• Browser Type: *
• Browser Version: *
• OS: *
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[bitencode]

My understanding is that material is a "mobile-first" based framework. So, the intent is to set your layout values (layout, layout-align, hide, show, etc...) based on the smallest/most general device you support. Then change the values at breakpoints that require/support a different option.

So, in your case you can use: <div layout="column" layout-gt-sm="row">

This has been working very well for my applications and I believe if you think about it this way it makes your apps more responsive with more straight-forward and clear configuration.

The layout-align attributes are at: https://material.angularjs.org/latest/layout/alignment

[AdriVanHoudt]

@bitencode that actually makes sense :D only I don't want to put 2 layout attributes everywhere :/

[simeyla]

@bitencode Can hardly call it mobile-first when there is only a single breakpoint (600px) to include all phone sized devices. Useless :-( It's really 'spec-first' where they try to follow a spec that isn't even up to date.

https://material.io/design/layout/responsive-layout-grid.html#breakpoints

Edit: Apologies for posting this in the wrong repo and adding confusion. I originally thought this was the flex-layout repo and their breakpoints are limited to the following not especially useful breakpoints:

0-599, 600-959, 960-1279, 1280-1919, 1920-5000

[Splaktar]

It's unlikely that this will be able to be added. The generated layout CSS is already too large and adding something like this would likely increase it by 50-150 KBs.

This is supported in Angular and Angular Material with the Angular Flex-Layout Library.