Java, UX, HTML, CSS, WEB-design

Отзывчивая типографика с картами Sass

Краткое описание по статье Отзывчивая типографика с картами Sass

Название: Отзывчивая типографика с картами Sass . Краткое описание: [ad_1] ⭐ Джоната . Дата публикации: 07.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Джонатан Су

  • 0 Комментарии

Отзывчивая типографика с картами Sass

  • 9 минут чтения

  • Кодирование, Типографика, CSS, Адаптивный дизайн

Краткое резюме ↬

Управлять последовательным типографским ритмом непросто, но когда шрифт отзывчивый, все становится еще сложнее. К счастью, Карты Sass делают адаптивную типографику более управляемой. Написание кода — это одно, а отслеживание значений размера шрифта для каждой точки останова — совсем другое, и все вышеперечисленное относится только к абзацам. Добавить h1 к h6s, каждый с переменным размером шрифта для каждой точки останова, и это становится громоздким, особенно когда тип не масштабируется линейно.

Управлять последовательным типографским ритмом непросто, но когда шрифт отзывчивый, все становится еще сложнее. К счастью, карты Sass делают адаптивную типографику более управляемой.

Написание кода — это одно, а отслеживание значений размера шрифта для каждой точки останова — совсем другое, и все вышеперечисленное относится только к абзацам. Добавить h1 к h6s, каждый с переменным размером шрифта для каждой точки останова, и это становится громоздким, особенно когда тип не масштабируется линейно.

Дальнейшее чтение на SmashingMag:

  • По-настоящему плавная типографика с единицами vh и vw
  • Представляем адаптивную веб-типографику с помощью FlowType.JS
  • 10 принципов читаемой веб-типографики
  • Идеальный абзац

Если вы пробовали работать с адаптивным шрифтом, это может показаться вам знакомым:

Еще после прыжка! Продолжить чтение ниже ↓

p { font-size: 15px; }

@media screen and (min-width: 480px) {
  p { font-size: 16px; }
}
@media screen and (min-width: 640px) {
  p { font-size: 17px; }
}
@media screen and (min-width: 1024px) {
  p { font-size: 19px; }
}

Переменные Sass отлично подходят для повторного использования значений в проекте, но управление ими для адаптивных размеров шрифтов легко превращается в беспорядок.


$p-font-size-mobile : 15px;
$p-font-size-small  : 16px;
$p-font-size-medium : 17px;
$p-font-size-large  : 19px;

$h1-font-size-mobile: 28px;
$h1-font-size-small : 31px;
$h1-font-size-medium: 33px;
$h1-font-size-large : 36px;

// I think you get the point…

Вот в чем сила карт и циклов Sass: они помогли мне управлять значениями z-индекса, цветами и, как вы вскоре увидите, размерами шрифта.

Организация размеров шрифтов с помощью Sass Maps

Давайте начнем с создания карты Sass с парами ключ-значение — точки останова в качестве ключей и размеры шрифта в качестве соответствующих значений.


$p-font-sizes: (
  null  : 15px,
  480px : 16px,
  640px : 17px,
  1024px: 19px
);

Имея в виду мобильность, мы видим, что ключ null представляет размер шрифта по умолчанию (не в медиа-запросе), а точки останова расположены в порядке возрастания.

Затем миксин, который перебирает карту Sass и генерирует соответствующие медиа-запросы.


@mixin font-size($fs-map) {
  @each $fs-breakpoint, $fs-font-size in $fs-map {
    @if $fs-breakpoint == null {
      font-size: $fs-font-size;
    }
    @else {
      @media screen and (min-width: $fs-breakpoint) {
        font-size: $fs-font-size;
      }
    }
  }
}

Примечание. Стоит отметить, что этот миксин, как и последующие, содержит некоторую базовую логику программирования. Sass с помощью SassScript (набор встроенных расширений) делает возможными базовые конструкции программирования, такие как if/else заявления, each петли и многое другое. Я рекомендую вам потратить некоторое время на чтение документации. «Мощные функции» Sass познакомят вас с новым измерением того, что вы можете делать с помощью Sass.

Затем мы будем использовать миксин для абзацев:


p {
  @include font-size($p-font-sizes);
}

… что приводит к следующему CSS:


p { font-size: 15px; }

@media screen and (min-width: 480px) {
  p { font-size: 16px; }
}
@media screen and (min-width: 640px) {
  p { font-size: 17px; }
}
@media screen and (min-width: 1024px) {
  p { font-size: 19px; }
}

Управление и отслеживание размеров шрифтов для элементов становится намного проще! С каждым новым элементом создавайте карту и вызывайте миксин в соответствующем селекторе.


$h1-font-sizes: (
  null  : 28px
  480px : 31px,
  640px : 33px,
  1024px: 36px
);

h1 {
  @include font-size($h1-font-sizes);
}

Поддерживайте одинаковые размеры шрифта для различных элементов:


p, ul, ol {
  @include font-size($p-font-sizes);
}

Решение фрагментации точки останова

Но ждать! Что, если мы решим, что нам нужен размер шрифта ps быть 17 пикселей и h1должно быть 33 пикселя при точке останова 700 пикселей вместо 640 пикселей? С приведенным выше решением потребуется вручную изменить каждый экземпляр 640px. Пытаясь решить одну проблему, мы непреднамеренно создали другую: фрагментацию точек останова.

Если мы можем управлять размерами шрифтов в картах Sass, то, конечно же, мы можем сделать то же самое с точками останова, верно? Точно!

Давайте создадим карту для общих точек останова и назначим каждому значению соответствующее имя. Мы также немного изменим карту размеров шрифта, используя имена точек останова, которые мы назначили в $breakpoints установить взаимосвязь между точками останова и картами размеров шрифтов.


$breakpoints: (
  small : 480px,
  medium: 700px, // Previously 640px
  large : 1024px
);

$p-font-sizes: (
  null  : 15px,
  small : 16px,
  medium: 17px,
  large : 19px
);

$h1-font-sizes: (
  null  : 28px,
  small : 31px,
  medium: 33px,
  large : 36px
);

Последний шаг — немного подправить миксин, чтобы при повторении карты размеров шрифтов он использовал имя точки останова для получения подходящего значения из $breakpoints перед созданием медиа-запроса.


@mixin font-size($fs-map, $fs-breakpoints: $breakpoints) {
  @each $fs-breakpoint, $fs-font-size in $fs-map {
    @if $fs-breakpoint == null {
      font-size: $fs-font-size;
    }
    @else {
      // If $fs-font-size is a key that exists in
      // $fs-breakpoints, use the value
      @if map-has-key($fs-breakpoints, $fs-breakpoint) {
        $fs-breakpoint: map-get($fs-breakpoints, $fs-breakpoint);
      }
      @media screen and (min-width: $fs-breakpoint) {
        font-size: $fs-font-size;
      }
    }
  }
}

Примечание. Карта точек останова миксина по умолчанию: $breakpoints; если имя вашей переменной точек останова отличается, обязательно измените его во втором аргументе строки 1.

Вуаля! Теперь, что, если мы хотим, чтобы элемент имел размер шрифта для пользовательской точки останова, которой нет в $breakpoints? В карте размеров шрифтов просто вставьте значение точки останова вместо имени в качестве ключа, и миксин сделает всю работу за вас:


$p-font-sizes: (
  null  : 15px,
  small : 16px,
  medium: 17px,
  900px : 18px,
  large : 19px,
  1440px: 20px,
);

p {
  @include font-size($p-font-sizes);
}

Волшебство происходит в миксине благодаря Сассу. map-has-key функция. Он проверяет, существует ли имя ключа в $breakpoints: если он существует, он будет использовать значение ключа; если нет, он будет считать, что ключ является пользовательским значением, и использовать его вместо этого при создании медиа-запроса.


p { font-size: 15px; }

@media screen and (min-width: 480px) {
  p { font-size: 16px; }
}
@media screen and (min-width: 700px) {
  p { font-size: 17px; }
}
@media screen and (min-width: 900px) {
  p { font-size: 18px; }
}
@media screen and (min-width: 1024px) {
  p { font-size: 19px; }
}
@media screen and (min-width: 1440px) {
  p { font-size: 20px; }
}

Улучшение вертикального ритма с высотой строки

Высота строки также является важной частью достижения последовательного вертикального ритма. Итак, не перебарщивая, давайте включим в решение высоту строки.

Расширьте карту размеров шрифтов, включив в список как размер шрифта, так и высоту строки в качестве значения нужного ключа:


$breakpoints: (
  small : 480px,
  medium: 700px,
  large : 1024px
);

$p-font-sizes: (
  null  : (15px, 1.3),
  small : 16px,
  medium: (17px, 1.4),
  900px : 18px,
  large : (19px, 1.45),
  1440px: 20px,
);

Примечание. Хотя значения высоты строки могут быть определены с использованием любой допустимой единицы CSS (проценты, пиксели, ems и т. д.), рекомендуется использовать «безразмерные» значения, чтобы избежать неожиданных результатов из-за наследования.

Затем нам нужно изменить миксин, чтобы он включал высоту строки при создании CSS.


@mixin font-size($fs-map, $fs-breakpoints: $breakpoints) {
  @each $fs-breakpoint, $fs-font-size in $fs-map {
    @if $fs-breakpoint == null {
      @include make-font-size($fs-font-size);
    }
    @else {
      // If $fs-font-size is a key that exists in
      // $fs-breakpoints, use the value
      @if map-has-key($fs-breakpoints, $fs-breakpoint) {
        $fs-breakpoint: map-get($fs-breakpoints, $fs-breakpoint);
      }
      @media screen and (min-width: $fs-breakpoint) {
        @include make-font-size($fs-font-size);
      }
    }
  }
}

// Utility function for mixin font-size
@mixin make-font-size($fs-font-size) {
  // If $fs-font-size is a list, include
  // both font-size and line-height
  @if type-of($fs-font-size) == "list" {
    font-size: nth($fs-font-size, 1);
    @if (length($fs-font-size) > 1) {
      line-height: nth($fs-font-size, 2);
    }
  }
  @else {
    font-size: $fs-font-size;
  }
}

Миксин проверяет, является ли значение ключа в карте размеров шрифтов списком, а не значением размера шрифта. Если это список, то он получает правильное значение из списка по значению индекса с помощью метода nth функция. Предполагается, что первое значение — это размер шрифта, а второе — высота строки. Давайте посмотрим на это в действии:


p {
  @include font-size($p-font-sizes);
}

И вот полученный CSS:


p { font-size: 15px; line-height: 1.3; }

@media screen and (min-width: 480px) {
  p { font-size: 16px; }
}
@media screen and (min-width: 700px) {
  p { font-size: 17px; line-height: 1.4; }
}
@media screen and (min-width: 900px) {
  p { font-size: 18px; }
}
@media screen and (min-width: 1024px) {
  p { font-size: 19px; line-height: 1.45; }
}
@media screen and (min-width: 1440px) {
  p { font-size: 20px; }
}

Это окончательное решение легко расширяется для включения множества других атрибутов, таких как толщина шрифта, поля и т. д. Ключевым моментом является изменение make-font-size утилита mixin и используйте nth функция для получения подходящего значения из списка.

Вывод

Существуют различные подходы к отзывчивой типографике и последовательному вертикальному ритму, и они не ограничиваются моим предложением. Тем не менее, я обнаружил, что это работает для меня чаще, чем нет.

Использование этого миксина, скорее всего, создаст дубликаты медиа-запросов в скомпилированном CSS. Было много дискуссий о дублирующихся медиа-запросах по сравнению с сгруппированными медиа-запросами, использовании @extend вместо миксинов, а также о производительности и размере файла; однако тесты пришли к выводу, что «разница, хотя и уродливая, в худшем случае минимальна, а в лучшем — практически отсутствует».

Я также понимаю, что мое решение ненадежно (оно не предназначено для обработки диапазонов медиа-запросов, max-width или ориентацию окна просмотра). Такие возможности можно реализовать в миксине (моя личная версия тоже конвертирует значения пикселей в ems), но для сложных медиазапросов я предпочитаю писать вручную. Не забывайте, что вы можете использовать map-get функция для извлечения значений из существующих карт.

Альтернативы

Единицы области просмотра (vh, vw, vmin и vmax) также можно использовать для создания адаптивной типографики:

Пример единиц просмотра в действии. Одна единица области просмотра = 1% ширины или высоты области просмотра. (Для окна просмотра шириной 1000 пикселей 1vw знак равно 10px; для окна просмотра высотой 500 пикселей, 1vh знак равно 5px.)

Например, единицы измерения ширины области просмотра можно использовать для создания плавного текста. Однако из-за того, что текст будет масштабироваться по ширине или высоте окна просмотра (в отличие от размера области содержимого страницы) и поскольку в CSS в настоящее время отсутствует min и max значения для font-size свойство, единицы области просмотра не подходят для основного текста: независимо от того, какое значение вы выберете, размер основного текста в единицах области просмотра всегда окажется слишком большим или слишком маленьким при экстремальных размерах браузера, что потребует вмешательства медиа-запроса.

FitText.js выполняет аналогичную работу, уделяя особое внимание изменению размера текста, чтобы он всегда располагался на одной строке или мере. Методы SVG также можно использовать для достижения аналогичного эффекта.

Ну наконец то, Эрик ван Блокланд работает над некоторыми очень интересными возможностями адаптивной типографики, такими как формы букв, которые на самом деле изменяются в зависимости от размера окна просмотра, чтобы сохранить пространство, а не просто уменьшиться.

Дополнительные ресурсы

Модульная шкала — отличный инструмент для достижения адаптивной типографики, и у Сары Суэйдан есть отличная статья о методах адаптивной типографики.

Источник изображения на первой странице.

Сокрушительная редакция
(дс, мл, ал)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Отзывчивая типографика с картами Sass

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»