Custom Breakpoints Documentation Examples

[MarcusMorba]

Proposal

Example use cases for improvements of the custom breakpoints documentation.

What is the summary of the proposal?

Improve the custom breakpoints documentation.

What is the proposal?

First the related flex-layout-version should be named somewhere for all or the related examples to ensure with which version it´s working.

I would like to see the following example use cases:

1. Overwrite the default breakpoints with custom values
2. Extend the xl-breakpoint with "gt-xl"-directive
3. Add additional custom breakpoint "xxl" (incl. lt-xxl & gt-xxl) additional to existing breakpoints

Is there anything else we should know?

[MarcusMorba]

An additional question: when using Configuration (https://github.com/angular/flex-layout/blob/master/guides/Configuration.md), is it still necessary to enable these custom, responsive selectors and to extend the ShowHideDirective and the LayoutDirective like explained (https://github.com/angular/flex-layout/wiki/Breakpoints).

To be able to "just" overwrite the default breakpoints and add additional custom breakpoints and done would be amazing.

[MarcusMorba]

Here an example for a current project I have difficulties getting it work:
`const EPO_BREAKPOINTS = [
{ alias: 'xs', suffix: 'Xs', mediaQuery: 'screen and (max-width: 1024px)', overlapping: false },
{ alias: 'sm', suffix: 'Sm', mediaQuery: 'screen and (min-width: 1025px) and (max-width: 1280px)', overlapping: false },
{ alias: 'md', suffix: 'Md', mediaQuery: 'screen and (min-width: 1281px) and (max-width: 1599px)', overlapping: false },
{ alias: 'lg', suffix: 'Lg', mediaQuery: 'screen and (min-width: 1600px) and (max-width: 1919px)', overlapping: false },
{ alias: 'xl', suffix: 'Xl', mediaQuery: 'screen and (min-width: 1920px) and (max-width: 2250px)', overlapping: false },
{ alias: 'xxl', suffix: 'Xxl', mediaQuery: 'screen and (min-width: 2251px) and (max-width: 4096px)', overlapping: false },
{ alias: 'lt-sm', suffix: 'LtSm', mediaQuery: 'screen and (max-width: 1024px)', overlapping: false },
{ alias: 'lt-md', suffix: 'LtMd', mediaQuery: 'screen and (max-width: 1280px)', overlapping: false },
{ alias: 'lt-lg', suffix: 'LtLg', mediaQuery: 'screen and (max-width: 1599px)', overlapping: false },
{ alias: 'lt-xl', suffix: 'LtXl', mediaQuery: 'screen and (max-width: 1919px)', overlapping: false },
{ alias: 'lt-xxl', suffix: 'LtXxl', mediaQuery: 'screen and (max-width: 2250px)', overlapping: false },
{ alias: 'gt-xs', suffix: 'GtXs', mediaQuery: 'screen and (min-width: 1025px)', overlapping: false },
{ alias: 'gt-sm', suffix: 'GtSm', mediaQuery: 'screen and (min-width: 1281px)', overlapping: false },
{ alias: 'gt-md', suffix: 'GtMd', mediaQuery: 'screen and (min-width: 1600px)', overlapping: false },
{ alias: 'gt-lg', suffix: 'GtLg', mediaQuery: 'screen and (min-width: 1920px)', overlapping: false },
{ alias: 'gt-xl', suffix: 'GtXl', mediaQuery: 'screen and (min-width: 2251px)', overlapping: false }
];

export const CUSTOM_BREAKPOINTS = {
provide: BREAKPOINT,
useValue: EPO_BREAKPOINTS,
multi: true
};`

[MarcusMorba]

@CaerusKaru : if you can provide some working app code examples I think I would be able to write some documentation.

[CaerusKaru]

We'll be getting this in just as soon as #900 lands.