Changes to responsive logic

scottkellum commented 3 years ago

Raising a new issue to increase visibility and gain feedback. This stems from #171 but is not directly related to that issue.

New responsive syntax proposal:

ms.$settings: (
  base: 12px,
  ratio: 1.2,
  respond: typetura,
  400px: (
    base: 12px 14px,
    ratio: 1.2,
  ),
  1000px: (
    base: 20px,
    ratio: 1.6,
  )
);

.typetura {
  @include ms.step using ($respond) {
    font-size: ms.step(2, $respond);
  }
}

.container {
  @include ms.step(media) using ($respond) {
    font-size: ms.step(2, $respond);
    padding: ms.step(2, $respond) ms.step(2);
  }
}

CSS output:

.typetura {
  font-size: 17.28px;
  --tt-key: ubhbfuz;
  --tt-max: 1000px;
}
@keyframes ubhbfuz {
  40% {
    font-size: 14.4px;
  }
  100% {
    font-size: 51.2px;
  }
}

.container {
  font-size: 17.28px;
  padding: 17.28px 17.28px;
}
@media (min-width: 400px) {
  .container {
    font-size: 14.4px;
    padding: 14.4px 17.28px;
  }
}
@media (min-width: 1000px) {
  .container {
    font-size: 51.2px;
    padding: 51.2px 17.28px;
  }
}

This should be way more flexible that what existed before as it transforms the existing step function to match your contexts.

This will include output modes for Typetura, media queries, and container queries.

I do not plan to support for clamp() or CSS Locks. While it requires some JS, Typetura provides far more flexibility and easier authoring than clamp() and CSS Locks.

scottkellum commented 3 years ago

PR associated with these updates: #172

scottkellum commented 3 years ago

You can test it out here: https://github.com/modularscale/modularscale-sass/releases/tag/v4.0.0.rc1

modularscale / modularscale-sass

Changes to responsive logic #173