- πΊπΈUnited States andy-blum Ohio, USA
As @lauriii points out in #19, the breakpoints line up between the breakpoints.yml and the media-queries.pcss.css files
/* * Media query breakpoints. * Processed by postcss/postcss-custom-media. */ @custom-media --sm (min-width: 500px); @custom-media --md (min-width: 700px); @custom-media --lg (min-width: 1000px); @custom-media --xl (min-width: 1300px); /* Navigation related breakpoints */ @custom-media --nav-md (min-width: 500px); @custom-media --nav (min-width: 1200px); @custom-media --max-nav (max-width: 1200px); /* Grid related breakpoints */ @custom-media --grid-md (min-width: 700px); /* Grid shifts from 6 to 14 columns. */ @custom-media --grid-max (min-width: 1440px); /* Width of the entire grid maxes out. */
olivero.sm: label: Small mediaQuery: 'all and (min-width: 500px)' weight: 0 multipliers: - 1x olivero.md: label: Medium mediaQuery: 'all and (min-width: 700px)' weight: 1 multipliers: - 1x olivero.lg: label: Large mediaQuery: 'all and (min-width: 1000px)' weight: 2 multipliers: - 1x olivero.xl: label: X-Large mediaQuery: 'all and (min-width: 1200px)' weight: 3 multipliers: - 1x olivero.nav-md: label: Nav Medium mediaQuery: 'all and (min-width: 500px)' weight: 4 multipliers: - 1x olivero.nav: label: Nav mediaQuery: 'all and (min-width: 1200px)' weight: 5 multipliers: - 1x olivero.grid-md: label: Grid Medium mediaQuery: 'all and (min-width: 700px)' weight: 6 multipliers: - 1x olivero.grid-max: label: Grid Max mediaQuery: 'all and (min-width: 1440px)' weight: 7 multipliers: - 1x
While the 1200px breakpoint is used more frequently, I dont know that I agree we need to change the XL to match the nav breakpoint. Is there a UX or design argument to making this change other than there being a lesser-used breakpoint 100px away from a more commonly used breakpoint?
- πΊπΈUnited States smustgrave
Just wanted to follow up if anyone has a response for #34 before closing.