modularscale/modularscale-sass

Changes to responsive logic

scottkellum opened this issue · 2 comments

scottkellum commented

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

PR associated with these updates: #172