Содержание статьи
В этой статье мы рассмотрим, как установить систему интервалов в CSS и как использовать относительные единицы для реагирования.
Эта статья является частью серии систем проектирования, основанных на нашей (предстоящей) библиотеке веб-компонентов. Библиотека опирается на прочную систему глобалов CSS. Таким образом, мы разделяем то, что мы узнали, устанавливая глобальный стиль нашей библиотеки! ✌
Серия статей:
— Часть 1: Типография
— Часть 2: Сетка и макет
— Часть 3: Цвета
— Часть 4: Интервал
— Часть 5: Значки (скоро)
— Часть 6: Кнопки (скоро)
Установка системы интервалов с использованием переменных CSS
Шаг первый установки системы интервалов создает масштаб значений (интервалов). Чтобы создать шкалу нелинейных значений, вам нужно 1) единица или базовое значение и 2) множитель. Мы уже говорили о создании модульной шкалы в нашей статье о веб-типографии.
. Основной подход к интервалу будет выглядеть следующим образом:
В приведенном выше фрагменте описана система интервалов
Примечание: в первый раз, когда я прочитал о применении последовательности Фибоначчи к шкале значений интервала, было указано в . ] эта превосходная статья The Scenery .
Недостатком базового подхода является то, что … ну, это просто. Если мы хотим изменить одно значение интервала, мы должны выполнить математику и обновить все другие значения вручную.
Давайте попробуем немного контролировать систему. Мы можем ввести переменную для определения номера единицы и использовать функцию calc () для получения значений интервала.
Мы приближаемся! В приведенном выше примере мы определили каждое значение расстояния, умножив число единиц на множитель. Обратите внимание, что последовательность Фибоначчи по-прежнему применяется к мультипликаторам. Теперь, если мы хотим обновить всю систему, мы можем отредактировать значение единицы.
Далее, давайте избавимся от абсолютной единицы и заменим ее на em. Для этого мы можем заменить 16px на 1em:
. Что выглядит как небольшая настройка, на самом деле сильно меняется! Блок em является относительной единицей, равной текущему размеру шрифта. В большинстве браузеров размер шрифта по умолчанию (до применения стилей CSS) составляет 16 пикселей. Поэтому мы можем считать 1em = 16px. Однако, если вы редактируете размер шрифта элемента, 1em больше не является 16px (для этого элемента), но он равен новому размеру шрифта. То, что выглядит как недостаток контроля, является мощным быстродействием быстрого реагирования . Позвольте мне показать вам, почему.
Если вы следили за этой серией в системах проектирования, вы знаете, что мы создали систему типографики, где все размеры шрифта переплетаются и получаются путем умножения переменной размера текстовой базы (равным 1em) соотношением. Это означает, что переменная размера текстовой базы является контроллером всей системы типов .
Если вы обновляете только одну переменную, вы получаете следующее:
Не только это! Поскольку промежуточный блок равен 1em, а все остальные значения расстояния являются множителями значения единицы, когда мы обновляем переменную размера текстового размера, мы также влияем на интервал. ?
Посмотрите, как этот метод влияет на типографику и интервал в одно и то же время:
Мы по-прежнему обновляем одну переменную (размер текстовой базы). До сих пор нет дополнительных медиа-запросов! Все, что вам нужно сделать, чтобы воспользоваться этим мощным подходом к отзывчивости, — это использовать промежуточные переменные для установки paddings и полей на уровне компонентов:
Что делать, если вы хотите обновить все значения интервала сразу, без необходимости изменять переменную размера текстовой базы? Просто обновите переменную пространства-единицы:
Верно, что, применяя такой метод, как этот, вы теряете часть своего «визуального» контроля, но это в пользу простоты и ремонтопригодности. Это правда, что вы не сможете установить идеальные значения пикселей, но вы будете реагировать на реагирование на совершенно новый уровень: большая часть работы будет устанавливать надежный масштаб значений для интервала и типографики. Затем вы можете отредактировать 2-3 переменные при определенных запросах мультимедиа, чтобы создать каскадный эффект, в отличие от настройки всех компонентов и подэлементов.
Как установить заполнение по умолчанию для всех компонентов
Будут случаи, когда вам нужны разные компоненты, чтобы иметь одинаковые дополнения. Установка переменной для заполнения компонентов по умолчанию — это трюк, который я узнал после того, как потратил много времени на поиск значения дополнения, скрытого где-то в моих файлах CSS. ?
Чтобы быть ясным, я имею в виду те блочные, «контейнерные» компоненты.
Вот пример:
Возвращение к нашему файлу _spacing.scss, давайте добавим переменную заполнения компонента:
При этом вы создаете еще один «ярлык»: если вам нужно применить дополнение к компоненту, вам не нужно чтобы проверить, какая переменная расстояния использовалась в других подобных случаях. Просто используйте переменную-заполнителя.
Классы полезности маржи
Хотя безопасно включать прописку непосредственно в ваш компонент CSS, в том числе поля могут вызвать проблемы с макетом. Еще раз, мы имеем в виду основные компоненты, те блоки, которые определяют ваш основной макет (а не компонент
Если представить эти компоненты как блоки, макеты, то информация о полях и позиции должна храниться в элементе абстрактного макета, а не в компоненте. Например, вы можете использовать один и тот же компонент в двух разных макетах, в одном случае вам нужно применить margin-bottom, в другом вы этого не сделаете. Вы можете понять, почему включение нижнего предела в компонент CSS не может быть хорошей идеей в этом случае.
По этим причинам может быть полезно иметь классы полезности для полей:
Возможно, вы можете обновить значения полей в определенной точке останова, чтобы автоматически увеличить расстояния, когда область просмотра больше.
Пользовательские значения интервала
Что делать, если вы задание поля на элементе, а space-sm выглядит слишком маленьким, а space-md слишком большим? Работа с набором предопределенных переменных означает, что иногда вам приходится идти на компромисс (ради удобства обслуживания системы).
НО! Если вам нужно использовать значение расстояния, которое не включено в шкалу расстояний, и вы не хотите редактировать или разбивать систему, вы можете воспользоваться функцией CSS calc:
Поступая таким образом, вы вводите новое значение расстояния, но вы все еще проверяете, что это новое значение «контролируется» одной и той же системой.
Исправлены значения интервала
Система интервалов мы ввели, что все поля, paddings (и элементы типографии) обновляются одновременно с использованием нескольких переменных. Насколько это возможно, бывают случаи, когда вы не хотите изменять значение расстояния независимо от размера области просмотра.
Для этого вам нужно определить интервал, используя другой блок: бэр . В отличие от em rem относится к размеру html (root). Поэтому это не влияет на редактирование размера шрифта тела (обновление переменной размера текстового размера).
Чтобы быть ясным, я не предлагаю заменить em на но объединить их.
Самый простой способ установить «фиксированное» значение расстояния:
Однако это означало бы введение кучи пользовательских, out-of-the-system, интервальные значения. Если мы подумаем о реальном сценарии: новый разработчик присоединяется к вашей команде, они открывают файл CSS и замечают, что вы установили маркер 0.5rem на элемент. В идеальном мире разработчиков вы сообщили своему новому коллеге о системе интервалов или о том, что у проекта есть (современные) рекомендации CSS, или коллега просит больше узнать, как обрабатывается интервал в проекте. В реальном мире разработчиков шансы нового товарища по команде предполагают, что интервал устанавливается с использованием пользовательских значений rem .
Чтобы избежать путаницы, было бы идеальным использовать переменные. Если мы это сделаем, коллега вынужден проверить файл _spacing.scss, где они найдут (100%! ?) ваши полезные комментарии.
Вот пример того, как вы можете (необязательно) установить шкала «фиксированных» значений расстояния в дополнение к отзывчивым:
_spacing.scss
Объединяя все это, вот наш файл _spacing.scss:
Вот где мы с системой интервалов до сих пор! Если у вас есть отзывы / предложения, сообщите нам об этом в комментарии!
Надеюсь, вам понравилась статья! Для получения большего количества веб-дизайнов, следуйте за нами здесь, на Среднем или Twitter. ?
Загрузка...
