Breakpoints are aged. Maybe adapt Bootstrap Breakpoints?

[Martin-Eckleben]

Maybe adapt Bootstrap Breakpoints?
I think the Breakpoints of this library are aged.

Our md (tablet) range starts pretty high I think.

flex-layout / ngx-layout:
xs | 'screen and (max-width: 599px)'
sm | 'screen and (min-width: 600px) and (max-width: 959px)'
md | 'screen and (min-width: 960px) and (max-width: 1279px)'
lg | 'screen and (min-width: 1280px) and (max-width: 1919px)'
xl | 'screen and (min-width: 1920px) and (max-width: 5000px)'

Bootstrap:
X-Small | None | <576px
Small | sm | ≥576px
Medium | md | ≥768px
Large | lg | ≥992px
Extra large | xl | ≥1200px
Extra extra large | xxl | ≥1400px

[DuncanFaulkner]

thanks - I'll review and compare with Bootstrap, Material and Tailwind and see how much they differ and draft up a proposal.

Thanks for raising an issue

[Martin-Eckleben]

Thank you for your effort for this lib I like so much! ;)

Material
xs, extra-small: 0px
sm, small: 600px
md, medium: 900px
lg, large: 1200px
xl, extra-large: 1536px

Tailwind
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',

In short:
Mixed as always :)

md 960 seems to high.
Maybe adapt Material Breakpoints - the closest thing.

[Martin-Eckleben]

Or maybe leave it as it is and wait for people to adopt this fork first with as less changes as possible?
Your call :)

[DuncanFaulkner]

Yes at this moment, the plan was to maintain the status quo, I've around 1000 downloads a week and 72 stars on GitHub, which is way more than I expected in such a short time.

I will revamp the documentation and sample applications at some point, but I have updated all the dependencies to the latest, the other thing on my radar is to replace is to move to ESLint and remove TSLint.

[yogeshgadge]

One can extend/configure breakpoints with FlexLayoutModule.withConfig or perhaps {provide: BREAKPOINTS, useValue: MY_BREAKPOINTS}

const MY_BREAKPOINTS = [
    {
        alias: 'xs',
        mediaQuery: 'screen and (min-width: 0px) and (max-width: 599.98px)',
        priority: 1000,
    },
    {
        alias: 'sm',
        mediaQuery: 'screen and (min-width: 600px) and (max-width: 959.98px)',
        priority: 900,
    },
    {
        alias: 'md',
        mediaQuery: 'screen and (min-width: 960px) and (max-width: 1279.98px)',
        priority: 800,
    },
    {
        alias: 'lg',
        mediaQuery: 'screen and (min-width: 1280px) and (max-width: 1919.98px)',
        priority: 700,
    },
    {
        alias: 'xl',
        mediaQuery: 'screen and (min-width: 1920px) and (max-width: 4999.98px)',
        priority: 600,
    },
    {
        alias: 'lt-sm',
        overlapping: true,
        mediaQuery: 'screen and (max-width: 599.98px)',
        priority: 950,
    },
    {
        alias: 'lt-md',
        overlapping: true,
        mediaQuery: 'screen and (max-width: 959.98px)',
        priority: 850,
    },
    {
        alias: 'lt-lg',
        overlapping: true,
        mediaQuery: 'screen and (max-width: 1279.98px)',
        priority: 750,
    },
    {
        alias: 'lt-xl',
        overlapping: true,
        priority: 650,
        mediaQuery: 'screen and (max-width: 1919.98px)',
    },
    {
        alias: 'gt-xs',
        overlapping: true,
        mediaQuery: 'screen and (min-width: 600px)',
        priority: -950,
    },
    {
        alias: 'gt-sm',
        overlapping: true,
        mediaQuery: 'screen and (min-width: 960px)',
        priority: -850,
    }, {
        alias: 'gt-md',
        overlapping: true,
        mediaQuery: 'screen and (min-width: 1280px)',
        priority: -750,
    },
    {
        alias: 'gt-lg',
        overlapping: true,
        mediaQuery: 'screen and (min-width: 1920px)',
        priority: -650,
    }
];

[BojanKogoj]

Instead of changing the default, there could be provided breakpoints for other libs. For example

import {BREAKPOINTS} from '@angular/flex-layout';
import {TAILWIND_BREAKPOINTS} from '@angular/flex-layout/external';
{provide: BREAKPOINTS, useValue: TAILWIND_BREAKPOINTS}

or

import {BOOTSTRAP_BREAKPOINTS} from '@angular/flex-layout/external';
{provide: BREAKPOINTS, useValue: BOOTSTRAP_BREAKPOINTS}

and so on.