Содержание статьи
В этой статье мы рассмотрим, как установить систему интервалов в 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, в том числе поля могут вызвать проблемы с макетом. Еще раз, мы имеем в виду основные компоненты, те блоки, которые определяют ваш основной макет (а не компонент
Загрузка...
