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.