Smart Size Names

[smichaelsen]

Automatic Breakpoint

              xs:
                # breakpoints: [ xs ]
                width: 477
                ratio: 21/9
              sm:
                # breakpoints: [ sm ]
                width: 319
                ratio: 21/9

If a size name matches the name of a breakpoint and no breakpoint is given, that breakpoint should automatically be set.

Automatic "up" range

              xs:
                # breakpoints: [ xs ]
                width: 477
                ratio: 21/9
              sm-up:
                # breakpoints: [ sm, md, lg, xl ]
                width: 319
                ratio: 21/9

If a size name matches the name of a breakpoint plus the -up suffix, that breakpoint should automatically be set, without its upper bound, so that the size automatically matches the breakpoint and everything that is bigger.

Automatic "down" range

              xl:
                # breakpoints: [ xl ]
                width: 600
                ratio: 21/9
              lg-down:
                # breakpoints: [ xs, sm, md, lg ]
                width: 319
                ratio: 21/9

If a size name matches the name of a breakpoint plus the -down suffix, that breakpoint should automatically be set, but the lower bound is set to 0, so that the size automatically matches the breakpoint and everything that is smaller.

[smichaelsen]

Closing this because more "magic" won't be helpful to understand or debug the extension.

The "up" and "down" range breakpoint names can also be achieved by manually configuring them:

breakpoints:
  xs:
    to: 599
  sm:
    from: 600
    to: 1280
  lg:
    from: 1281
  sm-up:
    from: 600
  sm-down:
    to: 1280