В этом уроке мы подробно рассмотрим, как Bootstrap обрабатывает типографику, и как мы можем изменить код несколькими различными способами, чтобы создать адаптивную шкалу типов. Это часто называют «отзывчивой типографикой», цель которой — сделать вашу типографику читабельной на всех экранах и избежать гигантских заголовков на мобильных устройствах!
Как Bootstrap устанавливает типографику по умолчанию
Чтобы понять, как работает типографика Bootstrap, нам нужно начать изучать исходные файлы SCSS чтобы изучить настройки и настройки по умолчанию.
Примечание: для ясности в этом уроке я закомментировал стили из кода Bootstrap, которые НЕ связаны с типографикой.
Элемент html
Давайте сначала посмотрим на стили для корневого элемента, найденного в _reboot.scss в строке 27:
html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; // -ms-overflow-style: scrollbar; // -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
От html элемента не так много отчетов о настройке шкалы типов . Тем не менее, стоит отметить -*-text-size-adjust: 100%; деклараций. Они были использованы, чтобы не позволить некоторым мобильным браузерам самостоятельно увеличивать размер шрифта.
Элемент body
Вот стили элементов тела, которые можно найти в _reboot.scc в строке 57 :
body { // margin: 0; // 1 font-family: $font-family-base; font-size: $font-size-base; font-weight: $font-weight-base; line-height: $line-height-base; color: $body-color; text-align: left; // 3 // background-color: $body-bg; // 2 }
Теперь мы можем начать видеть применение некоторых типографских стилей. С точки зрения масштаба шрифта нам нужно иметь дело только с font-size . По умолчанию это устанавливается с помощью переменной $font-size-base найденной в _variables.scss , и равно 1rem .
Элемент p
Эти стили для элемента p находятся в _reboot.scss в строке 109 :
p { margin-top: 0; margin-bottom: $paragraph-margin-bottom; }
Здесь не о чем сообщать: тег p просто наследует свой font-size и line-height от тела, как и следовало ожидать.
Элементы от h1 до h6
Эти стили находятся в _type.scss от 16 до 21 :
h1, .h1 { font-size: $h1-font-size; } h2, .h2 { font-size: $h2-font-size; } h3, .h3 { font-size: $h3-font-size; } h4, .h4 { font-size: $h4-font-size; } h5, .h5 { font-size: $h5-font-size; } h6, .h6 { font-size: $h6-font-size; }
Здесь вы видите, что элементу и служебному классу задается font-size через переменную. Соответствующие переменные находятся в _variables.scss в строках с 246 по 251. Посмотрев на эти переменные, мы увидим размеры по умолчанию, настроенные для работы во всех браузерах и окнах просмотра
$h1-font-size: $font-size-base * 2.5 !default; $h2-font-size: $font-size-base * 2 !default; $h3-font-size: $font-size-base * 1.75 !default; $h4-font-size: $font-size-base * 1.5 !default; $h5-font-size: $font-size-base * 1.25 !default; $h6-font-size: $font-size-base !default;
Глядя на шкалу типов для вышесказанного, становится ясно, что увеличение .25rem используется до h1 , что дает увеличение. .5rem .
Эти размеры могут быть переопределены в файле пользовательских переменных, если вы используете компилятор Sass, но он по-прежнему оставляет один font-size для каждого заголовка по всей ширине браузера и области просмотра.
Служебные классы с .display-1 по .display-4
Следующий код увлекается в _type.scss из строк с 29 по 48 :
// Type display classes .display-1 { font-size: $display1-size; // font-weight: $display1-weight; // line-height: $display-line-height; } .display-2 { font-size: $display2-size; // font-weight: $display2-weight; // line-height: $display-line-height; } .display-3 { font-size: $display3-size; // font-weight: $display3-weight; // line-height: $display-line-height; } .display-4 { font-size: $display4-size; // font-weight: $display4-weight; // line-height: $display-line-height; }
Как и в случае с заголовочными элементами, размеры класса утилиты отображения определяются как переменные в файле _variables.scss в строках с 259 по 262. Опять же, если вы работаете с компилятором Sass, вы можете переопределить их в файле пользовательских переменных.
Это касается настройки Bootstrap, и теперь мы можем посмотреть, как быстро адаптировать масштабируемый тип шрифта.
Создание гибкой шкалы типов
Стоит остановиться на том, что я имею в виду под отзывчивой шкалой типов . По умолчанию Bootstrap font-size для заголовков и его классов display-* явно установлены с использованием переменных, найденных в _variables.scss и правил, найденных в _type.scss .
Установка одного font-size для заголовков по всем размерам экрана и окна просмотра может довольно быстро привести к увеличению заголовков, что ухудшает качество работы пользователя.
Конечно, вы могли бы создавать некоторые медиа-запросы, когда это подходит для уменьшения размеров шрифтов, которые выглядят слишком большими, но в этот момент вы теряете любую форму иерархии масштабирования типов. Нам нужна иерархия типов для отслеживания потока документа.
В набор входит Responsive Type Scale и отличный способ реализовать его в проекте Bootstrap! Если вы не используете Sass или SCSS, вы можете просто обновить перо, которое я использую для примеров, и извлечь скомпилированный CSS.
Обзор гибкой шкалы типов для Bootstrap
Мы собираемся установить три основные вещи:
- карта масштаба типа для быстрых изменений и экспериментов
- функция для проверки правильности использования весов
- два миксина, которые позволяют нам гибко настраивать размеры шрифта в любой момент времени.
Стоит отметить, что, если ваш дизайн не включает в себя шкалу типов, которая работает на обычном множественном числе, использование mixin не сработает, и вам нужно будет посмотреть на скомпилированный CSS в ручке, чтобы получить код, необходимый для обновления размеры шрифта.
Карта шкал адаптивного типа
Создайте карту Sass с предопределенными типографскими масштабами, $type-scales scale , в соответствии с моделью, найденной на type-scale.com . Масштабы на карте могут быть переданы в миксин Sass, который создает размеры шрифта, используя их key из пар key: value .
После карты масштабов определены две переменные: $heading-type-scale-base и $display-type-scale-base . Эти переменные содержат начальные масштабы, которые используются из окна просмотра нулевой ширины или браузера и вверх. Эти переменные принимают ключ из карты $type-scales scale или могут получить значение без единиц измерения:
$type-scales : ( minor-second: 1.067, major-second: 1.125, minor-third: 1.200, major-third: 1.250, perfect-fourth: 1.333, augmented-fourth: 1.414, perfect-fifth: 1.500, golden-ratio: 1.618 ); $heading-type-scale-base : minor-third; $display-type-scale-base : minor-third;
Как проверить значение адаптивного типа шкал
Важно, чтобы вы не ограничивались только значениями на карте, поскольку это может не подходить для вашего дизайна.
По этой причине нижеприведенная функция проверит, является ли значение, переданное в mixin, одним из значений, установленных на карте $type-scales scale, или оно должно быть значением без единиц измерения для создания масштаба типа:
@function check-type-scale-value($scale) { // Check $scale against the values in $type-scales. @if map-has-key($type-scales, $scale) { // If the value of $scale is defined in // $type-scales, return the value of $scale. @return map-get($type-scales, $scale); // If the value of $scale is not defined in the // $type-scales map, check if the value is a number // and that the number is a unitless value. } @else if type-of($scale) == number and unitless($scale) { // If the value of $scale is a unitless number, // return the number. @return $scale; // Lastly, should the value passed to $scale be neither // found in the $type-scales map nor a unitless number, // throw a Sass error to explain the issue. } @else { // Throw a Sass error if the $scale value is // neither found in the $type-scales map nor // a unitless number. @error "Sorry, `#{$scale}` is not a unitless number value or a pre-defined key in the $type-scales map."; } }
Далее мы создадим миксины для создания начальных размеров шрифта.
Создание заголовка и отображение размеров шрифта
Я впервые написал CSS для достижения адаптивной шкалы типов, когда была доступна альфа-версия Bootstrap 4. Но с момента выпуска стабильной версии библиотеки я SCSS настройки, чтобы использовать настройку SCSS по умолчанию, которая делает удобным включение кода в проекты Bootstrap.
Первый mixin используется для создания размеров шрифта заголовка от h6 до h1 :
@mixin create-heading-type-scale($scale) { // Check the $scale value and store in a variable to be // used when calculating the font sizes. $the-heading-type-scale: check-type-scale-value($scale); // Starting from h6, multiply each previous value by the scale // to get the next font size $font-size-h6 : $font-size-base; $font-size-h5 : $font-size-h6 * $the-heading-type-scale; $font-size-h4 : $font-size-h5 * $the-heading-type-scale; $font-size-h3 : $font-size-h4 * $the-heading-type-scale; $font-size-h2 : $font-size-h3 * $the-heading-type-scale; $font-size-h1 : $font-size-h2 * $the-heading-type-scale; // $font-size-display-base is made global to allow for accessing the // varibale in the next mixin. $font-size-display-base : $font-size-h1 !global; // Add the created font sizes to the elements and classes h1, .h1 { font-size: $font-size-h1; } h2, .h2 { font-size: $font-size-h2; } h3, .h3 { font-size: $font-size-h3; } h4, .h4 { font-size: $font-size-h4; } h5, .h5 { font-size: $font-size-h5; } h6, .h6 { font-size: $font-size-h6; } }
Выше размеры шрифтов сначала создаются и сохраняются в переменных, начиная с $base-font-size и умножая каждое предыдущее значение на значение масштаба типа. Тот же принцип применяется ниже, но мы начнем с $font-size-display-base :
@mixin create-display-type-scale($scale) { // Store default type scale in a variable for calculations $the-display-type-scale: check-type-scale-value($scale); // Create variables to reference the previous font size $font-size-display-4 : $font-size-display-base + $font-size-base; $font-size-display-3 : $font-size-display-4 * $the-display-type-scale; $font-size-display-2 : $font-size-display-3 * $the-display-type-scale; $font-size-display-1 : $font-size-display-2 * $the-display-type-scale; // Add the created font sizes to the elements and classes .display-4 { font-size: $font-size-display-4; } .display-3 { font-size: $font-size-display-3; } .display-2 { font-size: $font-size-display-2; } .display-1 { font-size: $font-size-display-1; } }
Drop the Root font-size
Мне нравится 14px font-size root до 14px для мобильных телефонов и работать до 16px а затем до 18px . Ниже SCSS для этого использует размеры точек останова md и lg :
html { font-size: 14px; @media (min-width: 768px) { font-size: 16px; } @media (min-width: 992px) { font-size: 18px; } }
Завершение
Как только вся эта работа будет завершена, вам нужно будет включить ваши миксины и выбрать желаемые весы!
// Create the heading font sizes @include create-heading-type-scale($heading-type-scale-base); // Create the display font sizes @include create-display-type-scale($display-type-scale-base); // At the Bootstrap md breakpoint, adjust the heading font sizes. @media (min-width: 768px) { @include create-heading-type-scale(minor-third); }
Как видите, вы можете включить миксин в любую точку останова и полностью изменить масштаб вашего типа. Каждый размер шрифта все еще может быть переопределен при необходимости, и все выглядит хорошо.
Bootstrap Адаптивный Тип Масштаб в Действии
Вы можете увидеть шкалу адаптивного типа Bootstrap в действии с помощью этого пера:
Я надеюсь, что это руководство дало вам представление о том, как вы можете настроить Bootstrap, чтобы оно работало для вас, предоставляя лучшее понимание того, как добиться гибкой шкалы типов с помощью этой популярной библиотеки.
Если у вас есть основы Bootstrap за поясом, но вы не знаете, как поднять свои навыки Bootstrap на следующий уровень, ознакомьтесь с нашим курсом «Создайте свой первый сайт с Bootstrap 4», чтобы быстро и весело познакомиться с мощью Bootstrap.