Support more breakpoints

[axos88]

Is it possible to change the number of breakpoints? 4 is not too many, and different projects have different needs.

Bootstrap supports a dynamic number of breakpoints for example, that would be awesome!

[agertenbach]

+1 -- Also looking for the correct way to handle this in the latest versions of Primeflex -- the previously documented SCSS variables appear to have changed and we need to enable progressive support for larger breakpoints

[axos88]

This works for me currently, but some proper documentation would be nice:

@import 'primeflex/core/variables';

$xxl: 1600px;
$fhd: 1920px;
$qhd: 2560px;

$breakpoints: (
  'sm': $sm,
  'md': $md,
  'lg': $lg,
  'xl': $xl,
  'xxl': $xxl,
  'fhd': $fhd,
  'qhd': $qhd
);

@import 'primeflex/primeflex.scss';

[m4n50n]

Hello, and thank you for the excellent work on PrimeFlex! I appreciate the utility and flexibility it provides.

Currently, PrimeFlex defines breakpoints as follows:

$breakpoints: ( 'sm': 576px, 'md': 768px, 'lg': 992px, 'xl': 1200px ) !default;

However, I would like to request the addition of more breakpoints, similar to what Bootstrap offers. Bootstrap includes an extra small (xs) breakpoint and an extra-extra-large (xxl) breakpoint, which provide more granularity for responsive designs.

Adding these breakpoints would make it easier to handle layouts for very small or very large screens, providing more flexibility for modern responsive design.

For example, the updated $breakpoints map could look like this:

$breakpoints: ( 'xs': 0px, 'sm': 576px, 'md': 768px, 'lg': 992px, 'xl': 1200px, 'xxl': 1400px ) !default;

This change would align PrimeFlex more closely with other popular frameworks, making migration or integration smoother for developers. It would also provide more versatility for tailoring designs across a broader range of devices.

Thank you for considering this enhancement, and I look forward to hearing your thoughts on this!

Best regards.